DataTable

Rol ve anlam

• DataTable gerçek bir <table> öğesidir (Table parçalarıyla): <caption>, <th scope> ve <td>. Adı caption’dan gelir; kaydırma bölgesi aynı adı taşır ve Tab ile odak alır.
• Sıralanabilir sütunun th öğesinde aria-sort (ascending, descending ya da none) bulunur. Başlığın içinde bir <button> vardır; adı sütun adıdır. Yön simgesi aria-hidden ve görünürdür; durumu aria-sort bildirir.
• Sıralama ve seçim değişiklikleri tek bir kibar canlı bölgede (role="status", aria-live="polite") duyurulur: “Ad artan sırada sıralandı”, “Seçili satır: 2”. Yüklenirken bölge “Yükleniyor” der.
• Seçim: Satır aria-selected taşımaz, çünkü bu özellik düz tablo satırında geçerli değildir. Seçili durum, onay kutusunun işaretli durumu ve data-selected ile verilir. Tümünü seç kutusu bazı satırlar seçiliyken aria-checked="mixed" olur.
• Satır onay kutuları satırın adını taşır (getRowLabel): “Öğe 1 satırını seç”. Etiket yoksa satır kimliği kullanılır.
• Yükleniyor: tablo aria-busy="true" olur; iskelet çubukları aria-hidden’dır.
• Hata iletisi role="alert" ile hemen duyurulur.
• Sanallaştırmada tablo aria-rowcount (toplam satır + üst bilgi) ve her satır aria-rowindex taşır; ekran okuyucu tablonun gerçek boyutunu duyar. Dolgu satırları aria-hidden’dır.

Klavye

Tuş	Davranış
Tab	Sırayla: kaydırma bölgesi, sütun butonu, sıralama butonları, tümünü seç kutusu, her satır için onay kutusu, satır açma butonu ve satır işlemleri.
Enter, Boşluk	Sıralama butonunu, satır açma butonunu, işlem butonunu çalıştırır; onay kutusunu değiştirir (Boşluk).
Escape	Sütun panelini kapatır ve odağı butona döndürür.
Ok tuşları	Kaydırma bölgesi odaktayken tabloyu kaydırır.

Izgara gezinmesi (ok tuşlarıyla hücreden hücreye) yoktur; her etkileşimli öğe ayrı bir sekme durağıdır. Bu bilinçli bir tercihtir: tablo grid rolünde değil, düz tablodur.

Odak

Her etkileşimli öğenin kendi odak halkası vardır: sıralama butonu, satır açma butonu, onay kutuları, işlem butonları ve kaydırma bölgesi (bölgenin içinde çizilir). Halka 2 px kalınlıkta ve 2 px uzaklıktadır; yalnızca klavye odağında görünür. Sütun paneli kapanınca odak düğmeye döner.

Ekran okuyucu

Örnek	Okunan
Tablo	“Öğe listesi, tablo, 6 satır, 5 sütun”
Sıralanabilir başlık	“Ad, sütun başlığı, artan sırada sıralı; Ad, düğme”
Tümünü seç	“Tüm satırları seç, onay kutusu, karışık”
Satır onay kutusu	“Öğe 1 satırını seç, onay kutusu, işaretli”
Canlı bölge	“Ad artan sırada sıralandı”
Yükleniyor	“Yükleniyor”
Aç/kapat düğmesi	“Öğe 1 ayrıntılarını göster, düğme, daraltılmış”; aria-controls ayrıntı hücresini gösterir

Kontrast

Değerler Table ile aynıdır; metin her markada ve modda en az 4.5:1’dir.

Çift	Açık mod	Koyu mod
color-text-default / table-row-background-hovered	15.44:1	13.49:1
color-text-default / table-row-background-selected (en düşük)	15.04:1	13.98:1
color-text-subtle (üst bilgi) / table-header-background	8.38:1	9.23:1
color-focus-ring / color-surface-default (en düşük)	5.97:1	8.09:1

İskelet çubukları süstür ve metin taşımaz. Sıralama simgesinin yanında metin bulunur; simge tek başına bilgi taşımaz.

WCAG 2.2

Ölçüt	DataTable nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Gerçek tablo, scope, aria-sort, aria-rowcount.	İlk sütunu rowHeader yapın; getRowLabel verin.
1.4.1 Renk kullanımı	Seçim onay kutusu ve data-selected ile; sıralama ok ve aria-sort ile.	Satır durumunu StatusBadge ile metin olarak verin.
1.4.3 Metin kontrastı	En az 8.38:1 (ikincil), 13.49:1 (varsayılan).	Hücrelere özel renk vermeyin.
2.1.1 Klavye	Tüm işlevler Tab, Enter, Boşluk ve Escape ile çalışır.	Satırı yalnızca onClick ile açmayın; onRowOpen kullanın.
2.4.3 Odak sırası	Odak görsel sırayı izler; panel kapanınca düğmeye döner.	İşlem sütununa fazla öğe koymayın.
2.4.7 Odak görünür	Halka her etkileşimli öğede.	className ile outline kaldırmayın.
2.5.8 Hedef boyutu	Onay kutusu, sıralama ve işlem butonları en az 24 px (IconButton sm 32 px).	Hücre içine kendi denetimlerinizi koyarken 24 px’i koruyun.
4.1.2 Ad, rol, değer	Butonların adı, onay kutularının adı ve durumu var.	İşlem butonlarının adına satırı ekleyin.
4.1.3 Durum iletileri	Sıralama, seçim ve yükleme kibar canlı bölgede; hata alert.	İletileri messages ile ürün diline uyarlayın.