Bileşenler

InlineEdit

Metin olarak gösterilen ve yerinde bir giriş alanına dönüşen değer; kaydet ve vazgeç ile.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

Görüntülemede değer düz metindir; düzenle düğmesi “Düzenle: İşyeri adı” gibi adlandırılır. Düzenlemede giriş aria-label ile etiketle adlandırılır; hata aria-invalid ve aria-describedby ile bağlanır.

Klavye

Tuş	Davranış
Enter, Space	Düzenle düğmesinde alanı açar.
Enter	Alanda kaydeder.
Escape	Alanda değişikliği bırakır.
Tab	Alan, Kaydet ve Vazgeç arasında gezer.

Odak

Alan açılınca odak girişe gider ve metin seçilir; kapanınca odak düzenle düğmesine döner.

Ekran okuyucu

Örnek	Okunan
Düzenle düğmesi	“Düzenle: İşyeri adı, düğme”
Alan	“İşyeri adı, metin alanı, Örnek İşyeri”
Hata	“geçersiz veri, Ad boş olamaz.”

Kontrast

Değer metni 4.5:1, boş metni color-text-subtle ile 4.5:1 kontrastlıdır.

WCAG 2.2

Ölçüt	InlineEdit nasıl karşılar	Ürün ekibi ne yapar
2.4.6 Başlıklar ve etiketler	Düğme ve alan etiketle adlandırılır.	Etiketi görünür biçimde de yazın.
3.3.1 Hata tanımlama	Hata alana bağlıdır.	Hatada ne yapılacağını yazın.
2.4.3 Odak sırası	Odak açılışta alana, kapanışta düğmeye gider.	-