[sdornan]

Description
^{Explain the changes or enhancements you are proposing with this pull request.}

RSelect is a custom listbox (a <button> activator plus a teleported role="listbox" panel). It had no aria-activedescendant, so a screen reader announced nothing while arrowing through options, and it lacked the keys a native select has. This brings it in line with the ARIA Authoring Practices select-only combobox pattern. It stays custom: chips, the "All" row, search and the clear/remove buttons can't be done with a native <select>.

RSelect

• The activator is now role="combobox", with aria-controls pointing at the listbox only while it is mounted.
• Options get stable ids, and the activator carries aria-activedescendant for the active option. When searchable, focus lives in the search input, so the input carries the combobox semantics and aria-activedescendant instead, through RTextField's existing popup prop (extended with an optional activedescendant).
• New keys on the activator (non-searchable): Home and End jump to the first and last enabled option, PageUp and PageDown move ten rows and stop at the ends, and typing selects by title prefix (repeating one letter cycles through matches). Typing on a closed field opens it. Disabled rows are skipped.
• The synthetic "All" row of a multi-select was mouse-only (the active index reached it through hover alone). Arrow keys, Home and the Page keys now include it, and Enter toggles it.
• A combobox takes its name from a label, not its contents. An aria-label attribute passed to RSelect now names the activator instead of the wrapper <div>, an unlabelled field falls back to its placeholder, and an inline label is referenced through aria-labelledby.
• Five selects that had no label at all now have one, from existing locale keys (no new strings): the language selector, the permission group, the folder-mapping type cell, and the manual and walkthrough pickers. Without this the e2e axe check reports button-name on the login, logs and library-management pages.

Side effect fixed: useSpatialNav
useSpatialNav treats every combobox as owning the arrow keys, which would have left a closed RSelect trapping focus for pad and keyboard users. A button-based combobox now owns the arrows only while open (the existing aria-haspopup + aria-expanded check), with a test that fails without the change.

Tests

• Unit tests for the roles and ids, active-descendant tracking, Home/End/PageUp/PageDown, type-to-select and cycling, typing on a closed field, the searchable variant, the All row, and aria-label placement.
• Play stories, which also run through axe: RSelect keyboard navigation, searchable keyboard, and multi-select All row; plus a keyboard-selection story for RDateField, which had no play().
• PlatformSelect.stories.ts looked the select up as a button; it now looks for a combobox.

Not changed: no visual change, so no screenshots. aria-haspopup="listbox" is kept, which the e2e role spec and useSpatialNav rely on.

AI disclosure: written with Claude Code (AI-assisted), including the code, the tests and the checks below. A human has not yet reviewed the diff, and I did not test with an actual screen reader (NVDA, VoiceOver); verification is axe plus the DOM-level assertions above.

Checklist
^{Please check all that apply.}

• I've tested the changes locally
• I've updated relevant comments
• I've assigned reviewers for this PR
• I've added unit tests that cover the changes

Verified locally on top of current master (including #5315): vue-tsc --build, ESLint on the changed files, the app vitest project, and the full Storybook project including axe (62 files, 488 tests). CI, including e2e, was green before the merge from master.

Screenshots (if applicable)

None: no visual change.

🤖 Generated with Claude Code

https://claude.ai/code/session_01JKqnUCfoaS7bWkMLmGJ5qq

[sdornan]

The test job failed on RTable.stories.ts › Sort and row activation (play), which this PR does not touch. The story read the Size header button synchronously at the start of play() and races the first render, so it fails intermittently on master too. The fix (findByRole instead of getByRole) is already in #5315; I ported that one line here so this PR does not wait on it, and it becomes a no-op once #5315 merges. It passed 5 of 5 local runs.

---

Generated by Claude Code

[sdornan]

The e2e job failed on this PR's earlier heads with 3 axe button-name violations (library-management, logs, login). That was this PR's doing: a combobox takes its name from a label, not its contents, so selects that were previously named by their visible value lost their name. Fixed in the next push:

• An aria-label passed to RSelect used to land on the wrapper <div>; it now names the activator (this covers the two EventLog filters on the logs page).
• The five selects with no label at all now have one from existing locale keys: language selector (login), folder mapping type cell (library-management), permission group, and the manual and walkthrough pickers.

No new locale keys. The full app (3,236 tests) and Storybook (488 tests, axe included) projects pass locally; I could not run Playwright e2e locally without the backend, so the e2e re-run on the new head is the check.

---

Generated by Claude Code

[greptile-apps]

Confidence Score: 5/5

[Medium impact] The PR appears safe to merge; no new actionable issue was found.

Summary

RSelect now exposes combobox roles and active-option references, adds keyboard navigation, and names previously unlabelled selectors.

• RSelect exposes its active option as people move through choices.
• Select fields use their labels to name the combobox.
• Closed selects pass arrow keys on while open lists keep them.
• The date-field story walks through keyboard date selection.

_{Reviews (2) · Last reviewed commit: "fix(frontend): keep RSelect typeahead fr..." · Reviewed by Greptile}

[Copilot]

🟡 Changes recommended

Keyboard navigation still has paging, typeahead, and shortcut conflicts, and searchable selects can lose active-option announcements when focus stays on the activator.

4 open issues

• Page boundary navigation stalls on disabled rows · New
• Multiword typeahead commits selection at the first space · New
• Typeahead events trigger global shortcuts · New
• Touch search autofocus loses active option announcements · New

What changed in this PR

This PR improves accessibility and keyboard navigation in RomM’s shared RSelect component by exposing combobox semantics and active-option references.

Changes:

• Adds active-descendant bindings, accessible labels, paging, typeahead, and keyboard access to the “All” row.
• Adjusts spatial navigation so closed button-based comboboxes do not trap arrow-key focus.
• Expands unit and Storybook interaction coverage and fixes a table-story rendering race.

File	Description
frontend/​src/​lib/​forms/​RTextField/​RTextField.vue	Supports active-descendant references through the popup prop.
frontend/​src/​lib/​forms/​RSelect/​RSelect.vue	Adds combobox semantics, labels, and keyboard navigation.
frontend/​src/​lib/​forms/​RSelect/​RSelect.test.ts	Tests accessibility attributes and keyboard behavior.
frontend/​src/​lib/​forms/​RSelect/​RSelect.stories.ts	Adds keyboard, search, and multi-select interaction stories.
frontend/​src/​lib/​forms/​RDateField/​RDateField.stories.ts	Adds keyboard date-selection coverage.
frontend/​src/​lib/​data/​RTable/​RTable.stories.ts	Waits for the sort button before interacting.
frontend/​src/​composables/​useSpatialNav/​index.ts	Allows navigation away from closed button comboboxes.
frontend/​src/​composables/​useSpatialNav/​index.test.ts	Covers closed-combobox focus navigation.
frontend/​src/​components/​shared/​PlatformSelect.stories.ts	Queries the select by its new combobox role.
frontend/​src/​components/​shared/​LanguageSelector.vue	Adds an accessible language label.
frontend/​src/​components/​Settings/​FolderMappingTypeCell.vue	Labels the mapping-type select.
frontend/​src/​components/​Settings/​CreateUserDialog.vue	Labels the permission-group select.
frontend/​src/​components/​GameDetails/​WalkthroughSubtab.vue	Labels the walkthrough select.
frontend/​src/​components/​GameDetails/​ManualSubtab.vue	Labels the manual select.

_{Review effort: Balanced}