feat(Select): add label prop to SelectActivator - #635
Conversation
…ectActivator (closes vuetifyjs#613)
|
✅ 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.
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.
|
This PR has been split. The printable-char typeahead was removed in 9ab7835 and now lives as a design item in #908: the |
SelectActivatoris 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.vuelabelprop → emitted asaria-labelon the activator (passed through toSelectActivatorProps/SelectActivatorSlotProps.attrs)onKeydown, when the listbox is open and a printable character key is pressed (single char, no Ctrl/Meta/Alt modifier), delegates tocontext.virtualFocus.typeahead(e.key)— jumps virtual focus to the first non-disabled item whose text content starts with that characterpackages/0/src/composables/useVirtualFocus/index.tstypeahead(char: string) => voidmethod onVirtualFocusReturn(interface + implementation)highlight()on itWCAG coverage
aria-labelon 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).