탭
서로 다른 내용을 같은 자리에서 전환할 때. 같은 내용의 다른 표현(표↔카드)이면 콘텐츠 스위처입니다.
코드
<div class="jt-tabs" role="tablist">
<button class="jt-tab" role="tab" aria-selected="true">충진</button>
<button class="jt-tab" role="tab" aria-selected="false">포장</button>
</div>하지 말 것
- 선택 상태를 class로만 표시하지 마세요.
aria-selected가 없으면 스크린리더가 어느 탭이 열려 있는지 못 읽습니다. - 탭 안에 탭을 넣지 마세요. 두 단계가 필요하면 페이지를 나누세요.
접근성
role="tablist"+role="tab"+aria-selected세트로 씁니다- 탭이 많으면 자동으로 가로 스크롤됩니다 — 감추거나 줄이지 마세요
앱에서 모양 바꾸기
jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).
노브: 밑줄 색은 --color-accent
.my-page .jt-tabs { 밑줄: …; }