Bileşenler

Drawer

Sayfanın kenarından ya da altından kayarak açılan, sayfayı bırakmadan ayrıntı, filtre ya da alt form gösteren panel.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

Drawer, Base UI Drawer ile role="dialog" taşıyan bir panel çizer; başlık ad, açıklama tanım olarak bağlanır. Kalıcı panelde aria-modal="true" vardır ve sayfa inert olur. Tutamaç süstür (aria-hidden).

Klavye

Tuş	Davranış
Enter / Space	Tetikleyicide paneli açar.
Tab / Shift+Tab	Kalıcı panelde odak içeride döner.
Escape	Paneli kapatır.

Kaydırma hareketi tek yol değildir; her panelde kapat butonu ve Escape vardır (WCAG 2.5.7).

Odak

Açılınca odak gövdedeki ilk öğeye, yoksa eylemlere gider.
Kapanınca odak tetikleyiciye döner.
modal={false} iken odak tutulmaz; Tab sayfaya geçebilir.

Ekran okuyucu

Örnek	Okunan
Açılış	“Panel başlığı, iletişim kutusu”, ardından açıklama
Kapat butonu	“Kapat, düğme”

Kontrast

Metin color-surface-raised zeminde en az 4.5:1 kontrast taşır. Tutamaç (handle) süstür ve açık renklidir; 3:1 kontrast gerekmez, çünkü alt sayfa her yerinden kaydırılır ve her zaman bir kapat butonu vardır.

WCAG 2.2

Ölçüt	Drawer nasıl karşılar	Ürün ekibi ne yapmalı
2.5.7 Sürükleme hareketleri	Kaydırmaya ek olarak kapat butonu ve Escape.	Kapat butonunu gizlemeyin.
2.1.2 Klavye tuzağı yok	Escape ve kapat butonu çıkarır.	Yok.
2.4.3 Odak sırası	Odak içeride kalır, kapanınca geri döner.	Tetikleyiciyi açıkken kaldırmayın.
1.3.4 Yönlendirme	Dar ekranda alt sayfaya geçer.	Yok.
4.1.2 Ad, rol, değer	`role="dialog"`, ad ve açıklama.	Başlığı boş bırakmayın.