Collapsible

Rol ve anlam

Collapsible, APG açıklama (disclosure) kalıbını Base UI Collapsible ile uygular. Tetikleyici aria-expanded taşıyan yerel bir <button> öğesidir; panel açıkken aria-controls ile panele bağlanır. Ok aria-hidden olduğu için ekran okuyucuya okunmaz.

Klavye

Tuş	Davranış
Tab	Tetikleyiciye odaklanır; açık panelin içindeki öğelere sonraki Tab ile geçilir.
Enter, Space	Paneli açar ya da kapatır.

Odak

Tetikleyicide 2 px color-focus-ring halkası, 2 px boşlukla dışa çizilir. Halka yalnızca klavye odağında görünür (focus-visible). Devre dışı tetikleyiciye odaklanılmaz.

Ekran okuyucu

Örnek	Okunan
Kapalı panel	“Ayrıntıları göster, düğme, daraltılmış”
Açık panel	“Ayrıntıları göster, düğme, genişletilmiş”
Devre dışı	“Ayrıntıları göster, düğme, soluk”

Kapalı panel hidden="until-found" taşır; sayfada bul eşleşmesi paneli açar ve içeriği okunabilir kılar.

Kontrast

Etiket color-fg-default ile zemininde en az 4,5:1 kontrast taşır. Ok color-icon-subtle ile en az 3:1 kontrasttadır ve yalnızca süstür; durum aria-expanded ile de bildirilir. Devre dışı etiket kontrast eşiğinden muaftır (WCAG 1.4.3).

WCAG 2.2

Ölçüt	Collapsible nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	aria-expanded ve aria-controls ile durum ve ilişki bildirilir.	Etiketi, açılan içeriği anlatacak şekilde yazın.
1.4.1 Renk kullanımı	Açık durum okun dönmesiyle ve aria-expanded ile de bildirilir.	Oku yalnızca renkle ayırt etmeyin.
2.1.1 Klavye	Enter ve Space paneli açar ve kapatır.	Tetikleyiciye kendi tuş işleyicinizi eklemeyin.
2.4.7 Görünür odak	Tetikleyicide focus-visible halkası.	Halkayı kaldırmayın.
2.5.8 Hedef boyutu (asgari)	Tetikleyici metin satırı kadar yüksektir; satır aralığı hedefi korur.	Çok kısa etiketlerden ve yanında sıkışık öğelerden kaçının.
4.1.2 Ad, rol, değer	Ad etiketten, durum aria-expanded’dan gelir.	Boş etiket vermeyin.