diff --git a/README.md b/README.md index 1f01e8b..116cb69 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,8 @@ - **RadioAria** - Add `role='radio'` to a checkable interactive control. Use radio in place of checkbox if only one item in a group can be checked. Add `aria-checked` to indicate the state of the checkbox. +- **SearchAria** - Add `role='search'` The role “searchbox” was added to represent the same element type as an HTML input element that includes type=”search”.. + - **SliderAria** - Add `role='slider'` to allow users to select from a certain range. Add `aria-orientation` to indicate what direction the slider is oriented in. Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. If the value is not represented by a number add `aria-valuetext` in place of aria-valuenow. - **SwitchAria** - Use `role='switch'` on checkboxes that represent an 'on' or 'off' state. Add `aria-checked` to indicate whether component is on or off. Add `aria-required` if the field is required. diff --git a/snippets/react-snippets.code-snippets b/snippets/react-snippets.code-snippets index e3cfb43..0ab700c 100644 --- a/snippets/react-snippets.code-snippets +++ b/snippets/react-snippets.code-snippets @@ -12,6 +12,16 @@ ], "description": "Adds aria attributes for a dialog. A dialog is a window separate from the rest of the webpage like a modal." }, + "SearchAria":{ + "prefix": [ + "SearchAria", + ], + "body": [ + "role='search'", + "role='searchbox'", + ], + "description":"Add `role='search'` to represent the same element type as an HTML input element that includes type=”search”." + }, "AlertAria": { "prefix": [ "AlertAria", @@ -182,4 +192,4 @@ ], "description": "Use `role='switch'` on checkboxes that represent an 'on' or 'off' state. Add `aria-checked` to indicate whether component is on or off. Add `aria-required` if the field is required." } -} \ No newline at end of file +}