PageHeader

Rol ve anlam

PageHeader düz bir div çizer; header kullanmaz, çünkü uygulama çerçevesinin üst çubuğu zaten banner bölgesidir ve ikinci bir bölge karışıklık yaratır. Başlık varsayılan olarak h1’dir (headingLevel ile 2 ya da 3). Konum izi kendi nav bölgesini getirir. Yüklenirken başlık öğesi yerinde kalır ve görünmeyen “Sayfa yükleniyor” metniyle okunur; kapsayıcı aria-busy taşır. Dönüş bağlantısındaki ok ikonu süstür.

Klavye

Tuş	Davranış
Tab	Konum izi bağlantıları, dönüş bağlantısı ve işlemler arasında DOM sırasıyla gezer.
Enter	Odaktaki bağlantıyı açar ya da butonu çalıştırır.
Space	Odaktaki butonu çalıştırır.

Odak

PageHeader kendisi odak almaz. Bağlantılar ve butonlar kendi 2 px color-focus-ring halkalarını gösterir. Sayfa geçişinden sonra odağı başlığa taşımak yönlendiricinin işidir.

Ekran okuyucu

Örnek	Okunan
Başlık	“Sayfa başlığı, başlık, düzey 1”
Yüklenirken	“Sayfa yükleniyor, başlık, düzey 1”
Konum izi	“Konum, gezinme” ve bağlantılar
Dönüş bağlantısı	“Listeye dön, bağlantı”

Kontrast

Başlık color-fg-default, açıklama color-fg-subtle ile zeminde en az 4,5:1 kontrast taşır. Durum rozetleri ve butonlar kendi kontrast kurallarını izler.

WCAG 2.2

Ölçüt	PageHeader nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Gerçek başlık öğesi ve sıralı DOM.	headingLevel’ı sayfa yapısına göre seçin.
2.4.2 Sayfa başlığı	Görünür başlık sağlar.	Belge başlığını (<title>) aynı adla güncelleyin.
2.4.6 Başlıklar ve etiketler	Kısa, açıklayıcı başlık.	Başlığı sayfanın adı yapın.
1.4.10 Yeniden akış	İşlemler dar ekranda alta geçer; uzun başlık satır kırar.	İşlem sayısını sınırlı tutun.
4.1.3 Durum mesajları	Yükleniyor metni başlıkta okunur.	Yükleme bitince loading’i kaldırın.