aria-practices icon indicating copy to clipboard operation
aria-practices copied to clipboard

[Combobox] Align the aria-selected behaviour in examples

Open silviuaavram opened this issue 11 months ago • 2 comments

Hello! I am opening this issue to ask about aligning the aria-selected attribute value throughout the Combobox examples.

To start with the spec:

For a combobox that controls a listbox, grid, or tree popup, when a suggested value is visually indicated as the currently selected value, the option, gridcell, row, or treeitem containing that value has [aria-selected](https://w3c.github.io/aria/#aria-selected) set to true.

There is a distinction between a selected item and a visually highlighted item (by mouse or keyboard), and, from my understanding, aria-activedescendant on the combobox is enough for screen readers to tell the user which item is highlighted. Consequently, we should use aria-selected on the item that is selected, right? By enter / space bar (select only) or if the combobox has automatic selection on keyboard navigation.

Providing my assumption above is correct, https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/#combobox is correct. It only adds aria-selected as true on the selected item. https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/grid-combo/ also has this behaviour.

https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/ adds aria-selected on the highlighted item, however. Should we also correct this example to follow the behaviour I assume is correct?

At the same time, in the attribute table below the example, aria-selected has the following description:

Specified on an option in the listbox when it is visually highlighted as selected.
Occurs only when an option in the list is referenced by aria-activedescendant.

Which does not align with the selected-only and grid-combo examples, but aligns with the autocomplete-list one.

Long story short, can we align this information for all the examples? And by this I mean correct the actual example implementation and also the attribute description in the table, if needed?

From downshift's point of view, I would like to actually implement the solution with aria-selected for selected items, and let activedescendant only for the highlighting part. Before moving ahead with this, I wanted to make sure I am going to implement the correct behaviour, as we mean to follow ARIA 1.2 specs. Right now we have aria-selected as true for highlighted items in useCombobox, and I'm ready to change that behaviour in the hook.

https://github.com/downshift-js/downshift/issues/935

Also, I am open to contribute to the examples page, after we agree on the implementation. Thanks!

silviuaavram avatar Mar 15 '24 08:03 silviuaavram