Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Keyboard Navigation and Focus Management: Tab Order, :focus-visible, Skip Links, Focus Traps, inert and Roving Tabindex
For keyboard users focus must always be visible, move in a sensible order and be placed somewhere on purpose when the focused element disappears. We use Bookstore with the keyboard only and measure: the base href trap of skip links in an SPA, a sticky header hiding focus and scroll-padding, the native dialog's focus trap and focus after a deleted row, roving tabindex with native radios, and focus and page titles on route changes with the Angular router.
Borders, border-radius, outline and box-shadow: Edges, Shadows and the Focus Ring
You show a selected or hover state with color, an inset box-shadow or an outline instead of a thicker border, and you draw the focus ring with :focus-visible and outline, because box-shadow disappears in forced colors mode. On Bookstore's checkout and catalog we measure a border pushing content, the border shorthand wiping border-image, 50% versus 9999px pills, border-image ignoring border-radius, and a shadow vanishing in forced colors.