A11y Fail: Select - Clearable tab and focus issue

[orion-cengage]

CENG_1964

https://react-magma.cengage.com/version/4.5.0/api/select/#clearable

Issue:

The clear button is nested inside another interactive control with role="button". Focusable elements with an interactive control ancestor (any element that accepts user input such as button or anchor elements) may not be announced by screen readers and may create an empty tab stop. That is, you could tab to the element but the screen reader will not announce its name, role, or state.

I think also results in us getting two focus states at once which is a problem.

Suggestion:

Please place the clear button outside of the button that operates the listbox. It can still be positioned visually where it is currently but should not be nested inside the button in the DOM.

[silvalaura]

This could affect:

• Select
• Input
• Dropdown
• DatePicker