SplitButton

Rol ve anlam

SplitButton iki ayrı button öğesinden oluşur. Ana düğmenin adı görünür etiketidir. Menü düğmesi Base UI Menu ile çizilir: aria-haspopup="menu" ve aria-expanded taşır; adı tip düzeyinde zorunlu olan menuLabel’dan gelir, çünkü düğmede yalnızca ikon vardır. Açılan liste role="menu", öğeler role="menuitem"’dır. Ok ve öğe ikonları aria-hidden taşır.

Klavye

Tuş	Davranış
Tab	Önce ana düğmeye, sonra menü düğmesine gider.
Enter ya da Space	Ana düğmede eylemi çalıştırır; menü düğmesinde menüyü açar.
Aşağı ok	Menü düğmesinde menüyü açar ve ilk öğeye gider.
Yukarı ve aşağı ok	Menüde öğeler arasında gezinir.
Home ve End	İlk ve son öğeye gider.
Harf	Bu harfle başlayan öğeye gider.
Escape	Menüyü kapatır; odak menü düğmesine döner.

Devre dışı öğeler ok tuşlarıyla odaklanabilir ama seçilemez.

Odak

Her iki düğmede 2 px color-focus-ring halkası yalnızca klavye odağında görünür. Menü açılınca odak ilk öğeye geçer, kapanınca menü düğmesine döner.

Ekran okuyucu

Örnek	Okunan
Ana düğme	“Kaydet, düğme”
Menü düğmesi	“Diğer kaydetme seçenekleri, menü düğmesi, daraltılmış”
Menü açık	“Taslak olarak kaydet, menü öğesi, 1 / 2”
Devre dışı öğe	“Kopya olarak kaydet, menü öğesi, soluk”

Kontrast

Etiketler ve ok ikonu Button renklerini kullanır ve en az 4,5:1 kontrast taşır. primary ayırıcı yalnızca süstür; iki parçanın sınırı odak halkası ve ayrı hedef alanlarıyla da bellidir. Devre dışı durum eşikten muaftır (WCAG 1.4.3).

WCAG 2.2

Ölçüt	SplitButton nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	menu ve menuitem rolleri, aria-haspopup.	Menüye yalnızca ilgili eylemleri koyun.
2.1.1 Klavye	İki düğme de sekme durağıdır; menü ok tuşlarıyla gezilir.	Kendi tuş işleyicinizi eklemeyin.
2.4.3 Odak sırası	Odak menüye girer ve menü düğmesine döner.	Seçimden sonra odağı başka yere taşımayın.
2.4.7 Görünür odak	focus-visible halkası.	Halkayı kaldırmayın.
2.5.8 Hedef boyutu (asgari)	En küçük menü düğmesi 32 × 32 px’tir.	Dokunmatik ekranlarda md ya da lg kullanın.
4.1.2 Ad, rol, değer	Ad menuLabel’dan, durum aria-expanded’dan gelir.	Anlamlı bir menuLabel verin.