Skip to content

[Combobox] Align the aria-selected behaviour in examples #2962

Open
@silviuaavram

Description

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.

downshift-js/downshift#935

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

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions