appbaseio / appbaseio/reactivesearch
Unable to trigger "Show all" button action for <MultiList/> via keyboard
- Vorherrschende Sprache
- JavaScript
- Sterne
- 4.9k
- Forks
- 478
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
**Affected Projects**
React
**Library Version:** x.y.z
3.39.1
**Describe the bug**
In my `` component, I have `showLoadMore` set to `true`. When tabbing through the `` 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**
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**
Beitragsleitfaden
Rechercherichtung
Beginne damit, die React MultiList-Implementierung und das showLoadMore/“Show all”-Steuerelement zu lokalisieren, und reproduziere dann den beschriebenen Tab- und Enter/Space-Ablauf. Die Aufgabe ist erledigt, wenn das Steuerelement per Tastatur erreichbar ist und Enter oder Space die verbleibenden Optionen erweitert, wobei das bestehende Mausverhalten erhalten bleibt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- accessibility, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 43/100