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

The editor's expanded platform preview doesn't work with the keyboard

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

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

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

Direzione di ricerca

Leggi src/components/editor/PlatformPreviewStrip.tsx, concentrandoti sulle schede delle piattaforme, la sovrapposizione, la finestra di dialogo, il nome della piattaforma e il pulsante Close. Implementa il comportamento indicato per il focus, Escape, il contenimento di Tab, il ripristino e l’etichettatura della finestra di dialogo, mantenendo la chiusura tramite clic sullo sfondo. Verifica il risultato in base ai criteri di accettazione da tastiera dell’issue, quindi esegui npm run check, npm run test e npm run build.

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

Descrizione

accessibility bug good first issue hacktoberfest ui

In the editor (for example https://og.codercops.com/create/blog), Tab to one of the platform cards under the canvas and press Enter. The expanded preview opens, but:

  • Focus stays on the card behind the overlay.
  • Escape doesn't close it. The Escape handler is on the overlay (src/components/editor/PlatformPreviewStrip.tsx, line 73), and the overlay doesn't have focus.
  • Tab keeps moving through the other seven cards underneath. After them it lands on the overlay itself, which is a role="button" (lines 69 to 72) whose name is all the text in the preview. Only there does Escape work.
  • When it closes (Escape on the overlay, or the Close button), focus drops to the page body instead of going back to the card.
  • The dialog (line 78) has no aria-modal and no accessible name, so a screen reader doesn't say which platform it shows.

What to do

  • Move focus into the dialog when it opens, for example to the Close button.
  • Close it on Escape while it's open: listen for keydown on document in a useEffect and remove the listener in the cleanup, or put the handler on the dialog.
  • Keep Tab inside the dialog while it's open (the viewport buttons and Close), so focus can't wander behind it.
  • When it closes, put focus back on the card that opened it.
  • Give the dialog aria-modal="true" and aria-labelledby pointing at the platform name (line 82). useId works for the id.
  • Remove role="button" and tabIndex from the overlay. Clicking the backdrop can still close it.

Where to look

  • src/components/editor/PlatformPreviewStrip.tsx: the cards (lines 41 to 54), the overlay (lines 68 to 74), the dialog (lines 75 to 80), the platform name (lines 82 to 84) and the Close button (lines 87 to 94)

Acceptance criteria

  • Enter on a platform card opens the preview with focus inside it
  • Escape and the Close button both close it, and focus goes back to the card
  • Tab stays inside the dialog while it's open
  • The dialog has aria-modal="true" and is labelled with the platform name
  • Mouse use works as before, including closing by clicking the backdrop
  • npm run check, npm run test and npm run build pass
  • The PR says how you tested it with the keyboard

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off dev, and open your PR against dev with Closes #170 in the description.

Lingua principale
TypeScript
Stelle
8
Fork
4
Merge medio
6h 9m
PR unite (30g)
66

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 codercops/ogcops

Tutte le issue di codercops/ogcops

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.