Bileşenler
Tooltip
Bir öğenin yanında üzerine gelince ve klavye odağında görünen kısa açıklama.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Tooltip, Base UI Tooltip ile tetikleyicinin yanında bir açılır kutu çizer. Açıkken kutu tetikleyiciye aria-describedby ile bağlanır; ekran okuyucu adı okuduktan sonra ipucunu okur. Kutunun kendisi odak almaz.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Tetikleyiciye odaklanınca ipucu hemen açılır. |
| Escape | İpucunu kapatır; odak tetikleyicide kalır. |
Odak hep tetikleyicide kalır. İpucunda odaklanabilir içerik yoktur.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Button | “Kaydet, düğme”, ardından “Değişiklikleri kaydeder ve pencereyi kapatır.” |
| IconButton | “Kopyala, düğme”; ad iki kez okunmaz |
Kontrast
Bölüm başlığı “Kontrast”color-text-inverse metni color-surface-inverse zeminde en az 4.5:1 kontrast taşır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | Tooltip nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.4.13 Fareyle üzerine gelme veya odakta içerik | Escape ile kapanır, imleç ipucuna geçebilir, odak ya da imleç kalana kadar açık kalır. | İpucunu zamanlayıcıyla kapatmayın. |
| 2.1.1 Klavye | Klavye odağında açılır. | Yalnızca odaklanabilir öğelere ipucu verin. |
| 2.5.3 Addaki etiket | IconButton’da ipucu ile ad aynıdır. | İpucu metnini adla aynı tutun. |
| 4.1.2 Ad, rol, değer | Açıkken aria-describedby. |
Gerekli bilgiyi yalnızca ipucuna koymayın. |