Stop table of contents sticky header overlapping focused items #360
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The table of contents header, which you see on smaller screens, is sticky and so can overlap elements when they are focused because the browser will only scroll to reveal elements when they are off-screen. As far as the browser knows, the header and the focused element are both onscreen. This takes an approach from the paciello group where we listen for focus events, check if the header overlaps the element in focus and scrolls to reveal it if so.
tombye
force-pushed
the
fix-toc-button-overlapping-focused-items
branch
from
b9e3172 to
5da1476
Compare
tombye
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Stop the table of contents sticky header, which appears on smaller screens, from overlapping interactice elements when they are focused.
A fix for #356, using a variant of the approach in https://www.tpgi.com/prevent-focused-elements-from-being-obscured-by-sticky-headers/.
What’s changed
Before
Tabbing backwards through content to a link obscured by the table of contents header means the focus indicator is lost.
After
Tabbing backwards through content to a link obscured by the table of contents header reveals the link when it it focused.
Notes for reviewers
This work is done on top of #358, because that adds tests for the table of contents JS that this adds to. So I don't need to duplicate the work adding them.
Identifying a user need
Users who use the keyboard to move through the page rely on being able to see what is focused to know where they are in the page.
The issue also failed success criterion 2.4.11, Focus not obscured (minimum) and success criterion 2.4.12, Focus not obscured (enhanced).