Grid

Rol ve anlam

Grid ve Grid.Item varsayılan olarak düz <div> öğeleridir ve rolleri yoktur; tablo ya da ızgara (grid) rolü taşımazlar. Kart listesi için render={<ul />} ve render={<li />} verin. Veri tablosu için gerçek bir tablo kullanın.

Klavye

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

Odak

Yok. Grid 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

Grid ekran okuyucuya bir şey söylemez; hücrelerin metni DOM sırasıyla okunur. Sütun ve satır düzeni okunmaz. <ul> ve <li> olarak çizildiğinde okuyucu liste ve öğe sayısını söyler.

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

Kontrast

Grid renk taşımaz; kontrast hücrelerin içindeki bileşenlere ve içinde durdukları yüzeye bağlıdır.

WCAG 2.2

Ölçüt	Grid nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Liste anlamı yalnızca render ile verilen öğeden gelir; Grid tablo anlamı üretmez.	Veri için tablo, kart listesi için <ul> ve <li> kullanın.
1.3.2 Anlamlı sıra	Grid çocukları DOM sırasıyla satır satır yerleştirir ve sırayı değiştirmez.	Hücreleri okunacak sırayla yazın.
1.4.10 Yeniden akış	1024 px altında columns için base değeri geçerlidir; base 1 ise 320 CSS pikselde tek sütun olur, yatay kaydırma gerekmez.	base değerini 1 ya da 2 tutun; sütun eklemeyi md ve lg ile yapın.
2.4.3 Odak sırası	Grid odak almaz ve odak sırasını değiştirmez; sıra DOM sırasıdır.	Grid ya da Grid.Item’a tabIndex eklemeyin.