Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Keyboard Navigation ve Focus Yönetimi: Tab Sırası, :focus-visible, Skip Link, Focus Trap, inert ve Roving Tabindex
Klavye kullanıcısı için focus her zaman görünür olmalı, mantıklı sırayla ilerlemeli ve odaktaki element kaybolduğunda bilinçli olarak bir yere taşınmalı. Bookstore'u yalnız klavyeyle kullanıp ölçüyoruz: SPA'da skip link'in base href tuzağı, sticky header'ın focus'u örtmesi ve scroll-padding, native dialog'un focus trap'i ve silinen satırdan sonra focus, native radio ile roving tabindex, Angular router'da route değişiminde focus ve sayfa başlığı.
Border, border-radius, outline ve box-shadow: Kenarlar, Gölgeler ve Focus Halkası
Seçili ya da hover durumunu kenarlık kalınlığıyla değil renk, inset box-shadow veya outline ile gösterirsin; focus halkasını :focus-visible ve outline ile çizersin, çünkü box-shadow forced colors modunda kaybolur. Bookstore'un checkout ve kataloğunda kenarlığın içeriği kaydırmasını, border shorthand'inin border-image'ı silmesini, 50% ile 9999px pill farkını, border-radius'u takip etmeyen border-image'ı ve forced colors'da kaybolan gölgeyi ölçüyoruz.