Skip to content

DRYD-1341 Accessibility > Custom select does not have a role and/or state - #30

Open
spirosdi wants to merge 1 commit into
mainfrom
bugfix/dryd-1341
Open

spirosdi wants to merge 1 commit into
mainfrom
bugfix/dryd-1341

Conversation

@spirosdi

Copy link
Copy Markdown
Contributor

What does this do?
It exposes dropdown menu as an ARIA combobox (https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) associated with a listbox. The currently focused option is announced using aria-activedescendant.
The changes are:

  • DropdownMenuInput gets role="combobox", aria-haspopup="listbox", aria-expanded andaria-controls
  • Menu accepts an id prop and <ul role="listbox"> gets that id. Each <li role="option"> gets a derived ${id}-option-${index} id and aria-disabled when disabled. The listbox sets aria-activedescendant to the focused option. Both // TODO: ARIA comments are resolved.
  • FilteringDropdownMenuInput adds aria-autocomplete="list" and marks the "N matches found" header as status, so that it is also announced.
  • QuickSearchInput gives fixed ids.

Why are we doing this? (with JIRA link)
https://collectionspace.atlassian.net/browse/DRYD-1341. The accessibility audit found that the custom select in the header has no role or state and that its options are not announced by screen readers (WCAG 4.1.2 Name, Role, Value). This applies the ARIA combobox pattern, one of the fixes Deque recommended.

How should this be tested? Do these changes have associated tests?
Manual test with a screen reader like macOS VoiceOver.

In cspace-ui.js, update your package.json to use this version of cspace-input, e.g.
"cspace-input": "file:../cspace-input.js",

  1. Tab to the Quick Search dropdown in the header. It should be announced as a collapsed combobox.
  2. Press ArrowDown. It should be announced as expanded, and the first/selected option should be read with its position, "All Records, selected, 1 of N".
  3. Arrow up and down. Each option should be read as it is focused.
  4. Press Enter to select, and Escape to close. The input should be announced as collapsed again.
  5. Type a few letters to filter. The match count should be announced and ArrowDown should enter the filtered list.

Dependencies for merging? Releasing to production?
After merging a new release should be published

Has the application documentation been updated for these changes?
Changelog has been updated

Did someone actually run this code to verify it works?
@spirosdi ran it locally against core.dev

…rolled listbox; Focused option is announced using aria-activedescendant;
@spirosdi
spirosdi requested a review from mikejritter October 14, 2026 08:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant