Tabs

Rol ve anlam

Tabs, APG sekme kalıbını Base UI Tabs ile uygular. TabList bir tablist, her Tab aria-selected ve aria-controls taşıyan bir <button role="tab">, her TabPanel sekmesine aria-labelledby ile bağlı bir tabpanel öğesidir. TabList için label zorunludur ve aria-label olur. Gösterge süstür ve erişilebilirlik ağacında yer almaz.

Klavye

Tuş	Davranış
Tab	Seçili sekmeye odaklanır; bir sonraki Tab panele geçer.
Sol ve sağ ok (dikeyde yukarı ve aşağı)	Önceki ya da sonraki sekmeye geçer; sonda başa döner. automatic iken sekmeyi seçer.
Home, End	İlk ya da son sekmeye geçer.
Enter, Space	Odaktaki sekmeyi seçer (manual için gerekli).

Sağdan sola dilde ok tuşlarının yönü Provider direction="rtl" ile ters çevrilir.

Odak

Sekmede 2 px color-focus-ring halkası içe çizilir, çünkü liste yatay kaydığında dış halka kırpılabilir. Panel odaklanabilir ve 2 px dış halka gösterir; böylece etkileşimli öğe içermeyen panel klavyeyle okunabilir. Halka yalnızca klavye odağında görünür (focus-visible).

Ekran okuyucu

Örnek	Okunan
Seçili ilk sekme	“Genel bakış, sekme, seçili, 1 / 3”
badge={3} taşıyan sekme	“Etkinlik 3, sekme, 2 / 3”
disabled sekme	“Ayarlar, sekme, soluk, 3 / 3”
Panele geçiş	“Genel bakış, sekme paneli”

Kontrast

Seçili ve seçili olmayan etiketler zeminlerinde en az 4,5:1 kontrast taşır (color-fg-default, color-fg-subtle). Seçim yalnız renkle gösterilmez: line görünümde 2 px gösterge, contained görünümde yükseltilmiş dolgu ve gölge vardır. Devre dışı etiket kontrast eşiğinden muaftır (WCAG 1.4.3).

WCAG 2.2

Ölçüt	Tabs nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	tablist, tab, tabpanel rolleri ve aria-controls, aria-labelledby bağları.	Panelleri sekmelerle aynı value ile eşleyin.
1.4.1 Renk kullanımı	Seçim gösterge ya da dolguyla da gösterilir.	Göstergeyi className ile gizlemeyin.
2.1.1 Klavye	Ok tuşları, Home, End, Enter ve Space.	Sekmelere kendi tuş işleyicinizi eklemeyin.
2.4.7 Görünür odak	Sekme ve panelde focus-visible halkası.	Halkayı kaldırmayın.
2.5.8 Hedef boyutu (asgari)	En küçük sekme 32 px yüksekliktedir.	Etiketleri boş bırakmayın.
4.1.2 Ad, rol, değer	Ad etiket ve sayıdan, durum aria-selected’dan gelir.	Liste için anlamlı bir label verin.