This repository was archived by the owner on Oct 1, 2025. It is now read-only.
Revert "Add docs for adding tabindex="-1" to fix the skiplink"#321
Merged
Revert "Add docs for adding tabindex="-1" to fix the skiplink"#321
Conversation
This reverts commit 858d919. Putting tabindex on the <main> element causes different problems: * Some apps will display the browser's default focus styles around the main element * When clicking anywhere in the page focus will return back to the top Consider a user interacting with an input field who clicks away from it to remove the focus style. Should they then hit tab they will be taken to the top of the page.
fofr
added a commit
to alphagov/govuk_elements
that referenced
this pull request
Jul 21, 2017
Reverts #225 See: alphagov/govuk_template#321 Putting tabindex on the `<main>` element causes different problems: * Some apps will display the browser's default focus styles around the main element * When clicking anywhere in the page focus will return back to the top Consider a user interacting with an input field who clicks away from it to remove the focus style. Should they then hit tab they will be taken to the top of the page.
gemmaleigh
approved these changes
Jul 25, 2017
Contributor
gemmaleigh
left a comment
gemmaleigh
left a comment
There was a problem hiding this comment.
This was added as a fix to ensure the target of the skiplink was focussed. If this is no longer an issue - I'm happy for this code to be deleted here and for GOV.UK elements.
fofr
changed the title
This file contains hidden or 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
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
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.
This reverts commit 858d919.
Putting tabindex on the
<main>element causes different problems:Consider a user interacting with an input field who clicks away from it to remove
the focus style. Should they then hit tab they will be taken to the top of the page.
The linked to browser bug was fixed in Apr. Testing on Safari 10.1.1 it works with VoiceOver on desktop. Testing on iOS 10.2.1 it works in mobile Safari with VoiceOver on.
More context around the issue:
twbs/bootstrap#20732
Example problem
GIF showing focus styles and tab order problem on Registers: