Bileşenler
Provider
İçindeki her şey için dil, yazı yönü ve hareket tercihini belirler; yerleşimi değiştirmez.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Provider’ın rolü yoktur. Kapsayıcı <div>, lang ile içeriğin dilini ve dir ile yönünü bildirir; ekran okuyucu bu değerlerden doğru telaffuzu ve okuma yönünü seçer.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Provider odak almaz. İçindeki bileşenlerin tuşları kendi sayfalarında. |
| Ok tuşları | direction="rtl" iken Base UI parçalarında sol ve sağ ok yönleri yazı yönüne uyar. |
Yok. Provider odak sırasında değildir ve odak halkası göstermez.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Ayar | Okunan |
|---|---|
locale="en-GB" |
Kütüphane metinleri İngilizce: “Loading”. İçerik lang="en-GB" ile işaretlenir. |
locale="tr-TR" |
Kütüphane metinleri Türkçe: “Yükleniyor”. İçerik lang="tr-TR" ile işaretlenir. |
direction="rtl" |
İçerik sağdan sola okunur. |
lang yalnızca Provider’ın içeriğini işaretler. Sayfanın ana dilini <html lang> ile uygulama kökü bildirmelidir.
Kontrast
Bölüm başlığı “Kontrast”Provider renk çizmez; kontrast içindeki bileşenlerin token’larına bağlıdır. reducedMotion renkleri değiştirmez.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | Provider nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 3.1.1 Sayfanın dili | Provider kendi alanını lang ile işaretler; sayfa dilini belirlemez. |
<html lang> değerini uygulama kökünde verin. |
| 3.1.2 Bölümün dili | İç içe Provider, kendi alanının lang değerini değiştirir. |
Dili farklı bir bölümü ayrı bir Provider ile sarın. |
| 1.3.2 Anlamlı sıra | dir okuma sırasını belirler; bileşenler mantıksal özelliklerle yansır. |
Sağdan sola dillerde ekranı gerçek metinle kontrol edin. |
| 2.3.3 Hareketle etkileşim | reduce ve işletim sistemi ayarı hareketi azaltır; hiçbiri geri açmaz. |
Kullanıcıya uygulama içinde bir hareket ayarı sunuyorsanız onu reducedMotion ile bağlayın. |