FilterBar

Rol ve anlam

• Kök role="search" taşır ve label ile adlandırılır; varsayılan ad “Filtreler”. Ekran okuyucu onu arama bölgesi olarak duyurur ve bölge listesinde gösterir.
• Her denetimin etiketi vardır: arama kutusunun etiketi görsel olarak gizlidir ama okunur; Select, Toggle ve çok seçimli düğme görünür etiket taşır. Çok seçimli panelde <fieldset> ve <legend> alan adını verir.
• Toggle aria-pressed taşır. Çok seçimli düğme paneli açar ve açıkken aria-expanded bildirir.
• Çipler adlandırılmış bir listedir (“Uygulanan filtreler”). Her kaldır düğmesinin adı filtreyi söyler: “Durum filtresini kaldır”; çoklu seçimde “Kategori, Kategori A filtresini kaldır”.
• Sonuç sayısı bir role="status" bölgesinde duyurulur (aria-live="polite"). Görünen metin ekran okuyucudan gizlidir; yalnızca duyuru bölgesi okunur.
• Yükleniyor iken kök aria-busy olur; Uygula düğmesi yükleniyor durumunu duyurur.
• “Diğer filtreler” düğmesi aria-expanded ve aria-controls taşır; rozetteki sayı düğme adına eklenir: “Diğer filtreler 2”.

Klavye

Tuş	Davranış
Tab	Denetimler arasında DOM sırasıyla ilerler: arama, “Diğer filtreler” (dar ekranda), alanlar, Uygula, Sıfırla, Temizle, çipler.
Enter	Arama kutusunda batch kipinde taslağı uygular. Düğmeleri etkinleştirir.
Boşluk	Toggle’ı, düğmeleri ve onay kutularını etkinleştirir.
Oklar	Select açıkken seçenekler arasında gezer.
Escape	Select ya da çok seçimli paneli kapatır, odak tetikleyicide kalır.
Backspace, Delete	Odaktaki çipi kaldırır.

Odak

Her denetim kendi 2 px odak halkasını kullanır. “Filtreleri temizle” ile ya da son çip kaldırılınca düğme ya da çip yok olur; odak bu durumda ilk denetime (genellikle arama kutusu) taşınır, böylece odak kaybolmaz. Bir çip kaldırılınca odak sıradaki çipin kaldır düğmesine gider.

Ekran okuyucu

Örnek	Okunan
Kök	“Filtreler, arama”
Arama kutusu	“Ara, arama kutusu”
Çip düğmesi	“Durum filtresini kaldır, düğme”
Sonuç sayısı değişince	“12 sonuç” (yazma durduktan 500 ms sonra, bir kez)
Temizle	“Filtreleri temizle, düğme”

Kontrast

Metin her markada ve modda en az 4.5:1’dir; değerler bigbang çıktısından hesaplandı. Denetimlerin kendi kontrastları kendi sayfalarında verilir.

Çift	Açık mod	Koyu mod
color-text-default / color-surface-default	16.16:1	17.18:1
color-text-subtle / color-surface-default (sonuç sayısı)	8.77:1	10.27:1

WCAG 2.2

Ölçüt	FilterBar nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	search bölgesi, görünür ya da gizli etiketler, fieldset/legend.	Birden çok FilterBar varsa her birine ayrı label verin.
2.1.1 Klavye	Tüm işlevler klavyeyle çalışır.	-
2.4.3 Odak sırası	Odak sırası görsel sırayla aynı; temizlemeden sonra odak ilk denetimde.	Özel yerleşimde FilterBar.* sırasını görsel sırayla eşleştirin.
2.4.7 Odak görünür	Her denetimin halkası var.	className ile outline kaldırmayın.
3.3.2 Etiketler	Her denetim etiketli.	Etiketleri kısa ve ayırt edici yazın.
4.1.3 Durum iletileri	Sonuç sayısı role="status" ile, 500 ms gecikmeyle duyurulur.	resultCount değerini filtre uygulanır uygulanmaz güncelleyin.
2.5.8 Hedef boyutu	Çip kaldır düğmeleri 24 px; düğmeler 36 px, dokunmatik ekranda 40 px.	-