Inline

Rol ve anlam

Inline varsayılan olarak düz bir <div> öğesidir ve rolü yoktur. Çocuklar bir listeyse render={<ul />}, bir gezinti grubuysa render={<nav aria-label="..." />} verin; Inline bu anlamı kendiliğinden eklemez.

Klavye

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

Odak

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

Inline’ın kendisi ekran okuyucuya bir şey söylemez; çocukların metni DOM sırasıyla okunur. Sarma okuma sırasını değiştirmez. <ul> olarak çizildiğinde okuyucu liste ve öğe sayısını söyler.

Örnek	Okunan
<Inline><Button>Birincil buton</Button><Button>İkincil buton</Button></Inline>	“Birincil buton, düğme”, “İkincil buton, düğme”
<Inline render={<ul />}><li>Birinci öğe</li><li>İkinci öğe</li></Inline>	“Liste, 2 öğe”, “Birinci öğe”, “İkinci öğe” (okuyucuya göre değişir)

Kontrast

Inline renk taşımaz; kontrast çocukların kendi bileşenlerine ve içinde durdukları yüzeye bağlıdır.

WCAG 2.2

Ölçüt	Inline nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Liste ve gezinti anlamı yalnızca render ile verilen öğeden gelir.	Liste olan her Inline’a <ul>, gezinti grubuna <nav> ve bir ad verin.
1.3.2 Anlamlı sıra	Inline çocukları DOM sırasıyla dizer; sarma ve justify okuma sırasını değiştirmez.	Öğeleri okunacak sırayla yazın.
1.4.10 Yeniden akış	Sarma açıkken (varsayılan) çocuklar alt satıra iner; 320 CSS piksel genişlikte yatay kaydırma gerekmez.	Çocuklara sabit genişlik vermeyin; wrap={false} kullanırsanız dar ekranı deneyin.
2.4.3 Odak sırası	Inline odak almaz ve odak sırasını değiştirmez; sıra çocukların DOM sırasıdır.	Inline’a tabIndex eklemeyin.