Bileşenler
Copy
Bir değeri panoya kopyalayan, onay işaretiyle gösterip duyuran düğme.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Copy bir button’dır. icon ve inline varyantlarında adı aria-label ile verilir ve ipucunda tekrarlanır; ipucu düğmeyi ayrıca tanımlamaz. Sonuç kibar bir durum bölgesinde (role="status") bir kez okunur.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Enter, Space | Değeri kopyalar. |
| Tab | Düğmeye gelir; ipucu odakla açılır. |
Odak düğmede kalır; geri dönüş yolunda bile gizli metin alanından düğmeye geri verilir.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Düğme | “Başvuru kodunu kopyala, düğme” |
| Kopyaladıktan sonra | “Başvuru kodu kopyalandı” |
| Hata | “Kopyalanamadı” |
Kontrast
Bölüm başlığı “Kontrast”Simge ve metin Button renklerini kullanır: 4,5:1 metin, 3:1 simge ve sınır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | Copy nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 4.1.2 Ad, rol, değer | Düğmenin adı her zaman vardır. | Ne kopyalandığını adda söyleyin. |
| 4.1.3 Durum mesajları | Sonuç bir durum bölgesinde okunur. | — |
| 2.5.8 Hedef boyutu | En küçük düğme 32 px. | — |