Background

Similar to T290518, the sticky header will block the view of focused links (and any interactive element) located below the sticky header. "This was an accessibility barrier for users. The sticky element was preventing a commonly used navigation technique from working properly, leaving users unable to see or read the element they had focused on." from the UK.gov sticky header accessibility testing.

Video example

To reproduce

• Go to http://localhost:8080/wiki/Hawaii?vectorstickyheader=1
• Press "tab" until the sticky header appears
• Press "shift tab" until the focus indicator disappears below the sticky header

Developer notes

• One possible solution is to provide a JS fix, similar to this suggestion in T290518. This could be a keydown event listener on the "tab" key thats checks if the focused element is covered by the sticky header. This could potentially be done with Intersection Observer.
• It's also worth considering a design fix that covers both T290518 and this case, as both relate to hidden content. Partially persistent headers or limiting the sticky header to certain scroll behaviors could be a possible solution, at the cost of introducing more animations that could potentially be distracting.