diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx index 1fa5320aa1..3263757dff 100644 --- a/modules/labs-react/accessory/stories/Accessory.mdx +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -106,7 +106,7 @@ at `medium`, `large`, and `extraLarge`. `outline` adds a default border at those -### Accessibility +## Accessibility Accessory components are presentational and always `aria-hidden`. Images use an empty `alt` because assistive technology does not see content inside that tile. Name the item in adjacent text instead @@ -114,28 +114,16 @@ of on the accessory. They are not buttons and do not take click or keyboard hand ## Component API -### Accessory - -### AccessoryIcon - -### AccessoryFile - -### AccessoryMedia - -### AccessoryFavicon - -### AccessoryCalendar - ## Specifications diff --git a/modules/labs-react/selection-group/stories/SelectionGroup.mdx b/modules/labs-react/selection-group/stories/SelectionGroup.mdx index d73f657814..e28a137320 100644 --- a/modules/labs-react/selection-group/stories/SelectionGroup.mdx +++ b/modules/labs-react/selection-group/stories/SelectionGroup.mdx @@ -122,14 +122,17 @@ via the `dir` attribute on a parent element. follow the [checkbox keyboard pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/): every item is in the tab order and Space toggles it. - The icon always renders, in both modes and in both selected states. Selection is communicated by - the checkmark inside the icon _and_ a color change, never by color alone. + the checkmark inside the icon _and_ a color change, never by color alone. The icon is the + non-color state indicator and satisfies WCAG 1.4.1 (Use of Color). - `aria-invalid` is only set on a single-select group. The `group` role that a multi-select group - renders does not allow the attribute, so a multi-select group communicates its error state - through the text referenced by `aria-describedby`. Make sure that text names the problem. + renders does not allow the attribute, so a multi-select group communicates its error state through + the text referenced by `aria-describedby`. Make sure that text names the problem. - A group label is required. Provide it with `aria-label` or `aria-labelledby` on `SelectionGroup.List`, or wrap the group in a `FormField` with a visible label. The label must state the selection mode — "Select one" versus "Select all that apply" — so the mode is clear - before interacting. + before interacting and users relying on assistive technology or keyboard navigation aren't left + guessing before they interact. +- Don't add a selected border. It conflicts with the focus indicator. ## Component API