Bileşenler
MaskedValue
Hassas bir değeri maskeli gösteren, bir düğmeyle açan ve isteğe bağlı olarak kopyalatan gösterim.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”label verildiğinde kök öğe adlandırılmış bir gruptur (role="group"). Maskeli metin aria-hidden taşır; yerine yalnızca görünür son karakterleri söyleyen gizli bir metin okunur. Göster düğmesi aria-pressed taşıyan bir açma-kapama düğmesidir.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Göster düğmesine, sonra Copy düğmesine. |
| Enter, Space | Değeri açar ya da gizler. |
Odak düğmede kalır; değer değişince odak taşınmaz.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Maskeli | “Erişim anahtarı, grup. Sonu 7731 olan gizli değer. Değeri göster, açma-kapama düğmesi, basılı değil” |
| Açık | “BB7Q2K9X4M7731. Değeri göster, açma-kapama düğmesi, basılı” |
Kontrast
Bölüm başlığı “Kontrast”Değer 4,5:1, düğme simgesi 3:1.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | MaskedValue nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.1.1 Metin olmayan içerik | Nokta dizisi yerine anlamlı bir metin okunur. | — |
| 4.1.2 Ad, rol, değer | Düğme aria-pressed ile durumunu söyler. |
Değeri label ile adlandırın. |
| 2.2.1 Ayarlanabilir zaman | hideAfter yalnızca görünümü değiştirir; değer bir dokunuşla yeniden açılır. |
Süreyi kısa tutmayın. |