Bileşenler
CheckboxGroup
İlişkili onay kutularını bir başlık altında toplayan ve değer listesini paylaştıran grup.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”CheckboxGroup, Base UI Fieldset ile bir <fieldset> ve <legend> çizer; group rolü başlıkla adlandırılır. Yardım metni ve hata aria-describedby ile gruba bağlanır.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Her onay kutusuna sırayla odaklanır. |
| Space | Odaktaki kutuyu değiştirir. |
Her öğe kendi odak halkasını gösterir. Grubun kendisi odak almaz.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Gruba girerken | “Grup etiketi, grup”, yardım metni, ardından ilk öğe |
| Hata varken | Hata metni yardım metninden sonra okunur |
Kontrast
Bölüm başlığı “Kontrast”Başlık ve yardım metni zeminde en az 4.5:1 kontrast taşır. Hata yalnızca renkle değil, metinle bildirilir.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | CheckboxGroup nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | <fieldset> ve <legend>. |
Her gruba başlık verin. |
| 3.3.1 Hata belirleme | Metinli hata ve öğelerde aria-invalid. |
Öğelere invalid verin. |
| 3.3.2 Etiketler veya talimatlar | Başlık ve yardım metni. | Kuralı yardım metninde yazın. |