Bileşenler

DescriptionList

Bir kaydın alanlarını terim ve değer çiftleri olarak, yerel dl, dt ve dd öğeleriyle gösterir.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

Kök yerel bir <dl> öğesidir. Ekran okuyucular terim ve tanım ilişkisini bu öğelerden alır; ek ARIA rolü gerekmez.
Her satır, <dt> ve <dd> öğelerini saran bir <div>’dir. HTML <dl> içinde bu sarmalayıcıya izin verir.
İşlem, satır sonunda ayrı bir <dd> olarak durur; böylece <dd> dışında bir denetim <dl> içine konmaz. Ekran okuyucu işlemi aynı terimin ikinci tanımı olarak okur.
Boş değerde — görsel (aria-hidden), gerekçe (“bilgi yok”) ekran okuyucuya okunur.
Terimler ve değerler görsel sırayla DOM sırasındadır; yerleşim yalnızca CSS ızgarasıyla değişir.

Klavye

Tuş	Davranış
Tab	DescriptionList odak almaz. Satırlardaki işlemler görsel sırayla odak alır.
Enter, Boşluk	Odaktaki işlemi çalıştırır (Button davranışı).

Odak

DescriptionList’in kendi odak halkası yoktur. İşlem denetimi kendi halkasını taşır: 2 px kalınlıkta, 2 px uzaklıkta.

Ekran okuyucu

Örnek	Okunan
Terim ve değer	“Durum”, “Etkin” (terim ve tanım olarak)
Boş değer	“Açıklama”, “bilgi yok”
İşlemli satır	“Kimlik”, “ITEM-1024”, “Kopyala, düğme”

Kelimeyi emptyLabel ile değiştirebilirsiniz; varsayılan kütüphane metnidir. Aynı sayfada birden çok işlem varsa her işlemin adı neyi etkilediğini söylemeli (“Kimliği kopyala”).

Kontrast

Metin her markada ve modda en az 4.5:1’dir; değerler bigbang ve fixture token çıktısından hesaplandı.

Çift	Açık mod	Koyu mod
`color-text-default` / `color-surface-default`	16.16:1	17.18:1
`color-text-subtle` / `color-surface-default`	8.77:1	10.27:1
`color-text-subtle` / `color-surface-raised` (Card içinde)	9.07:1	9.23:1

Ayırıcı çizgi (color-border-subtle, 1.22:1) süstür: satırlar boşlukla da ayrılır ve çizgi bilgi taşımaz (WCAG 1.4.11 zorunlu tutmaz).

WCAG 2.2

Ölçüt	DescriptionList nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Yerel `dl`, `dt`, `dd`; satırlar `div` ile gruplanır.	Terim ile değeri aynı satırda tutun; terimi değerden ayırmayın.
1.3.2 Anlamlı sıra	Yerleşim CSS ile değişir; DOM sırası terim, değer, işlemdir.	Parçalarla yazarken bu sırayı koruyun.
1.4.3 Kontrast	Metin en az 8.77:1.	Özel renk vermeyin.
1.4.10 Yeniden akış	1024 px altında alt alta; uzun değer satır kırar.	Değerleri kırpmayın.
2.4.6 Başlıklar ve etiketler	Terimler kısa ve açıklayıcı olmalı.	Terimi değeri anlatacak şekilde yazın.
2.5.8 Hedef boyutu	İşlem Button’dur; `sm` 32 px.	İşlem için en az 24 px hedef koruyun.