Listbox Widget A11y Issues

[tannerhuynh]

🐛 Bug report

Current Behavior

Listbox widget that triggers dropdown has role='button' and has no aria-expanded attribute. Options do not have aria-selected attribute.

We had a third party wcag experts review the component and they flagged it as not entirely understandable. The component has role="button" and aria-haspopup="listbox" attributes, which cause the control to be announced as a menu instead of a select or combobox control. Assistive technology users may not understand how to interact with this control.

Expected behavior

The Listbox trigger should have role of combox with aria-expanded attribute based on whether list is expanded or not.
The trigger should also have the following attributes:

• aria-controls="IDREF" - referring to the id of the element with role="listbox"
• aria-activedescendant="IDREF" - referring to the id of the currently focused option within the listbox

Options should have attributes for aria-selected.

Reproducible example

Current usage of listbox.

Suggested solution(s)

https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html

[danielsimao]

@tannerhuynh

Meanwhile you are waiting for a fix, you can solve part of your issue by doing the following:

<ListboxInput>
  {({ value, valueLabel, isExpanded }) => (
    <ListboxButton aria-expanded={isExpanded}>
      <span data-value={value}>{valueLabel}</span>
    </ListboxButton>
    <ListboxPopover>
      <ListboxList>
        <ListboxOption value="apple">Apple 🍏</ListboxOption>
        <ListboxOption value="orange">Orange 🍊</ListboxOption>
        <ListboxOption value="banana">Banana 🍌</ListboxOption>
      </ListboxList>
    </ListboxPopover>
  )}
</ListboxInput>

[danielsimao]

Its seems to only have the aria-expanded when open. @tannerhuynh you would like to have it as well when close, meaning: aria-expanded=false?

[danielsimao]

I don't think its a problem. The guys in reachui team followed w3 documentation. https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/listbox/listbox-collapsible.html