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:
Use the keyboard "tab" key to tab through a component
After tabbing through all the checkbox options, try tabbing on the "Show all" button
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
Default - unable to focus on "Show more" button via keyboard
After me trying to set tabIndex attribute - still unable to trigger the button action via keyboard
How I set attribute tabIndex to MultiList component
Default - unable to focus on "Show more" button via keyboard
Affected Projects
React
Library Version: x.y.z
3.39.1
Describe the bug
In my
<MultiList/>
component, I haveshowLoadMore
set totrue
. 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:
Expected behavior
Users should be able to trigger "Show all" button action in component via keyboard only.
Screenshots
tabIndex
attribute - still unable to trigger the button action via keyboardDefault - 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 keyboardhttps://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):
Additional context