Lighthouse ARIA accessibility warning

[joostmeijles]

I am getting a ARIA accessibility warning in Lighthouse on the following:

<div id="react-autowhatever-1" role="listbox" class="react-autosuggest__suggestions-container"></div>

My React components looks like this:

const inputProps = {
        placeholder: 'What are you looking for?',
        onChange: onChange,
        onKeyDown: onKeyDown,
        value
    }

<AutoSuggest
            suggestions={hits}
            onSuggestionsFetchRequested={onSuggestionsFetchRequested}
            onSuggestionsClearRequested={onSuggestionsClearRequested}
            getSuggestionValue={getSuggestionValue}
            renderSuggestion={renderSuggestion}
            inputProps={inputProps}
            onSuggestionSelected={suggestionSelected}
            shouldRenderSuggestions={shouldRenderSuggestions}
            focusInputOnSuggestionClick={false}
            onSuggestionHighlighted={onSuggestionHighlighted}
            multiSection={true}
            renderSectionTitle={renderSectionTitle}
            getSectionSuggestions={getSectionSuggestions}
        />

Am I missing something obvious or is this a bug?

[stephenfrancis]

I have the same problem thrown up by jest-axe:

Expected the HTML found at $('#react-autowhatever-1') to have no violations:

<div id="react-autowhatever-1" role="listbox" class="react-autosuggest__suggestions-container"></div>

Received:

"ARIA input fields must have an accessible name (aria-input-field-name)"

Fix any of the following:
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute

You can find more information on this issue here: 
https://dequeuniversity.com/rules/axe/4.1/aria-input-field-name?application=axeAPI

I think there needs to be a way of adding a aria-label or aria-labelledby on both the div and ul elements that are marked role="listbox".

[thibaudcolas]

react-autosuggest doesn’t live up to its "WAI-ARIA compliant" promise here. But this can all be worked around with renderSuggestionsContainer:

---

First, the div role="listbox" supports adding any ARIA attribute via the renderSuggestionsContainer prop. Here is an example:

renderSuggestionsContainer={({ containerProps, children }) => (
    <div aria-label="Suggestions" {...containerProps}>{children}</div>
)}

This is however not appropriate anyway, as this container itself also contains a listbox. Our combobox should only have one listbox, not two. So instead, we could:

renderSuggestionsContainer={({ containerProps: {role, ...otherContainerProps}, children }) => (
    <div {...otherContainerProps}>{children}</div>
)}

This unfortunately isn’t appropriate either… as we again have no way to add a label to the listbox rendered within this container. Here is what we need instead:

renderSuggestionsContainer={({ containerProps: {role, ...otherContainerProps}, children }) => (
    <div {...otherContainerProps}>
    {React.Children.map(children, child => (
        <ItemsList {...child.props}/>
    ))}
    </div>
)}

With ItemsList being a custom copy of the library’s own ItemsList, which is straightforward enough to copy into your project. Then, it’s just a matter of adding an aria-label or aria-labelledby on the right line:

react-autosuggest/src/ItemList.js

Line 53 in a1ebd7d

<ul role="listbox" {...theme(`${sectionPrefix}items-list`, 'itemsList')}>

.

---

So, to recap, that’s two bugs for react-autosuggest to fix in my opinion, even if they can be worked around:

• There should only be one listbox as a parent to the options (role="listbox" both on suggestionsContainer as well as suggestion ul #701).
• It should be possible to label it (Add aria-label prop for listbox element #770).