Select - nested interactive elements

[jcfilben]

Expected Behavior

Automated accessibility tests shouldn't flag Select component as violating the nested interactive rule.

Actual Behavior

We have a button with an input inside of it in the select and component. The input is needed to pass a value to a Form and the button is needed to open the select dropdown. Even though the input has tabIndex="-1" automated accessibility tools will still flag this as a nested interactive element. See more details here https://github.com/dequelabs/axe-core/issues/3227.

We could potentially explore a solution where we have a hidden input that is outside of the button, use this for the Form. Then just have text within the button where the input previously was to give the visual indication of what has been selected.

URL, screen shot, or Codepen exhibiting the issue

https://storybook.grommet.io/?path=/story/input-select-simple--simple

Steps to Reproduce

Go to the above story and look at the accessibility panel

Your Environment

• Grommet version:
• Browser Name and version:
• Operating System and version (desktop or mobile):