From 324cf556e6411018c1ce34654b25f1cc427cc3f0 Mon Sep 17 00:00:00 2001 From: James Fan Date: Fri, 30 Oct 2026 12:29:05 -0500 Subject: [PATCH 1/5] docs: Remove extra headings --- modules/labs-react/accessory/stories/Accessory.mdx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx index 1fa5320aa1..1ec552f418 100644 --- a/modules/labs-react/accessory/stories/Accessory.mdx +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -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 From 48ac6d0a984a841488e8b57c52952aa9e99ad930 Mon Sep 17 00:00:00 2001 From: James Fan Date: Fri, 30 Oct 2026 12:38:32 -0500 Subject: [PATCH 2/5] docs: Migrate accessibility docs from Design Site --- modules/labs-react/accessory/stories/Accessory.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx index 1ec552f418..b99d7e4591 100644 --- a/modules/labs-react/accessory/stories/Accessory.mdx +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -106,12 +106,15 @@ 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 of on the accessory. They are not buttons and do not take click or keyboard handlers. +Accessory renders with `role="img"` (or `role="presentation"` when purely decorative) and +propagates `alt` or `label` text from the wrapped type. + ## Component API From ef5f1c0c590860bb8891193a1565c9479cd8de3c Mon Sep 17 00:00:00 2001 From: James Fan Date: Fri, 30 Oct 2026 12:41:34 -0500 Subject: [PATCH 3/5] docs: Update formatting --- modules/labs-react/accessory/stories/Accessory.mdx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx index b99d7e4591..16d88a6df1 100644 --- a/modules/labs-react/accessory/stories/Accessory.mdx +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -108,12 +108,11 @@ at `medium`, `large`, and `extraLarge`. `outline` adds a default border at those ## 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. - -Accessory renders with `role="img"` (or `role="presentation"` when purely decorative) and -propagates `alt` or `label` text from the wrapped type. +- 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. +- Accessory renders with `role="img"` (or `role="presentation"` when purely decorative) and + propagates `alt` or `label` text from the wrapped type. ## Component API From fcc44d98f715e32252a2b1d5f8b1f7f0f4eb86dd Mon Sep 17 00:00:00 2001 From: James Fan Date: Fri, 30 Oct 2026 12:48:34 -0500 Subject: [PATCH 4/5] docs: Migrate accessibility docs from Design Site --- .../selection-group/stories/SelectionGroup.mdx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) 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 From 725b6b3040d3a57c2fa58f411a6ce74163bfe1d5 Mon Sep 17 00:00:00 2001 From: James Fan Date: Fri, 30 Oct 2026 13:16:13 -0500 Subject: [PATCH 5/5] docs: Remove incorrect a11y guidance for Accessory --- modules/labs-react/accessory/stories/Accessory.mdx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx index 16d88a6df1..3263757dff 100644 --- a/modules/labs-react/accessory/stories/Accessory.mdx +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -108,11 +108,9 @@ at `medium`, `large`, and `extraLarge`. `outline` adds a default border at those ## 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. -- Accessory renders with `role="img"` (or `role="presentation"` when purely decorative) and - propagates `alt` or `label` text from the wrapped type. +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