Focus Management
포커스 관리
포커스 관리는 페이지 변경 후 키보드의 활성 지점을 이동시킵니다. 또한 임시 표면이 닫힐 때 포커스를 반환합니다.
trigger -> place focus -> finish or close -> restore to a sensible target#edit-profile#display-nameEntertrigger -> place focus -> finish or close -> restore to a sensible targetA11Y다른 예시
사용자가 '프로필 편집'을 열면 포커스가 대화 상자로 이동합니다. '저장' 후 대화 상자가 닫히면 포커스가 다시 '프로필 편집'으로 돌아갑니다.
주요 부분
- 01트리거 제어
- 02화면 또는 DOM 변경
- 03초기 집중 대상
- 04활성 요소 추적
- 05닫기 또는 완료 이벤트
- 06반환 또는 대체 대상
사용할 때
대화창을 열거나 닫거나, 항목을 삭제하거나, 경로를 변경한 후 사용하세요. 다음 유용한 대상을 먼저 선택하세요.
다음 경우에는 사용하지 마세요
작은 업데이트마다 포커스를 이동하지 마십시오. 예상치 못한 점프는 키보드 및 화면 읽기 사용자에게 위치를 잃게 만들 수 있습니다.
코드에서 사용된 이름
trigger -> place focus -> finish or close -> restore to a sensible target 출시하기 전에
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 포커스 관리 (Focus Management)。 User context：사용자가 '프로필 편집'을 열면 포커스가 대화 상자로 이동합니다. '저장' 후 대화 상자가 닫히면 포커스가 다시 '프로필 편집'으로 돌아갑니다. Recommended pattern：포커스 관리 (Focus Management)。 Why it fits：대화창을 열거나 닫거나, 항목을 삭제하거나, 경로를 변경한 후 사용하세요. 다음 유용한 대상을 먼저 선택하세요. Do not use it when：작은 업데이트마다 포커스를 이동하지 마십시오. 예상치 못한 점프는 키보드 및 화면 읽기 사용자에게 위치를 잃게 만들 수 있습니다. 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)：해당 출처에 대해 공식적인 것입니다. 다른 플랫폼이나 팀은 그 용어를 다른 방식으로 사용할 수 있습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 포커스 관리 (Focus Management) is used now. Definition: 포커스 관리는 페이지 변경 후 키보드의 활성 지점을 이동시킵니다. 또한 임시 표면이 닫힐 때 포커스를 반환합니다. 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.