ScrollArea

Rol ve anlam

ScrollArea, Base UI ScrollArea ile tarayıcının kendi kaydırmasını korur. Görünüm alanı her zaman sekme sırasındadır (tabindex="0"), böylece etkileşimli öğe içermeyen içerik de klavyeyle kaydırılabilir. label verilince görünüm alanı role="region" ve aria-label taşır. Kaydırma çubukları süstür; ekran okuyucu ve klavye için kaydırma tarayıcıdan gelir.

Klavye

Tuş	Davranış
Tab	Görünüm alanına odaklanır, sonra içindeki öğelere geçer.
Yukarı ve aşağı ok	Dikey kaydırır.
Sol ve sağ ok	Yatay kaydırır.
Page Up, Page Down, Space	Bir sayfa boyu kaydırır.
Home, End	Başa ya da sona gider.

Odak

Görünüm alanı odaklanınca 2 px color-focus-ring halkası içe çizilir; dışa taşan halka kapsayıcıda kırpılabileceği için. İçerideki bir öğe odak alınca tarayıcı onu görünür alana kaydırır.

Ekran okuyucu

Örnek	Okunan
label="Öğe listesi" ile alana odak	“Öğe listesi, bölge”
label olmadan alana odak	İçeriğin ilk metni
Alan içindeki liste	“Liste, 20 öğe”

Kontrast

Tutamaç (color-line-strong) zeminde 3:1’e yakın görünür ama tek bilgi kaynağı değildir: kaydırma tarayıcıdan ve klavyeden de yapılır, kenar soldurması gizli içeriği gösterir. Odak halkası color-focus-ring en az 3:1 kontrast taşır.

WCAG 2.2

Ölçüt	ScrollArea nasıl karşılar	Ürün ekibi ne yapmalı
2.1.1 Klavye	Görünüm alanı odak alır; ok tuşları kaydırır.	tabIndex değerini değiştirmeyin.
2.4.7 Görünür odak	İç odak halkası.	Halkayı kaldırmayın.
1.4.10 Yeniden akış	İki yönlü kaydırma yalnızca both ile ve istenen içerikte.	Metni iki yönde kaydırmayın; tablolar gibi gerekli yerlerde kullanın.
4.1.2 Ad, rol, değer	label ile adlandırılmış bölge.	Sayfada birden çok alan varsa her birine ad verin.