== Background
Similar to [[ https://phabricator.wikimedia.org/T290518 | 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 [[ https://technology.blog.gov.uk/2018/05/21/sticky-elements-functionality-and-accessibility-testing | UK.gov sticky header accessibility testing ]].
[[ https://jmp.sh/2SnJWnw | 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 [[ https://phabricator.wikimedia.org/T290518#7359825 | 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. [[ https://www.nngroup.com/articles/sticky-headers/ | 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.