Stack

Rol ve anlam

Stack varsayılan olarak düz bir <div> öğesidir ve rolü yoktur. Çocuklar bir listeyse render={<ul />} ile gerçek liste üretin; Stack bu anlamı kendiliğinden eklemez.

Klavye

Tuş	Davranış
Tab	Stack odak almaz; Tab, çocuk öğelerin kendi sırasıyla ilerler. Stack bileşeninin kendine ait tuşu yoktur.

Odak

Yok. Stack odak sırasında değildir ve odak halkası çizmez. Odak sırası DOM sırasıdır; görsel sırayı değiştiren bir prop yoktur.

Ekran okuyucu

Stack’in kendisi ekran okuyucuya bir şey söylemez; çocukların metni DOM sırasıyla okunur. Ayırıcı çizgi bir kenarlıktır ve okunmaz. <ul> olarak çizildiğinde okuyucu liste ve öğe sayısını söyler.

Örnek	Okunan
<Stack><Text>Birinci öğe</Text><Text>İkinci öğe</Text></Stack>	“Birinci öğe”, “İkinci öğe”
<Stack render={<ul />}><li>Birinci öğe</li><li>İkinci öğe</li></Stack>	“Liste, 2 öğe”, “Birinci öğe”, “İkinci öğe” (okuyucuya göre değişir)

Kontrast

Stack renk taşımaz. Yalnızca separator çizgisi color-border-subtle ile çizilir ve süs amaçlıdır: öğeler arasındaki ilişki çizgiye değil, DOM sırasına ve metne dayanır. Çocukların kontrastı kendi bileşenlerine aittir.

WCAG 2.2

Ölçüt	Stack nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Liste anlamı yalnızca render={<ul />} ile gelir; çizgi ve boşluk anlam taşımaz.	Liste olan her Stack’e <ul> ya da <ol> verin ve çocukları <li> yazın.
1.3.2 Anlamlı sıra	Stack çocukların sırasını değiştirmez ve ters yön sunmaz; görsel sıra DOM sırasıdır.	Öğeleri okunacak sırayla yazın.
1.4.10 Yeniden akış	Stack tek sütunlu akıştır; dar ekranda yatay kaydırma gerektirmez.	Çocuklara sabit genişlik vermeyin.
2.4.3 Odak sırası	Stack odak almaz ve odak sırasını değiştirmez; sıra çocukların DOM sırasıdır.	Stack’e tabIndex eklemeyin.