Accessibility: no way to clear the selection with a keyboard

Caveat: I’m not an accessibility expert so perhaps there is an alternative mechanism available to clear selections. But the usual way (tabbing to the clear button) is not working.

Reproduction Steps

1. open NVDA
2. visit https://react-select.com/
3. tab to any select example that has a selected item and that is clearable (at the time of this writing the first example satisfies these conditions)
4. tab again

Expected Behavior

I would expect Step 4 to focus the “X” that clears the selected option.

Actual Behavior

You can’t focus the clear button.

Proposed Solution

Make the clear div a button tag.

Am I Willing To Submit A PR For This?

Yes, absolutely. The company I work for has budget for fixing a11y issues in the open source libraries we use or that we are considering using.

[dgreene1]

On second thought, @Rall3n i just re-read the combo box authoring spec and it refers to the popup button or children of the popup. The clear button is neither of those things. So can you clarify why it would break the spec to make clear tab-able?

Note: The popup indicator icon or [popup indicator] button (if present), the popup, and the popup descendants are excluded from the page Tab sequence.

[dgreene1]

@Rall3n I agree to the spec but it’s just sad for the user that it’s a bit confusing. I concede though because following specs allows us to provide a common mental model for users so they can “port” their experiences from one application to another.

FYI, your links to the authoring guide above are stale or wrong so I have it here: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

thank you for the insight.