Fix virtual cursor not moving when skip to content links used #821
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
|
View your branch deployment here: https://animated-fiesta-gvyom1k.pages.github.io/branches/fix/616-skip-to-content-virtual-cursor |
… virtual cursor working For "Skip to main content" link, add <a> with tabindex of -1 as target, and for "Skip to page content" link, replace page header heading with slot and set that as the target with tabindex of -1. Having a tabindex of -1 helps with focus - particularly getting the virtual cursor to move. Add eslint disable comment for <a>. .#616
GCHQ-Developer-847
force-pushed
the
fix/616-skip-to-content-virtual-cursor
branch
from
f5eb3e5 to
e7f4698
Compare
GCHQ-Developer-847
changed the title
GCHQ-Developer-299
approved these changes
Feb 16, 2024
GCHQ-Developer-530
approved these changes
Feb 16, 2024
GCHQ-Developer-530
deleted the
fix/616-skip-to-content-virtual-cursor
branch
2 tasks
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.
Summary of the changes
tabindex="-1", but I had to add a new target element rather than add it straight to the<main>because the virtual cursor wasn't quite behaving correctly.tabindex="-1", and also had to change the target element because, with the original target, it was causing all the text on the page to be read out in one go after the user presses Enter on it.See my comment on the ticket if you would like to see my research and reasoning behind choosing these solutions. In short, (for the "Skip to main content" link) using an
<a>was the most effective - with no screen reader behaviour issues, and it is also a common method for skip links. It is how W3C and Deque have done it on their websites.How to test: You can test this by doing the following with VoiceOver enabled:
Related issue
#616
Checklist