VCC-2970 VCC-2968 Add a select-only variant; add additional keyboard interaction #22
Conversation
…interaction The input is replaced with a `div`, then all of the appropriate interactions and attributes are added to the `div`. Notably, this also brings a lot of `select`-specific behavior to the `div`. Even though the text input is disabled and not visible, we still have to use familiar patterns.
…he select/input When a `<select>` has a paired label (the `<label>`'s for matches the `id` on the `<select>`) or there is a `<label>` directly before a `<select>`, update the `for` to match the `id` of the combobox element
There was a problem hiding this comment.
@stephymiehle Thank you for the update.
I encountered two issues during testing. Firstly, when multiselection is enabled, the text for selected items wraps.
Secondly, there is an error when using ESC to close the dropdown.
Also, If the Combobo is initialized on the HTML without a select element, no data will be posted on form submission. Would it be possible to keep the input and change it to a hidden input?
Additionally, I suggest renaming the 'selectOnly' configuration to something more clear, such as 'noInput'.
|
Thanks @Farsad! Those issues are updated. Now that we're retaining a hidden I came across the "Select-Only" terminology from the W3C. In another discussion on W3C, this was first called a "read-only combobox" and changed to "select-only" because I've seen this terminology used from other accessibility bloggers and developers, but usually in reference to the W3C example. I agree that it's a funny fit when we are adding |
…'origin' into vcc-2970/label-for
VCC-3455 Update the `for` attribute on the label to match the ID on the select/input
When the text input is deactivated, the combobox works like a
<select>.The input is replaced with a
div, then all of the appropriate interactions and attributes are added to thediv. Notably, this also brings a lot ofselect-specific behavior to thediv.Even though the text input is not visible, we still have to use familiar keyboard patterns; see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/#kbd_label