appbaseio / appbaseio/reactivesearch

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

Abierto
#2,201 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

bug
Lenguaje dominante
JavaScript
Estrellas
4.9k
Forks
477
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

**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**
![image](https://user-images.githubusercontent.com/56893094/226724283-6eeb001d-4116-48a9-b4d1-0708b3565c36.png)

**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**

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza localizando la implementación de React MultiList y el control showLoadMore/“Show all”; después, reproduce el flujo de Tab y Enter/Space descrito. La tarea estará terminada cuando se pueda acceder al control mediante el teclado y Enter o Space expanda las opciones restantes, conservando el comportamiento existente del ratón.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, react
Área
accessibility, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
43/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.