patternfly / patternfly/patternfly-react
Bug - Table - hoverable example invalid markup and selection not announced on navigation
Nadie ha tomado este issue todavía.
- 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
outputelement 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
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- 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