[BUG] Problem with accessibility of the CreatableSelect (nested interactive elements) about chakra-react-select HOT 1 OPEN

First off, I'm not sure what this has to do specifically with the CreatableSelect component. The individual clear buttons always appear whenever you have a select with the isMulti prop.

Second, as far as the Nested Interactive rule is concerned, this pattern doesn't break that rule. Primarily because the actual input component that's focused when you focus the select is a small internal component. The styles that are applied to the outer Control are just the way react-select makes it look like a normal dropdown component.

Also, it is possible to use the keyboard to navigate between the selected options clear buttons to remove them. While the input is focused you can press the left arrow key to navigate through them, and then backspace/delete to remove the option that is currently focused. You can also press delete when nothing is typed to remove the most recently selected options.

As far as native accessibility goes, there isn't really a standard aria pattern in place that this is following, but the core react-select has had issues following native accessibility patterns for a while. There was actually a PR merged in recently to the core package that implements more of the standard combobox pattern aria attributes, which I still need to update this package to support: JedWatson/react-select#5758. The main problem with things like that PR (as you can tell from the description) is that screen readers are not consistent, and it's difficult to make web components be a universally good experience.

But either way, this issue it better off left on the original package. The custom components I made for this package are not actually being rendered by this package, but by react-select itself. That means I have no control over the composition of them, or any of the keyboard interactions.

from chakra-react-select.