Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Lot of accessibility issues

Abierto
  • ¿Algo no está bien?
#429 1 comentario 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

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

Línea de trabajo

Comienza por la implementación del componente Pagination e inspecciona cómo se renderizan las etiquetas del paginador, el estado de la página, la estructura de navegación y los elementos enfocables. Usa como referencia de accesibilidad el ejemplo de paginación de W3C enlazado en el issue. Se considera terminado cuando los lectores de pantalla reciben etiquetas de página útiles, la semántica de navegación y de la página actual, y los elementos del paginador utilizan elementos accionables adecuados y un comportamiento de teclado apropiado.

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

Descripción

Certain implementation decisions that were made for the pagination component have resulted in some serious inaccessibility issues. These include:

  • The programmatic label for all pager buttons uses the title attribute which is sub-optimal. aria-label is the best attribute to use as it works with more screen readers.
  • The programmatic label for page number pager buttons only includes the page number itself and cannot be changed so screen readers will only ever announce eg. "2" instead of something more helpful like "Page 2".
  • Since a pagination component includes navigation elements, it should necessarily be wrapped in a nav element with appropriate programmatic label (eg. <nav aria-label=”pagination”>).
  • The active page is not identified (using aria-current="page") and is, therefore, not announced by screen readers.
  • Instead of having the focusable/actionable pager elements be the anchor or button within each <li> element, the focusable elements in the Pagination component are the <li> elements. This results in the following issues:
    • a suboptimal screen reader UX because, when an element is focused, a screen reader will announce “clickable item 2” instead of something more helpful like "page 2 link".
    • the focusable element is only actionable via the ENTER key only rather than the SPACE and ENTER keys.
    • using UP/DOWN keys has unexpected/undesirable results.

For reference, here is a good example of an accessible pagination component.

Lenguaje dominante
TypeScript
Estrellas
674
Forks
335
Merge medio
7 d 22 h
PR fusionados (30 d)
2

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

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.

Más de react-component/pagination

Todos los issues de react-component/pagination

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.