Box

Rol ve anlam

Box varsayılan olarak düz bir <div> öğesidir ve rolü yoktur. Bölge ya da liste anlamı gerekirse render ile uygun öğeyi verin: <section>, <aside>, <ul>. Box bu anlamı kendiliğinden eklemez.

Klavye

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

Odak

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

Box’ın kendisi ekran okuyucuya bir şey söylemez; çocukların metni okunur. Yüzey rengi ve kenarlık okunmaz. Bölge olarak kullanılırsa ad aria-label ya da aria-labelledby ile verilir.

Örnek	Okunan
<Box>Kart başlığı</Box>	“Kart başlığı”
<Box render={<section aria-label="Bölüm" />}>...</Box>	“Bölüm, bölge” (okuyucuya göre değişir)

Kontrast

Box yalnızca arka plan ve kenarlık rengi verir; metin rengini belirlemez. Çocuk metinlerin kontrastı kendi bileşenlerine ve içinde durdukları yüzeye bağlıdır. raised, sunken ve layer-* üzerinde kendi metin rengini veren bileşenleri kullanın.

WCAG 2.2

Ölçüt	Box nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Bölge ve liste anlamı yalnızca render ile verilen öğeden gelir; Box görsel gruplamayı anlam yerine koymaz.	Kart, bölge ya da liste olan her Box’a doğru öğeyi (<section>, <ul>) ve gerekirse bir ad verin.
1.3.2 Anlamlı sıra	Box çocukların sırasını değiştirmez; okuma sırası DOM sırasıdır.	İçeriği, okunması gereken sırayla yazın.
1.4.10 Yeniden akış	Box genişlik sabitlemez; çocuklar kapsayıcıya göre akar.	Box içine sabit genişlikli öğe koymayın.
2.4.3 Odak sırası	Box odak almaz ve odak sırasını değiştirmez.	Box’a tabIndex eklemeyin.