Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "Add docs for adding tabindex="-1" to fix the skiplink" #321

Merged
merged 1 commit into from Jul 27, 2017

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Jul 21, 2017

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.

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:

focus-order-issue-tabindex-main

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 fofr requested a review from gemmaleigh Jul 21, 2017
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.
Copy link
Contributor

@gemmaleigh gemmaleigh left a 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 fofr changed the title [Discuss] Revert "Add docs for adding tabindex="-1" to fix the skiplink" Revert "Add docs for adding tabindex="-1" to fix the skiplink" Jul 25, 2017
@fofr fofr merged commit fa1a174 into master Jul 27, 2017
2 checks passed
2 checks passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
@fofr fofr deleted the revert-tabindex-guidance branch Jul 27, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.