- 분야: FE
- 기술 스택: React · HTML · Chromium
문제와 원인
관리자 화면에서 첫 Tab을 누르면 sidebar나 공통 header의 링크에 초점이 이동했다. 반복 탐색을 건너뛰어 본문으로 이동할 skip link가 관리자 shell에 빠져 있었다. drawer의 포커스 처리는 보강됐지만, 일반 관리자 main에는 우회 대상 id가 없고 독립 관리자에는 id만 있다.
현재 코드
AdminApp — 기존 shell
일반 관리자의 기존 구조는 navigation 뒤에 main을 배치한다.
<div className="admin-shell" data-admin-access="administrator">
<aside className={menuOpen ? "admin-sidebar open" : "admin-sidebar"}
aria-label="관리자 메뉴">
{/* 반복되는 관리자 navigation */}
</aside>
<main className="admin-main">
{/* 관리자 본문 */}
</main>
</div>
AdminApp · AdminStandaloneFrame — 현재 main
현재 일반 관리자와 독립 관리자의 main은 다음과 같다.
// AdminApp
<main className="admin-main" inert={menuOpen || undefined}>
{/* 관리자 본문 */}
</main>
// AdminStandaloneFrame
<main className="admin-main" id="main-content">
{/* 독립 관리자 본문 */}
</main>
진단 결과
키보드 탐색
React의 원본 관리자 컴포넌트·CSS에 합성 API·인증·section을 연결한 로컬 fixture를 Chrome에서 실행했다. 데스크톱 조건은 1440×812px, DPR 1이며 각 화면을 새로 연 뒤 첫 Tab을 1회 입력했다. fragment 링크와 main 속성을 함께 조회했다.
| 관리자 화면 | 본문 우회 링크 | 첫 Tab | main target |
|---|---|---|---|
| 감사 당시 AdminApp · classic | 0개 | sidebar의 배움집 brand | id·tabindex 없음 |
| 현재 AdminApp · classic | 0개 | sidebar의 모두의 문제집 brand | id·tabindex 없음 |
| 현재 AdminApp · V7 | 0개 | 공통 header의 모두의 문제집 brand | id·tabindex 없음 |
| 현재 독립 관리자 · classic | 0개 | 운영 대시보드 링크 | id만 존재 |
| 현재 독립 관리자 · V7 | 0개 | 공통 header의 모두의 문제집 brand | id만 존재 |
classic의 첫 Tab 대상은 sidebar의 브랜드 링크였다.
V7에서는 일반 관리자와 독립 관리자 모두 공통 header의 브랜드 링크가 첫 Tab 대상이었다.
375×812px 모바일에서도 각 조건을 1회 확인했다. 감사 당시 classic의 첫 Tab은 숨겨진 sidebar brand로, 현재 classic은 메뉴 열기 버튼으로, 현재 V7은 공통 header brand로 이동했다. 앞선 자동 검사에서는 classic 일반 관리자의 전후 버전과 현재 독립 관리자를 375·768·1024·1440px에서 각 1회 렌더링했으며 본문 우회 링크가 모두 0개였다.
같은 fixture의 공개 shell은 1440×812px에서 첫 Tab으로 “본문으로 건너뛰기” 링크를 선택하고 Enter를 누르면 MAIN#public-content로 초점을 옮겼다. 대상 main의 tabindex는 -1이었다.