Focus Management
Gestión del enfoque
La gestión del enfoque mueve el punto activo del teclado después de que la página cambia. También devuelve el enfoque cuando una superficie temporal se cierra.
trigger -> place focus -> finish or close -> restore to a sensible target#edit-profile#display-nameEntertrigger -> place focus -> finish or close -> restore to a sensible targetA11YOtro ejemplo
Una persona abre Editar perfil. El enfoque entra en el cuadro de diálogo. Después de que Guardar lo cierre, el enfoque vuelve a Editar perfil.
Partes principales
- 01Control de activación
- 02Cambio de pantalla o del DOM
- 03Objetivo de enfoque inicial
- 04Traza de elemento activo
- 05Evento de cierre o finalización
- 06Objetivo de retorno o de respaldo
Úsalo cuando
Úsalo después de abrir o cerrar un diálogo, eliminar un elemento o cambiar una ruta. Elige primero el siguiente objetivo útil.
No lo uses cuando
No cambies el foco por cada pequeña actualización. Saltos inesperados pueden hacer que los usuarios de teclado o lector de pantalla pierdan su lugar.
Nombre usado en código
trigger -> place focus -> finish or close -> restore to a sensible target Antes de lanzarlo
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome: Complete the task with Gestión del enfoque (Focus Management). User context: Una persona abre Editar perfil. El enfoque entra en el cuadro de diálogo. Después de que Guardar lo cierre, el enfoque vuelve a Editar perfil. Recommended pattern: Gestión del enfoque (Focus Management). Why it fits: Úsalo después de abrir o cerrar un diálogo, eliminar un elemento o cambiar una ruta. Elige primero el siguiente objetivo útil. Do not use it when: No cambies el foco por cada pequeña actualización. Saltos inesperados pueden hacer que los usuarios de teclado o lector de pantalla pierdan su lugar. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Es oficial para esa fuente. Otras plataformas o equipos pueden usar el término de otra manera. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Gestión del enfoque (Focus Management) is used now. Definition: La gestión del enfoque mueve el punto activo del teclado después de que la página cambia. También devuelve el enfoque cuando una superficie temporal se cierra. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.