TanStack / TanStack/tanstack.com

Define the aria-label for the extra options menu of the copy page dropdown

Aperta Adatta ai principianti
#793 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
TypeScript
Stelle
1.1k
Fork
401
Merge medio
18h 14m
PR unite (30g)
56

Descrizione

Hi! 👋

Currently, in the copy page dropdown at the top of each page on the documentation pages, there is no clear label for the menu next to the "Copy page" (as Markdown) button (a screen reader only announces that it is a menu). That being said, I think it would be useful to add an aria-label to this menu to make it clearer. Two suggestions:

  • More AI options
  • More Markdown options (source)

What do you think? Let me know if I can open a PR if you agree with the change.

Steps to Reproduce

  1. Go to https://tanstack.com/start/latest/docs/framework/react/quick-start (or a similar documentation page).
  2. Turn on the screen reader (for example, VoiceOver on macOS) and tab to the "Copy page" button.
  3. Press tab again and listen to the "generic" announcement about this element being a menu.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

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.

Direzione di ricerca

Inizia in src/components/CopyPageDropdown.tsx, intorno alle righe 305-314, e riproduci l’annuncio del menu con uno screen reader in una pagina di documentazione come la pagina di avvio rapido collegata. Aggiungi un aria-label chiaro al menu delle opzioni aggiuntive, quindi verifica che il menu venga annunciato in modo significativo invece che soltanto come un menu generico.

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

Valutazione

Stack tecnologico
typescript
Ambito
accessibility, frontend
Tipo di issue
Funzionalità
Difficoltà
1/5
Tempo stimato
Meno di un'ora
Stato di attività
Tranquilla
Chiarezza
Specificata chiaramente
Idoneità per principianti
86/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.