Skip to content

docs(a11y): Update accessibility documentation for Accessory and Selection Group #4233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alanbsmith merged 5 commits into from
Oct 30, 2026
Merged

docs(a11y): Update accessibility documentation for Accessory and Selection Group #4233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
324cf55
docs: Remove extra headings
jamesfan Oct 30, 2026
48ac6d0
docs: Migrate accessibility docs from Design Site
jamesfan Oct 30, 2026
ef5f1c0
docs: Update formatting
jamesfan Oct 30, 2026
fcc44d9
docs: Migrate accessibility docs from Design Site
jamesfan Oct 30, 2026
725b6b3
docs: Remove incorrect a11y guidance for Accessory
jamesfan Oct 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 1 addition & 13 deletions modules/labs-react/accessory/stories/Accessory.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,36 +106,24 @@ at `medium`, `large`, and `extraLarge`. `outline` adds a default border at those

<ExampleCodeBlock code={Variants} />

### 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
of on the accessory. They are not buttons and do not take click or keyboard handlers.

## Component API

### Accessory

Comment on lines -117 to -118

@jamesfan jamesfan Oct 30, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These headings are extraneous (already rendered by SymbolDoc).

<SymbolDoc name="Accessory" fileName="/labs-react/" />

### AccessoryIcon

<SymbolDoc name="AccessoryIcon" fileName="/labs-react/" />

### AccessoryFile

<SymbolDoc name="AccessoryFile" fileName="/labs-react/" />

### AccessoryMedia

<SymbolDoc name="AccessoryMedia" fileName="/labs-react/" />

### AccessoryFavicon

<SymbolDoc name="AccessoryFavicon" fileName="/labs-react/" />

### AccessoryCalendar

<SymbolDoc name="AccessoryCalendar" fileName="/labs-react/" />

## Specifications
Expand Down
11 changes: 7 additions & 4 deletions modules/labs-react/selection-group/stories/SelectionGroup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <kbd>Space</kbd> 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

Expand Down
Loading