Skip to content

fix(a11y): improve screen reader announcements for multi-value chips in select widgets - #8316

Open
Wagner3UB wants to merge 10 commits into
mainfrom
fix/a11y-select-chips-screen-reader
Open

fix(a11y): improve screen reader announcements for multi-value chips in select widgets#8316
Wagner3UB wants to merge 10 commits into
mainfrom
fix/a11y-select-chips-screen-reader

Conversation

@Wagner3UB

Copy link
Copy Markdown
Contributor

Partially fixes #5140

What

Improves screen reader accessibility for multi-value chips in ArrayWidget and SelectWidget.

Changes

  • SelectStylingSortableMultiValue: added aria-label with field name and chip value, and aria-describedby pointing to a hidden element with keyboard instructions — overriding the dnd-kit drag instructions that were being announced instead.
  • SelectWidget / ArrayWidget: suppressed the misleading "press left to focus selected values" announcement via ariaLiveMessages.

Behavior after fix

  • Screen reader announces chip value on focus (e.g. "Available timezones: Africa/Asmera")
  • Screen reader announces keyboard instructions via description: "Press Space to add items. Press Delete or Backspace to remove."
  • The misleading "press left/right to navigate" message is no longer announced

@Wagner3UB
Wagner3UB requested review from a team and stevepiercy June 5, 2026 06:04
@Wagner3UB Wagner3UB self-assigned this Jun 5, 2026
@github-project-automation github-project-automation Bot moved this to In progress in Accessibility Jun 5, 2026
@Wagner3UB
Wagner3UB marked this pull request as ready for review June 5, 2026 06:06

@stevepiercy stevepiercy left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Please let me know what you think. Thank you!

Comment thread packages/volto/src/components/manage/Widgets/ArrayWidget.jsx Outdated
Comment thread packages/volto/src/components/manage/Widgets/SelectStyling.jsx
Comment thread packages/volto/src/components/manage/Widgets/SelectWidget.jsx Outdated
@github-project-automation github-project-automation Bot moved this from In progress to Review in progress in Accessibility Jun 5, 2026
@github-project-automation github-project-automation Bot moved this from In progress to Review in progress in RedTurtle priorities Jun 5, 2026

@stevepiercy stevepiercy left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This is much more understandable. Thank you!

Let's get a second technical review.

@github-project-automation github-project-automation Bot moved this from Review in progress to Reviewer approved in Accessibility Jun 5, 2026
@github-project-automation github-project-automation Bot moved this from Review in progress to Reviewer approved in RedTurtle priorities Jun 5, 2026
@Wagner3UB
Wagner3UB requested a review from wesleybl June 9, 2026 14:43
Comment thread packages/volto/src/components/manage/Widgets/SelectStyling.jsx Outdated
Comment thread packages/volto/src/components/manage/Widgets/SelectStyling.jsx Outdated
Comment thread packages/volto/src/components/manage/Widgets/SelectStyling.jsx
@github-project-automation github-project-automation Bot moved this from Reviewer approved to Review in progress in Accessibility Jun 16, 2026
@github-project-automation github-project-automation Bot moved this from Reviewer approved to Review in progress in RedTurtle priorities Jun 16, 2026
@Wagner3UB
Wagner3UB requested a review from wesleybl July 14, 2026 15:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

Status: Review in progress
Status: Review in progress

Development

Successfully merging this pull request may close these issues.

a11y - site setup - Date and Time - cancel/delete buttons input fields - cms ui

3 participants