Define focus restoration for controlled dialogs
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 5/5
- Tiempo estimado
- Más de una semana
- Aptitud para principiantes
- 35/100
- Tipo de issue
- Nueva funcionalidad
- Claridad
- Bastante claro
- Estado de actividad
- Activo
- Stack tecnológico
- typescript
- Área
- accessibility, frontend
Línea de trabajo
Empieza revisando las 16 raíces de Dialog controladas, incluido el selector de paquetes de referencia de NPM, el diálogo de eliminación de roles de administrador y los ejemplos del sistema de diseño. Compara la disposición de sus opener con el Dialog compartido basado en Radix y define el contrato una vez resuelta la decisión pendiente. Se considera terminado cuando el comportamiento elegido de restauración del foco está implementado y una prueba de regresión a nivel de navegador verifica que el foco vuelve después de Escape y del descarte mediante el botón de cierre.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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
Dialogroot.
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:
- Require
DialogTrigger asChildfor dialogs with one colocated opener. - 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.
- 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
DialogTriggereverywhere 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
DialogContentreduces call-site work, but it changes every dialog and can restore focus to a stale or unrelated node when opening is indirect. - Exposing only
onCloseAutoFocusmatches 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
- Lenguaje dominante
- TypeScript
- Estrellas
- 1.1k
- Forks
- 401
- Merge medio
- 18 h 44 min
- PR fusionados (30 d)
- 55
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de TanStack/tanstack.com
-
source-audit
Dificultad 1/5 Menos de una hora Aptitud para principiantes 84/100
TanStack/tanstack.com#1195 ·
-
source-audit
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
TanStack/tanstack.com#1194 · 2 comentarios ·
-
source-audit
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
TanStack/tanstack.com#1177 · 1 comentario ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 64/100
TanStack/tanstack.com#1059 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
TanStack/tanstack.com#1047 ·
Todos los issues de TanStack/tanstack.com
Issues similares
-
blocklist removal
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
MetaMask/eth-phishing-detect#296544 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
pastelsky/bundlephobia#1122 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
-
category/development priority/P2 scope/file-operations scope/testing type/enhancement
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100