Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Lot of accessibility issues

Aperta
  • Qualcosa non va?
#429 1 commento 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
38/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia dall’implementazione del componente Pagination e verifica come vengono renderizzate le etichette del pager, lo stato della pagina, la struttura di navigazione e gli elementi focalizzabili. Usa come riferimento per l’accessibilità l’esempio di paginazione W3C collegato nell’issue. Il lavoro è completato quando gli screen reader ricevono etichette di pagina utili, la semantica della navigazione e della pagina corrente, e gli elementi del pager usano elementi azionabili appropriati e un comportamento da tastiera adeguato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
674
Fork
333
Merge medio
12m
PR unite (30g)
1

Preparare l'ambiente

Non abbiamo ancora controllato i file di configurazione di questo progetto. Parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react-component/pagination

Tutte le issue di react-component/pagination

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.