Bileşenler
Popover
Bir butona bağlı açılan, etkileşimli içerik taşıyan kalıcı olmayan panel.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Popover, Base UI Popover ile role="dialog" taşıyan, kalıcı olmayan bir panel çizer. Başlık aria-labelledby, açıklama aria-describedby ile bağlanır. Tetikleyici aria-haspopup="dialog", aria-expanded ve aria-controls taşır.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Enter / Space | Tetikleyicide paneli açar ya da kapatır. |
| Tab | Panel içinde ilerler; panelden çıkınca panel kapanır. |
| Escape | Paneli kapatır; odak tetikleyiciye döner. |
- Açılınca odak paneldeki ilk odaklanabilir öğeye gider.
- Kapanınca odak tetikleyiciye döner.
modaliken odak panelde tutulur.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Tetikleyici | “Görünümü düzenle, düğme, daraltılmış” |
| Açılış | “Görünüm, iletişim kutusu, Gösterilecek sütunları seçin.” |
Kontrast
Bölüm başlığı “Kontrast”Metin color-surface-raised zeminde en az 4.5:1 kontrast taşır. Panel sayfadan kenarlık ve gölgeyle ayrışır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | Popover nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.4.10 Yeniden akış | Panel görünüm genişliğini aşmaz, yer yoksa yan değiştirir. | Geniş tablo koymayın. |
| 1.4.13 Fareyle üzerine gelme veya odakta içerik | Yalnızca basınca açılır; Escape kapatır. | Yok. |
| 2.4.3 Odak sırası | Odak panele girer ve tetikleyiciye döner. | Yok. |
| 4.1.2 Ad, rol, değer | aria-expanded, başlıktan ad. |
Başlığı kısa ve anlamlı tutun. |