patternfly / patternfly/patternfly-react

Bug - Table - hoverable example invalid markup and selection not announced on navigation

Abierto
#7,745 5 comentarios 3 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

A11y Stale
Lenguaje dominante
TypeScript
Estrellas
862
Forks
392
Merge medio
4 d 8 h
PR fusionados (30 d)
9

Descripción

Describe the problem
Followup to #7732

The hoverable selectable Table example throws the following warning in the dev environment:

Warning: validateDOMNesting(...): <output> cannot appear as a child of <tbody>

Additionally, due to the way screen readers navigate tables (by cell rather than by row), the row that is selected only gets announced when a row is selected via a cell. Using Tab to navigate between rows (as the table caption instructs) does announce whether the row is selected, but it only announces the aria-label and not the content of the row.

Some possible alternatives:

  • Add a hidden input to each row, similar to the implementation seen in Data list selectable rows example. To avoid invalid markup, I believe this might require having an empty column similar to the table examples that use visible radio inputs.
  • Add a hidden input to the first cell of a row, and add styling so that when the radio input has focus it looks like the row has focus.
  • Move the current output element to the first <td> element of a row

How do you reproduce the problem?
Navigate the Hoverable selectable table example with a screen reader

Expected behavior
Markup is valid, and users can be notified whether the current row is selected as best as possible

Is this issue blocking you?
No

Screenshots
N/A

What is your environment?
N/A

What is your product and what release date are you targeting?
N/A

Any other information?
N/A

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 con el ejemplo de Table enlazado en el issue, que permite pasar el cursor y seleccionar, y reproduce la advertencia y el comportamiento del lector de pantalla al navegar con un lector de pantalla. Inspecciona el marcado de selección de filas del ejemplo; estará terminado cuando la tabla tenga un marcado válido y anuncie si la fila actual está seleccionada, así como su contenido en la medida de lo posible.

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

Evaluación

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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.