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

Dialogs: focus traps, focus restore and keyboard navigation of menus

Aperta
  • Qualcosa non va?
#42 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à
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
42/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, tauri, typescript
Ambito
accessibility, frontend, testing

Direzione di ricerca

Start with ConfirmRunDialog.tsx, SettingsDialog.tsx, Dialogs.tsx and TabList.tsx, then inspect the context menu in src/features/grid/ and the linked follow-up notes for the referenced tasks. Trace how dialogs capture their opener and handle Tab, then run the existing dialog and menu tests to locate the relevant behavior. Done means the listed focus, keyboard, menu, status notice and popup issues meet the acceptance criteria, with the requested tests and checks passing.

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

Descrizione

accessibility area:frontend size:M status:ready type:task

Context

ConfirmRunDialog's Tab trap only works while focus is inside the overlay: after a click on a non-focusable area (focus on <body>), Tab moves to the first focusable element of the page, possibly behind the dialog. SettingsDialog has the same gap. Global shortcuts stay inert (the dialog is aria-modal), so nothing unsafe follows. Other dialogs and menus have small focus issues.

To do

  • Make one shared focus-trap helper/hook used by ConfirmRunDialog, SettingsDialog and Dialogs.tsx (Tab trap that survives focus on <body>).
  • Dialogs.tsx: focus is never restored (the opener is captured after autoFocus).
  • NameDialog never receives busy (double submit); Clear history is disabled when the filtered list is empty.
  • Context menu (grid and sidebar): clamp to the viewport, arrow-key navigation, restore focus.
  • TabList: outside-click duplicates close(), focus not returned to the dropdown button, aria-controls id absent when empty, activedescendant on the search input.
  • role=status notice is mounted with content (live region should exist first).
  • Completion popup stays visible over the Save-query modal until an editor click (Task 8 manual #3).

Acceptance criteria

  • Tab and Shift+Tab never leave an open dialog, even after a click on its background.
  • Closing any dialog returns focus to its opener.
  • Menus open inside the viewport and are keyboard operable.
  • Tests for the shared trap and each fixed dialog.
  • pnpm test && pnpm lint green (plus cargo clippy --all-targets -- -D warnings and pnpm test:rust when Rust changes)

Likely files touched

  • src/features/workspace/ConfirmRunDialog.tsx, src/features/settings/SettingsDialog.tsx, src/components/Dialogs.tsx
  • src/features/grid/ (context menu), src/features/workspace/TabList.tsx

Linked docs

  • docs/notes/plan-05-followups.md (Safe mode, Task 3)
  • docs/notes/plan-03-followups.md (Task 4)
  • docs/notes/plan-04-followups.md (Task 3, Task 8 minors)
Lingua principale
TypeScript
Stelle
0
Fork
0
Merge medio
1h 2m
PR unite (30g)
41

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 Cemoche/tablemax

Tutte le issue di Cemoche/tablemax

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.