The editor's expanded platform preview doesn't work with the keyboard
Les mainteneurs répondent en général sous 1 jour
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 2/5
- Temps estimé
- 1-3 heures
- Accessibilité débutants
- 85/100
- Type d'issue
- Bug
- Clarté
- Clairement spécifiée
- Activité
- Active
- Stack technique
- react, typescript
- Domaine
- accessibility, frontend
Piste de recherche
Lisez src/components/editor/PlatformPreviewStrip.tsx, en vous concentrant sur les cartes de plateforme, la superposition, la boîte de dialogue, le nom de la plateforme et le bouton Close. Implémentez le comportement indiqué pour le focus, Escape, le confinement de Tab, la restauration et le libellé de la boîte de dialogue, tout en conservant la fermeture par clic sur l’arrière-plan. Vérifiez le résultat à l’aide des critères d’acceptation au clavier de l’issue, puis exécutez npm run check, npm run test et npm run build.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Description
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-modaland 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
keydownondocumentin auseEffectand 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"andaria-labelledbypointing at the platform name (line 82).useIdworks for the id. - Remove
role="button"andtabIndexfrom 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 testandnpm run buildpass - 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.
- Langage dominant
- TypeScript
- Étoiles
- 8
- Forks
- 4
- Merge moyen
- 5 h 44 min
- PR mergées (30 j)
- 83
Préparer son environnement
- Aucun Dockerfile ni fichier Docker Compose
- Propose un modèle de pull request
- Lire le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de codercops/ogcops
-
Add the Order Status e-commerce template (`ecommerce-order-status`)Peut-être pris @piyusshhjangid l’a pris il y a 1 jour. Ouvertegood first issue hacktoberfest templates
codercops/ogcops#181 · 4 commentaires · 1 personne assignée ·
Les mainteneurs répondent en général sous 1 jour
-
Add the Cheat Sheet tutorial template (`tutorial-cheat-sheet`)Peut-être pris @srikar-naidu l’a pris il y a 1 jour. Ouvertehacktoberfest help wanted templates
Difficulté 2/5 1-3 heures Accessibilité débutants 45/100
codercops/ogcops#180 · 3 commentaires ·
Les mainteneurs répondent en général sous 1 jour
-
Add the Call for Speakers event template (`event-call-for-speakers`)Peut-être pris @Saifjafri212213 l’a pris il y a 1 jour. Ouvertegood first issue hacktoberfest templates
codercops/ogcops#177 · 2 commentaires · 1 personne assignée ·
Les mainteneurs répondent en général sous 1 jour
-
Add the Day Streak developer template (`developer-day-streak`)Peut-être pris @srikar-naidu l’a pris il y a 1 jour. Ouvertehacktoberfest help wanted templates
codercops/ogcops#176 · 3 commentaires · 1 personne assignée ·
Les mainteneurs répondent en général sous 1 jour
-
Hacktoberfest 2026: start hereOuvertehacktoberfest
Difficulté 1/5 Moins d'une heure Accessibilité débutants 35/100
Les mainteneurs répondent en général sous 1 jour
Toutes les issues de codercops/ogcops
Issues similaires
-
Difficulté 2/5 1-3 heures Accessibilité débutants 76/100
Nimblesite/SharpLsp#468 ·
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 2/5 1-3 heures Accessibilité débutants 72/100
Les mainteneurs répondent en général sous 1 jour
-
Bundled uv is never updated and trusts the compromised eMudhra certificatesPeut-être pris @FabienDanieau l’a pris aujourd’hui. Ouvertebug
Difficulté 2/5 1-3 heures Accessibilité débutants 76/100
-
bg_wait's blocking mode (stopOnAttention: false) is under-documented and effectively undiscoverableOuverte
Difficulté 2/5 1-3 heures Accessibilité débutants 66/100
nicobailon/pi-subagents#3019 ·
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 2/5 1-3 heures Accessibilité débutants 66/100
db-ux-design-system/core-web#8613 ·
Les mainteneurs répondent en général sous 1 jour