FIX give each multiselect checkbox its own accessible name - #2432
Open
tejas_0007 (tejas0077) wants to merge 3 commits into
Open
FIX give each multiselect checkbox its own accessible name#2432tejas_0007 (tejas0077) wants to merge 3 commits into
tejas_0007 (tejas0077) wants to merge 3 commits into
Conversation
Each checkbox in a multiselect Field was receiving aria-labelledby
pointing to the surrounding Field label (e.g. 'tags'), overriding the
individual visible option label. Screen readers announced every checkbox
as 'tags, checkbox' instead of 'default, checkbox', 'core, checkbox' etc.
Fix: add aria-label={choice} to each Checkbox so the individual option
label is used as the accessible name. Also move the group label to a
visually-hidden span referenced by aria-labelledby on the group div,
preserving 'tags' as the group label for screen readers.
Added srOnly utility style to AdditionalInitializers.styles.ts.
Fixes microsoft#2419
| <Checkbox | ||
| key={choice} | ||
| id={`param-${parameter.name}-${choice}`} | ||
| aria-label={choice} |
Contributor
There was a problem hiding this comment.
Fluent’s Field still injects aria-labelledby, which takes precedence over aria-label, so these may still be announced as “tags.” We could explicitly connect each checkbox to its own label:
const choiceLabelId = `param-${parameter.name}-${choice}-label`
<Checkbox
label={{ children: choice, id: choiceLabelId }}
aria-labelledby={choiceLabelId}
/>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #2419
Each checkbox in a multiselect Field was receiving aria-labelledby pointing to the surrounding Field label (e.g. "tags"), overriding the individual visible option label. Screen readers announced every checkbox as "tags, checkbox" instead of "default, checkbox", "core, checkbox" etc.
Fix: added aria-label={choice} to each Checkbox so the individual option label is used as the accessible name. Also moved the group label to a visually-hidden span referenced by aria-labelledby on the group div, preserving "tags" as the group label for screen readers.
Added srOnly utility style to AdditionalInitializers.styles.ts for the visually-hidden span.
Verified the fix by inspecting the rendered accessibility tree. The existing test suite covers checkbox rendering and interaction. No documentation changes needed for this frontend accessibility fix.