ng-select: "X"(Clear all) button in the dropdown is not accessible through the keyboard "Tab" key. [It is only accessible through Mouse]

[sachinkkarande]

Describe the bug
ng-select: "X"(Clear all) button in the dropdown is not accessible through the keyboard "Tab" key. [It is only accessible through Mouse]
Testes with latest version of ng-select 10.0.4. Same thing is observed.

Reproducbile example

• Editor URL:
  https://stackblitz.com/edit/angular-diubgn-vwtxy7?file=src/template-search-example.component.html
• Application URL:
  https://angular-diubgn-vwtxy7.stackblitz.io

To Reproduce
Steps to reproduce the behavior :

1. Do not use Mouse
2. Use only keyboard to navigate to the ng-select dropdown
3. from ng-select dropdown select any option
4. Use keyboard "Tab" key to select the "x" clear all button
5. Observe that "X" Clear all button does not receive keyboard focus and not accessible

Expected behavior
"X" Clear All button should be keyboard accessible. So that User using only keyboard will able to access the button.

Screenshots
Check GIF: "ng-select X clear all button not selectable through keyboard tab.gif"

Desktop (please complete the following information):

• OS: macOS Ventura version 13.3.1
• Browser: Chrome, FF, Safari.

Additional context
Add any other context about the problem here.

[WaseemSabir]

what would be better experience?

1. Esc clears the text
2. Tab moves to focus on the “X” button

I want to contribute, can I take this? @pavankjadda

[pavankjadda]

Sure. Take itThanks and Regards Pavan Kumar JaddaOn May 28, 2023, at 4:26 PM, Waseem Sabir ***@***.***> wrote: what would be better experience? Esc clears the text Tab moves to focus on the “X” button I want to contribute, can I take this? @pavankjadda —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[sachinkkarande]

Hi, As per accessibility requirment, X should be focusable using TAB key. And ENTER key on X should mimic click behaviour. Thank you! On Mon, May 29, 2023, 2:18 AM Pavan Kumar Jadda ***@***.***> wrote:

…

Sure. Take itThanks and Regards Pavan Kumar JaddaOn May 28, 2023, at 4:26 PM, Waseem Sabir ***@***.***> wrote: what would be better experience? Esc clears the text Tab moves to focus on the “X” button I want to contribute, can I take this? @pavankjadda —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***> — Reply to this email directly, view it on GitHub <#2239 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AT6S4Z7WW24F3DXVZ6J6PMLXIO23TANCNFSM6AAAAAAYOV4THM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[luanadeoliveira]

The X clear all "button" is in a span tag... so I wonder if just adding the attribute role="button" and tabindex="0" or just updating the tag from span to button.

[simon-asp]

Hello! Any news on this? Working for an organization where accesibility is very high prio, this would help :)

I agree that the "X" button should be focusable with the tab key

[pavankjadda]

Merged

[LAURENS-Damien]

Hi,

I think the point "Tab moves to focus on the “X” button" need to be enhanced for "Shift tab" because currently, users are blocked in the component instead to be able to focus previous element in the DOM.
Are you ok with my proposition?