키보드·ARIA를 갖춘 접히는 트리 뷰

제작 과정

한 줄 요약

보이는 노드만 평탄화한 배열로 키보드 포커스를 인덱스 단위로 옮기고(roving tabindex), role=tree/treeitem과 aria-expandedaria-level로 스크린리더에 구조를 전달합니다.

이럴 때 필요해요

파일 탐색기카테고리 트리중첩 설정처럼 계층 데이터를 접고 펴며 탐색해야 할 때.

어떻게 동작하나

확장된 폴더만 따라 트리를 평탄화해 화면에 보이는 순서대로 배열을 만듭니다.
는 닫힘이면 펼치고 열림이면 첫 자식으로, 는 열림이면 접고 닫힘이면 부모로, 는 이동, Enter는 토글/선택.
활성 항목만 tabIndex=0(roving)으로 두고 나머지는 -1.

놓치기 쉬운 것

DOM 중첩으로 키보드를 처리하면 복잡 평탄 배열 + 인덱스 이동이 단순하고 견고.
aria-level은 1부터, 폴더에만 aria-expanded를 주고 파일엔 생략.
포커스 이동 시 실제 DOM focus()까지 호출해야 스크린리더가 따라옵니다.

이런 곳에 써요

관리자 메뉴문서/폴더 탐색
중첩 카테고리 선택기

import type { Metadata } from "next"; import { TreeViewDemo } from "./-components/TreeViewDemo"; export const metadata: Metadata = { title: "트리 뷰 (파일 탐색기) (데모)", description: "폴더를 접고 펴는 중첩 트리 뷰(파일 탐색기). 보이는 노드를 평탄화해 ↑/↓ 이동·→ 펼침·← 접힘/부모·Enter 선택 키보드 + role=tree/treeitem·aria-expanded·aria-level 접근성.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50/40"> <TreeViewDemo /> </main> ); }