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 <MultiList/> component via keyboard only.

To Reproduce

Steps to reproduce the behavior:

1. Use the keyboard "tab" key to tab through a <MultiList/> 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 <MultiList/> component via keyboard only.

Expected behavior

Users should be able to trigger "Show all" button action in <MultiList/> 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

https://user-images.githubusercontent.com/56893094/226723857-a6bc4f43-ff7b-4e49-8e78-c61a2284ff63.mov

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

https://user-images.githubusercontent.com/56893094/226723977-85af2e8c-4a74-46f3-8b63-beb691e758af.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