fix: 펼침 패널과 실시간 갱신의 접근성 속성 정리

[lee-eojin]

트랙 D2. 데이터와 마감. B4와 함께 하면 좋다.

지금 무엇이 문제인가

축의 길찾기 토글에 aria-expanded는 붙어 있지만 나머지가 빠져 있다.

빠진 것	결과
aria-controls	이 버튼이 무엇을 여는지 보조기술이 모른다
패널 id	aria-controls가 가리킬 대상이 없다
닫힌 패널의 inert	지금은 패널을 DOM에서 아예 빼는 방식이라 이 문제는 없으나, B4로 행 갱신 방식이 바뀌면 필요해진다
장식 요소의 aria-hidden	stop-dot 같은 표시가 낭독된다
라이브 영역 정책	30초마다 축이 바뀌는데 무엇을 읽어 줄지 규칙이 없다

마지막 것이 가장 크다. 결론 카드는 이 문제를 이미 풀어 뒀다. 헤드라인만 라이브 영역으로
두어 판정이 바뀔 때만 낭독되게 했다. 축에는 그런 정책이 없다.

무엇을 하나

팀 프론트엔드의 StopRow.tsx가 참고가 된다.

<button aria-expanded={expanded} aria-controls={panelId} ...>
<div className={...} inert={!expanded} ...>

useId()로 만든 하나의 id가 버튼과 패널을 잇는다. 장식 SVG에는 aria-hidden="true"가,
방향 탭 묶음에는 role="group"과 aria-label이 붙어 있다.

프로토타입에서 확인할 목록.

1. 길찾기 토글에 aria-controls, 패널에 대응 id
2. stop-dot과 그 밖의 장식 요소에 aria-hidden
3. 방향 탭과 노선 탭에 role과 선택 상태(aria-pressed)
4. 축 갱신 시 낭독 범위. 축 전체를 라이브 영역으로 두지 않는다
5. 키보드만으로 노선 선택부터 길찾기까지 도달 가능한지 손으로 확인

끝났다고 보는 기준

• 위 다섯 항목 확인 결과를 이슈에 기록
• 키보드만으로 전체 흐름이 돈다
• 축이 갱신될 때 화면 전체가 다시 낭독되지 않는다