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

[BUG]: Table sort headers can't be used from the keyboard and don't announce sort order

Aperta Adatta ai principianti
  • Qualcosa non va?
#419 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 4 giorni

@Simran-Sobhani ci sta già lavorando.

Dal 28/10/2026.

  • #429 di @Simran-Sobhani — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript, react
Ambito
accessibility, frontend, testing

Direzione di ricerca

Leggi SortTh in src/components/UI.jsx e controllane l’uso nelle pagine Repositories e Contributors. Aggiungi il comportamento proposto per la tastiera e lo stato di ordinamento, poi coprilo in src/components/UI.test.jsx con Testing Library. Il lavoro è completato quando le intestazioni di ordinamento possono essere usate da tastiera ed espongono l’ordine di ordinamento attivo agli screen reader.

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

Descrizione

bug enhancement
Bug Description

The sortable column headers on the Repositories and Contributors pages can only be used with a mouse.

SortTh in src/components/UI.jsx (lines 119-138) renders a plain <th> with an onClick handler. A <th> is not focusable, so Tab skips every sort header and there is no way to change the sort order from the keyboard. The header also has no aria-sort, so screen readers do not announce which column is sorted or in which direction. The only hint is the chevron icon and the accent color.

This affects 5 headers on /contributors (ContributorsPage.jsx lines 321-325) and every column on /repositories (RepositoriesPage.jsx line 253). Open PR #276 adds 4 more on a new Maintainers page through the same component.

Impact

Low - Minor inconvenience

Proposed Solution

A small change in SortTh only, so both pages get it:

  • Put a <button type="button"> inside the <th> and move the onClick to it, so the header is focusable and Enter/Space work.
  • Set aria-sort="ascending" / "descending" on the active <th> and "none" on the others.
  • Mark the chevron icon aria-hidden="true".
  • Add src/components/UI.test.jsx with Testing Library: the header is a button, clicking it calls onSort with the key, and aria-sort follows sortConfig.
Steps to Reproduce
  1. Explore any org, for example AOSSIE-Org, and open the Repositories page.
  2. Press Tab repeatedly from the search box.
  3. Focus never lands on a column header, and Enter or Space can't change the sort.
  4. With a screen reader on, move to a header: it is read as plain text with no sorted state.
Logs and Screenshots

No response

Environment Details
  • Branch: main (b396d1b)
  • Found by reading the code; any browser

I'd like to work on this if it's okay with the maintainers.

Code of Conduct
  • I have joined the Discord server and will post updates there
  • I have searched existing issues to avoid duplicates
Lingua principale
JavaScript
Stelle
48
Fork
163
Merge medio
5g 23m
PR unite (30g)
32

Preparare l'ambiente

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 AOSSIE-Org/OrgExplorer

Tutte le issue di AOSSIE-Org/OrgExplorer

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.