fix(a11y): complete KRDS tab keyboard interaction

[seonghobae]

What

• makes exactly one selected tab part of the page tab sequence via roving tabindex
• supports ArrowLeft, ArrowRight, Home, and End with wraparound and automatic activation
• synchronizes focus, aria-selected, tab stops, and panel visibility
• makes plain-text tab panels keyboard reachable
• adds test-first structural and interaction regression contracts
• records the standards decision, limitations, and APA 7th references in docs/doctoring/tab-keyboard-interaction.md
• updates the unreleased changelog

Why

The previous gallery required keyboard users to tab through every tab and did not implement the WAI-ARIA horizontal tabs keyboard model. This current-base replacement also covers Home/End behavior and panel focusability that the stale predecessor omitted.

Verification required at the exact current head

• python3 -m pytest tests/
• all required security, static-analysis, and repository-policy checks
• no unresolved review threads
• independent non-author approval on the exact current head
• representative browser and assistive-technology validation before claiming conformance

References

• World Wide Web Consortium. (2023, June 6). Accessible Rich Internet Applications (WAI-ARIA) 1.2.
• World Wide Web Consortium. (n.d.). Tabs pattern. WAI-ARIA Authoring Practices Guide.
• World Wide Web Consortium. (n.d.). Developing a keyboard interface. WAI-ARIA Authoring Practices Guide.

Supersedes stale, conflicting PR #86 with the same valid product intent on the current main base.

Summary by CodeRabbit

• 접근성 개선

  • KRDS 탭에 키보드 포커스 순서를 개선했습니다.
  • 좌우 방향키와 Home·End 키로 탭을 탐색하고 자동으로 활성화할 수 있습니다.
  • 선택한 탭과 콘텐츠 패널 상태가 올바르게 동기화됩니다.
  • 탭 패널을 키보드로 직접 접근할 수 있습니다.

• 문서

  • 탭 키보드 상호작용 및 접근성 동작 기준을 문서화했습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

KRDS 탭 예제에 roving tabindex, 방향키·Home·End 탐색, 탭과 패널 상태 동기화, 키보드 접근 가능한 패널을 추가했습니다. 관련 문서와 회귀 테스트도 확장했습니다.

Changes

KRDS 탭 접근성

Layer / File(s)	Summary
탭 마크업 접근성 계약 components/index.html	탭 목록에 접근성 이름을 추가했습니다. 활성 탭은 tabindex="0", 비활성 탭은 tabindex="-1"을 사용합니다. 탭 패널은 tabindex="0"을 사용합니다.
탭 상태 및 키보드 동작 components/krds-gallery.js	탭 활성화 시 aria-selected, tabindex, 연결 패널의 hidden 상태를 함께 갱신합니다. ArrowLeft, ArrowRight, Home, End 키로 탭을 자동 활성화하고 포커스를 이동합니다. 태그 제거 동작은 유지합니다.
접근성 계약 문서 및 회귀 검증 docs/doctoring/tab-keyboard-interaction.md, tests/test_component_gallery_security.py, CHANGELOG.md	키보드 상호작용 계약과 검증 범위를 문서화했습니다. ARIA 구조, 입력 제한, 스크립트 동작, 탭 상태 동기화를 검사하는 테스트를 추가했습니다. 변경 내역을 기록했습니다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Keyboard
  participant KRDS_Tab
  participant activateTab
  participant TabPanel
  Keyboard->>KRDS_Tab: Arrow/Home/End 입력
  KRDS_Tab->>activateTab: 다음 탭 선택
  activateTab->>KRDS_Tab: aria-selected와 tabindex 갱신
  activateTab->>TabPanel: hidden 상태 갱신
  activateTab->>KRDS_Tab: 선택 탭에 포커스 이동

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 KRDS 탭의 키보드 상호작용 접근성 개선이라는 변경의 핵심을 명확하고 간결하게 설명합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cwl/tab-keyboard-accessibility

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

tests/test_component_gallery_security.py (1)

148-161: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy lift

브라우저 수준 상호작용 테스트를 추가하십시오.

현재 테스트는 문자열 존재만 확인합니다. 키 매핑, 순환 인덱스, aria-selected, tabindex, hidden, 포커스 전환이 잘못되어도 필요한 문자열이 남아 있으면 테스트가 통과합니다. 실제 DOM에서 ArrowLeft, ArrowRight, Home, End의 순환 이동과 상태 전환을 검증하십시오.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/test_component_gallery_security.py` around lines 148 - 161, Replace the
string-presence assertions in
test_tab_script_supports_complete_horizontal_keyboard_navigation with a
browser-level DOM interaction test that executes the gallery tab script.
Dispatch ArrowLeft, ArrowRight, Home, and End keyboard events and assert their
index/wrapping behavior, selected tab and tabindex updates, panel hidden states,
focus movement, and default-prevention behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@tests/test_component_gallery_security.py`:
- Around line 148-161: Replace the string-presence assertions in
test_tab_script_supports_complete_horizontal_keyboard_navigation with a
browser-level DOM interaction test that executes the gallery tab script.
Dispatch ArrowLeft, ArrowRight, Home, and End keyboard events and assert their
index/wrapping behavior, selected tab and tabindex updates, panel hidden states,
focus movement, and default-prevention behavior.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a978e106-1537-4afb-a56f-cae5842c8eb9

📥 Commits

Reviewing files that changed from the base of the PR and between 312e452 and 5dbf1a6.

📒 Files selected for processing (5)

• CHANGELOG.md
• components/index.html
• components/krds-gallery.js
• docs/doctoring/tab-keyboard-interaction.md
• tests/test_component_gallery_security.py