Bileşenler
CodeBlock
Kodu eşaralıklı yazıyla, isteğe bağlı başlık, satır numaraları ve kopyala düğmesiyle gösterir.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”CodeBlock bir figure çizer; başlık figcaption olur. Kod pre ve code içindedir. Kaydırma bölgesi region rolündedir ve title, yoksa “Kod örneği” ile adlandırılır. Satır numaraları aria-hidden ile gizlenir.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Kopyala düğmesine, sonra kaydırma bölgesine odaklanır. |
| Sol, Sağ, Yukarı, Aşağı | Kaydırma bölgesinde kodu kaydırır. |
| Enter, Space | Kopyala düğmesinde kodu kopyalar. |
Kaydırma bölgesi focus-visible ile kenarın içine 2 px color-focus-ring odak çizgisi çizer; kopyala düğmesi Button odağını kullanır.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Bölge | “Save.tsx, bölge” |
| Kopyala düğmesi | “Kodu kopyala, düğme”; sonra “Kopyalandı” |
Kontrast
Bölüm başlığı “Kontrast”Kod metni 1. katman yüzeyinde 4.5:1, satır numaraları color-text-subtle ile 4.5:1 kontrastlıdır. Vurgulu satırda metin rengi değişmez.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | CodeBlock nasıl karşılar | Ürün ekibi ne yapar |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | figure, figcaption, pre, code. |
Kodu metinle açıklayın. |
| 2.1.1 Klavye | Odaklanabilir kaydırma bölgesi. | Bölgeyi başka bir odaklanabilir kabın içine koymayın. |
| 1.4.10 Yeniden akış | Bölge içinde yatay kaydırma; wrap ile kırma. |
Uzun komutlarda wrap kullanın. |