fix(a11y): improve screen reader support for select and array widgets - #8313
Closed
Wagner3UB wants to merge 8 commits into
Closed
fix(a11y): improve screen reader support for select and array widgets#8313Wagner3UB wants to merge 8 commits into
Wagner3UB wants to merge 8 commits into
Conversation
stevepiercy
requested changes
Jun 3, 2026
stevepiercy
left a comment
Member
There was a problem hiding this comment.
Grammar on news. Otherwise LGTM. Needs a technical review. Thank you!
Co-authored-by: Steve Piercy <web@stevepiercy.com>
Wagner3UB
marked this pull request as draft
June 4, 2026 06:36
Contributor
Author
|
I put this one in draft because there are too many Cypress test errors to open it. |
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. |
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
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 #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