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 July 21, 2017 14:29
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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
@fofr fofr deleted the revert-tabindex-guidance branch July 27, 2017 12:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants