Unable to trigger "Show all" button action for <MultiList/> via keyboard

[lam-tiffany]

Affected Projects

React

Library Version: x.y.z

3.39.1

Describe the bug

In my <MultiList/> component, I have showLoadMore set to true. When tabbing through the <MultiList/> component via keyboard, the "Show all" button is not focusable via keyboard.

So I set an attribute of tabIndex to 0 for that button, and it made it focusable successfully. However, even so, pressing Enter/ space did not trigger the same action (e.g. expand 4 more options) as it should with a mouse.

In other words, I'm unable to trigger "Show all" action in component via keyboard only.

To Reproduce

Steps to reproduce the behavior:

1. Use the keyboard "tab" key to tab through a component
2. After tabbing through all the checkbox options, try tabbing on the "Show all" button
3. Bug: "Show all" button is not focusable by keyboard. I'm unable to trigger "Show all" action in component via keyboard only.

Expected behavior

Users should be able to trigger "Show all" button action in component via keyboard only.

Screenshots

1. Default - unable to focus on "Show more" button via keyboard
2. After me trying to set tabIndex attribute - still unable to trigger the button action via keyboard
3. How I set attribute tabIndex to MultiList component

Default - unable to focus on "Show more" button via keyboard

Screen.Recording.2023-03-21.at.12.45.51.PM.mov

After me trying to set tabIndex attribute - still unable to trigger the button action via keyboard

Screen.Recording.2023-03-21.at.12.36.23.PM.mov

How i set attribute tabIndex to MultiList component

Desktop (please complete the following information):

• OS: [e.g. iOS]: macOS
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] Version 110.0.5481.177 (Official Build) (x86_64)

Additional context