[feat] 네이티브 컴포넌트 탐색과 접근성 지도 추가

[okorion]

목적

native HTML UI Kit을 예제 모음에서 키보드 흐름과 브라우저 기본 상호작용을 빠르게 확인할 수 있는 밝은 참조 화면으로 확장합니다. UI UX Pro Max의 문서형 정보 구조·가독성·접근성 권고를 JavaScript 없이 선별 적용합니다.

주요 변경 사항

• 첫 Tab에서 노출되는 skip link를 추가해 컴포넌트 예제로 바로 이동할 수 있습니다.
• commandfor 기반 빠른 참조 dialog에 datalist 제안과 컴포넌트 요약을 추가했습니다.
• popover, details, form, dialog의 핵심 키보드 동작과 확인 상태를 상호작용 매트릭스로 구조화했습니다.
• 매트릭스의 native details 안내로 키보드 검토 순서를 바로 펼쳐 볼 수 있습니다.
• Atkinson Hyperlegible 기반의 읽기 쉬운 라틴 타이포그래피와 기존 한국어 fallback을 적용하고, 모바일에서 참조 항목이 한 줄씩 정렬되도록 했습니다.

UX 판단

• UI UX Pro Max의 문서형 UI 권고 중 명확한 계층, 높은 가독성, 가시적 focus, 짧은 hover 반응을 채택했습니다.
• no-JS 원칙을 지키기 위해 실제 검색·클라이언트 필터링은 추가하지 않았습니다.
• 검증 중 modal 내부 앵커가 dialog를 닫지 않는 것을 발견해, 오해를 부르는 빠른 이동 링크 대신 datalist 기반 참조 항목으로 수정했습니다.

검증

• pnpm check
• source·dist no-JS 검사 통과
• git diff --check
• agent-browser 페이지 로드, 콘텐츠 존재, 오류 오버레이 없음 확인
• Playwright에서 skip link의 첫 Tab 초점과 #menus 이동 확인
• command dialog 열기·닫기, 4개 datalist 항목, 모바일 가로 넘침 없음 확인

자가 개선 루프

디자인 권고 생성 → native 제약 선별 → 탐색·접근성 기능 구현 → 빌드·브라우저 검증 → modal 링크 결함 수정 → 적대적 diff 점검 순서로 한 사이클을 완료했습니다. 실제 codex-redteam 상태 검사는 생성하거나 우회하지 않았으며, 해당 상태가 없는 동안 PR을 병합하지 않습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
native-html-ui-kit	Ready	Preview, Comment	Jul 15, 2026 3:54am

[okorion]

레드팀 검토: 수정 필요

• [P1] 빠른 참조 입력창에서 Enter를 누르면 대화상자가 닫힙니다. 재현: 빠른 참조 열기 → “예제 이름 찾기”에 값을 입력 → Enter. 입력창을 감싼 form method=dialog의 암시적 제출이 대화상자를 닫습니다. 빠른 참조 탐색 흐름이 중단됩니다.

입력 콘텐츠를 dialog 종료용 form 밖으로 분리하고, 닫기 버튼만 method=dialog form으로 유지한 뒤 Enter·Esc·닫기 버튼의 초점 복귀를 다시 확인합니다.

[okorion]

System.Collections.Hashtable.Body