Skip to content

fix(a11y): improve screen reader support for select and array widgets - #8313

Closed
Wagner3UB wants to merge 8 commits into
mainfrom
fix/a11y-select-widget-screen-reader-value
Closed

fix(a11y): improve screen reader support for select and array widgets#8313
Wagner3UB wants to merge 8 commits into
mainfrom
fix/a11y-select-widget-screen-reader-value

Conversation

@Wagner3UB

Copy link
Copy Markdown
Contributor

Fixes #5139
Partially fixes #5140 (not done - Verify that all chips in large multi-select lists are reachable via keyboard in all edge cases)

What

Improves keyboard and screen reader accessibility for SelectWidget and ArrayWidget (react-select based fields), specifically addressing the Date and Time control panel.

Changes

issue #5139

  • SelectWidget: replaced aria-labelledby with a dynamic aria-label that includes the field title and current selected value(s). Falls back to "No value" (translated) when the field is empty. Separated inputId from id so the HTML label correctly points to the react-select inner input.
  • ArrayWidget: same aria-label pattern applied for multi-select fields.

issue #5140

  • SelectWidget / ArrayWidget: isClearable now respects the required prop — the clear button is hidden on required fields.
  • SelectStyling — MultiValueContainer: restored only ref from innerProps on the Popup trigger div to preserve Semantic UI Popup positioning without reintroducing event handler conflicts.
  • SelectStyling — SortableMultiValue: added aria-label with field name prefix per chip (using a dedicated fieldTitle prop to avoid fragile string parsing), tabIndex={-1} to remove chips from Tab order (navigation via arrow keys, as announced natively by react-select), and onKeyDown handler to remove a chip via Delete/Backspace/Enter.
  • SelectStyling — MultiValueRemove: added role="button" and tabIndex={-1} to mark the remove button as an interactive element.

Behavior after fix

  • Screen reader announces field name + current value(s) on focus (e.g. "Available timezones: Europe/Berlin, UTC")
  • Empty fields announce "Available timezones: No value"
  • Arrow left navigates to chips; react-select natively announces "press left to focus selected values"
  • Delete/Backspace/Enter removes the focused chip
  • Required fields ("Portal default timezone", "First weekday") no longer show the clear button

@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.

Grammar on news. Otherwise LGTM. Needs a technical review. Thank you!

Comment thread packages/volto/news/8313.bugfix Outdated
@github-project-automation github-project-automation Bot moved this from In progress to Review in progress in Accessibility Jun 3, 2026
@github-project-automation github-project-automation Bot moved this from In progress to Review in progress in RedTurtle priorities Jun 3, 2026
Co-authored-by: Steve Piercy <web@stevepiercy.com>
@Wagner3UB
Wagner3UB marked this pull request as draft June 4, 2026 06:36
@Wagner3UB

Copy link
Copy Markdown
Contributor Author

I put this one in draft because there are too many Cypress test errors to open it.

@Wagner3UB

Copy link
Copy Markdown
Contributor Author

This PR has been split into smaller, focused pull requests for easier review and to isolate potential issues:

Closing this PR in favor of the above.

@Wagner3UB Wagner3UB closed this Jun 4, 2026
@github-project-automation github-project-automation Bot moved this from Review in progress to Done in RedTurtle priorities Jun 4, 2026
@github-project-automation github-project-automation Bot moved this from Review in progress to Done in Accessibility Jun 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

Status: Done

2 participants