This repository was archived by the owner on Sep 9, 2025. It is now read-only.
Add tabindex-1 to fix the skiplink in Safari#225
Merged
Conversation
Chromium bug: Skip links do not work when using screenreader. https://bugs.chromium.org/p/chromium/issues/detail?id=37721 Once the page has loaded, press tab to navigate the page. Tab to a skip link and press enter. Adding tabindex="-1" to the destination element fixes this.
gemmaleigh
force-pushed
the
add-tabindex-to-fix-skiplink
branch
from
05ff27b to
09f2e28
Compare
Pressing enter when focus is on the skiplink sets focus on the #content area, remove this outline.
robinwhittleton
pushed a commit
that referenced
this pull request
May 26, 2016
# 1.2.0 - Add MIT License (PR #236) - Create latest release branch as an alias of the latest release (PR #232) - Create new app to preview govuk elements sass releases (PR #219) - Fix the summary arrow in recent Firefox (PR #227) - Remove button padding overriding the govuk_frontend_toolkit (PR #230) - Don't copy the govuk_frontend_toolkit's images into an icons folder (PR #223) - Fix path for rails and node environments (PR #234) - Import the govuk_frontend_toolkit url-helpers partial - If image-url is not defined (if we are not in a Rails environment), then set a path to /public/images - Fix the skip link in Safari (PR #225)
Merged
Contributor
|
Can this bug still be reproduced? What versions of Safari are affected and what's their usage? |
Contributor
|
On GOV.UK which does not have tabindex set: |
fofr
added a commit
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.
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.
4 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.
The GOV.UK template sets a skiplink to
#content(just tab on any GOV.UK page and hit ENTER when "Skip to main content" is highlighted).This allows users to navigate to the main content area using only the keyboard. Pressing enter when focus is on the skiplink should then set focus on the #content area.
In Safari, there's a bug where this doesn't happen unless
tabindex="-1"is set on the destination element (in this case<main id="content">).Here's the bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=37721
This pull request adds:
tabindex="-1"to the<main>element wherever it appears in a templatecc. @aduggin.