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
• Combobox
• MultiCombobox

[silvalaura]

With Mac Safari 17.2.1 / VoiceOver the clear button label is not announced when it gains focus: https://github.com/user-attachments/assets/10b49b93-47fa-4ef8-8954-92a0e86b026e

It also results in errors when scanning the page with axe-core

[orion-cengage]

I tested all three impacted inputs in Storybook and they're working perfectly. This one looks good to go.