Bileşenler
InfoPopover
Bir etiketin ya da değerin yanında, basınca kısa bir açıklama açan küçük bilgi butonu.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”InfoPopover bir toggletip’tir: label ile adlandırılmış bir IconButton ve Base UI Popover ile role="dialog" taşıyan bir panel. Panel başlıkla, başlık yoksa butonun adıyla adlandırılır. Buton aria-expanded taşır.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Enter / Space | Paneli açar ya da kapatır. |
| Escape | Paneli kapatır; odak butona döner. |
Açılınca odak paneldeki bağlantıya, yoksa panelin kendisine gider; böylece ekran okuyucu açıklamayı hemen okur. Kapanınca odak butona döner.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Buton | “Alan etiketi hakkında, düğme, daraltılmış” |
| Açılış | “Alan etiketi, iletişim kutusu”, ardından açıklama |
Kontrast
Bölüm başlığı “Kontrast”İkon color-icon-default en az 3:1, metin en az 4.5:1 kontrast taşır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | InfoPopover nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.4.13 Fareyle üzerine gelme veya odakta içerik | Basınca açılır, Escape ile kapanır. | Yok. |
| 2.5.8 Hedef boyutu | Buton 32 px. | Yok. |
| 2.5.3 Addaki etiket | Butonun görünür metni yok; ad label’dan gelir. |
Etiketi açıklanan şeyle adlandırın. |
| 4.1.2 Ad, rol, değer | Buton adı ve aria-expanded; panel adı. |
Yok. |