Skip to content

feat(Select): add label prop to SelectActivator - #635

Merged
johnleider merged 8 commits into
vuetifyjs:devfrom
sridhar-3009:fix/select-aria-label-typeahead-613
Aug 24, 2026
Merged

feat(Select): add label prop to SelectActivator#635
johnleider merged 8 commits into
vuetifyjs:devfrom
sridhar-3009:fix/select-aria-label-typeahead-613

Conversation

@sridhar-3009

@sridhar-3009 sridhar-3009 commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

SelectActivator is a combobox trigger but had no way to carry an accessible label when the visible label is in a sibling element, and no typeahead for keyboard users. This closes both gaps.

Changes

packages/0/src/components/Select/SelectActivator.vue

  • New optional label prop → emitted as aria-label on the activator (passed through to SelectActivatorProps / SelectActivatorSlotProps.attrs)
  • In onKeydown, when the listbox is open and a printable character key is pressed (single char, no Ctrl/Meta/Alt modifier), delegates to context.virtualFocus.typeahead(e.key) — jumps virtual focus to the first non-disabled item whose text content starts with that character

packages/0/src/composables/useVirtualFocus/index.ts

  • New typeahead(char: string) => void method on VirtualFocusReturn (interface + implementation)
  • Searches all non-disabled items starting from the position after the currently highlighted one (wrapping around), finds the first whose visible text starts with the typed char (case-insensitive), and calls highlight() on it

WCAG coverage

  • 2.1.1 Keyboard — printable-char typeahead is required for listboxes per ARIA authoring practice (APG Listbox pattern §6.5)
  • 4.1.2 Name, Role, Valuearia-label on the combobox satisfies the accessible name requirement when the label element is not associated via <label for>

Refs #613 (already closed by #633; this PR completes the Select half of the same audit).

@github-actions

github-actions Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Changeset found — this change will be included in the next release. Thanks!

Add browser tests for SelectActivator.label (aria-label prop) and the
typeahead keyboard handler that delegates to useVirtualFocus.typeahead.

The typeahead test mounts with attachTo: document.body so that items are
in the live document and document.querySelector resolves element refs,
which is required for applyHighlight to succeed.

Add unit tests for useVirtualFocus.typeahead: forward search from current
position, case-insensitive matching, wrap-around, disabled item skipping,
no-match no-op, all-disabled early return, and el-less item handling.
@johnleider
johnleider changed the base branch from master to dev July 23, 2026 14:18
@johnleider johnleider added enhancement New feature or request and removed T: feature labels Aug 20, 2026
Closes the codecov/patch partials: the modifier/printable-key guard in
SelectActivator's open-state keydown default case, and the null-el
nullish branch in useVirtualFocus typeahead text resolution.
typeahead locals renamed to the createFocusTraversal vocabulary (enabled,
index), redundant el ternary dropped (toValue already covers absent el),
per-symbol JSDoc @example added on VirtualFocusReturn.typeahead, module
key-features list updated, and the changeset title corrected to name the
label prop rather than the attribute it renders.
@johnleider johnleider changed the title feat(Select): add aria-label prop and printable-char typeahead to SelectActivator feat(Select): add label prop to SelectActivator Aug 24, 2026
@johnleider

Copy link
Copy Markdown
Member

This PR has been split. The printable-char typeahead was removed in 9ab7835 and now lives as a design item in #908: the typeahead name breaks VirtualFocusReturn's imperative verb family, its placement is contested (useVirtualFocus vs a shared text-matching seam that useRovingFocus could also consume), and the implementation was partial APG — no timed multi-character buffer, and inert while the listbox is closed where native <select> responds. The PR now carries only the SelectActivator label prop, which resolves the accessible-name gap on its own and is mergeable standalone. The typeahead prototype remains fully recoverable at the pre-split head, bdb78da. Thanks for the contribution — the typeahead work isn't lost, it just needs the design pass before freezing onto the composable API.

@johnleider
johnleider merged commit 840d6ea into vuetifyjs:dev Aug 24, 2026
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Provider Items ship a partial ARIA contract: aria-selected without a role, no keyboard path

2 participants