Focus Management
Gerenciamento de foco
O gerenciamento de foco move o ponto ativo do teclado após a mudança de página. Ele também retorna o foco quando uma superfície temporária é fechada.
trigger -> place focus -> finish or close -> restore to a sensible target#edit-profile#display-nameEntertrigger -> place focus -> finish or close -> restore to a sensible targetA11YOutro exemplo
Uma pessoa abre Editar perfil. O foco entra no diálogo. Depois que Salvar o fecha, o foco retorna para Editar perfil.
Partes principais
- 01Controle de acionamento
- 02Mudança de tela ou DOM
- 03Alvo de foco inicial
- 04Rastro de elemento ativo
- 05Evento de fechamento ou conclusão
- 06Retornar ou alvo de fallback
Use-o quando
Use-o depois de abrir ou fechar um diálogo, excluir um item ou mudar uma rota. Escolha primeiro o próximo alvo útil.
Não o use quando
Não mova o foco para cada pequena atualização. Saltos inesperados podem fazer com que usuários de teclado e leitores de tela percam sua posição.
Nome usado no código
trigger -> place focus -> finish or close -> restore to a sensible target Antes de lançar
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 Gerenciamento de foco (Focus Management). User context: Uma pessoa abre Editar perfil. O foco entra no diálogo. Depois que Salvar o fecha, o foco retorna para Editar perfil. Recommended pattern: Gerenciamento de foco (Focus Management). Why it fits: Use-o depois de abrir ou fechar um diálogo, excluir um item ou mudar uma rota. Escolha primeiro o próximo alvo útil. Do not use it when: Não mova o foco para cada pequena atualização. Saltos inesperados podem fazer com que usuários de teclado e leitores de tela percam sua posição. 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): É oficial para essa fonte. Outras plataformas ou equipes podem usar o termo de outra maneira. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Conferir este pedido
Review how Gerenciamento de foco (Focus Management) is used now. Definition: O gerenciamento de foco move o ponto ativo do teclado após a mudança de página. Ele também retorna o foco quando uma superfície temporária é fechada. 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.