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

Define focus restoration for controlled dialogs

Aperta
#1,209 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
typescript

Direzione di ricerca

Inizia esaminando le 16 radici di Dialog controllate, incluso il selettore di pacchetti di riferimento NPM, il dialog di rimozione del ruolo di amministratore e gli esempi del design system. Confronta la disposizione dei relativi opener con il Dialog condiviso basato su Radix e definisci il contratto dopo aver risolto la decisione in sospeso. Il lavoro è completo quando il comportamento scelto di ripristino del focus è implementato e un test di regressione a livello browser verifica che il focus ritorni dopo Escape e la chiusura tramite il pulsante di chiusura.

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

Descrizione

source-audit

Evidence

Merged PR #1205 moved shipping overlays onto the shared Radix-backed Dialog, but the controlled-dialog call sites do not register an opener with DialogTrigger.

Current source has 16 controlled Dialog roots and no shipping DialogTrigger usage. Radix stores the trigger in context.triggerRef, then its modal onCloseAutoFocus handler prevents the browser default and calls context.triggerRef.current?.focus(). Without a registered trigger, that ref is null, so keyboard focus is not restored to the control that opened the dialog.

This is straightforward for colocated single openers, such as the NPM baseline package picker. It is not one mechanical change for every caller:

  • Some dialogs are controlled by an opener in a parent component.
  • The admin role removal dialog has one dynamic opener per table row.
  • Some design-system examples currently keep their opener outside the Dialog root.

Repeated title, body, keyword, and open-PR searches found no existing owner. Issue #775 tracks unrelated empty-name, label, landmark, and skip-navigation findings.

Expected impact

Closing a dialog should return keyboard and assistive-technology users to the control that opened it. Falling back to the document body loses their place and makes repeated actions harder.

Proposed direction

Adopt one explicit controlled-dialog focus contract:

  1. Require DialogTrigger asChild for dialogs with one colocated opener.
  2. Add a typed shared API for external or dynamic openers, such as an explicit restore-focus ref or a narrowly exposed Radix close-auto-focus callback.
  3. Add a browser-level regression test that opens a dialog, closes it with Escape and the close button, and verifies focus returns to the actual opener.

Alternatives and tradeoffs

  • Requiring DialogTrigger everywhere keeps the shared API smallest, but dynamic table-row openers would need dialog state and content moved per row or another structural change.
  • Restoring the previously active element automatically inside DialogContent reduces call-site work, but it changes every dialog and can restore focus to a stale or unrelated node when opening is indirect.
  • Exposing only onCloseAutoFocus matches Radix directly, but every caller must repeat the same focus logic and the shared primitive cannot enforce consistency.

Decision needed

@tannerlinsley, should the shared controlled-dialog contract support both DialogTrigger for colocated openers and an explicit restore-focus ref for external or dynamic openers, or should every dialog be restructured so one DialogTrigger always owns the opener?

Source: #1205

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

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.

Altre issue di TanStack/tanstack.com

Tutte le issue di TanStack/tanstack.com

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.