Remove tabindex from main element #534
Conversation
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.
|
It looks like all the browser vendors have fixed the bug that was the reason for this. But it would be good to have a list of all the browsers this was tested in. |
fofr
changed the title
|
I commented over on GOV.UK template - 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. |
|
@gemmaleigh As we don't control the HTML of pages, should we leave in the outline rule within layout.scss? |
|
@fofr can we leave it in for now and add a comment that the tabindex attribute is no longer required, then we can remove it in a later release? |
|
@gemmaleigh 👍 @fofr can you update please? This seems fairly important would be good to get a new release out. |
We no longer recommend using tabindex on #content but need to keep the styles in for apps that haven’t removed the attribute.
|
@gemmaleigh @NickColley |
|
thanks @fofr 👍 |
|
And no-one has checked in which browsers it actually works? I would think that's vital. |
|
@selfthinker IMO the bug this introduced was worse than the one it fixed. Which makes it less vital. Tested on:
These were the browsers the bug fix appeared to target. |
* Update bio format * Adjust 404 output * Removing `tabindex="-1"` from `<main>` From localgovdrupal/localgov_base#131 (comment) and alphagov/govuk_elements#534 * More readable HTML * concise for better fit
Reverts #225
See: alphagov/govuk_template#321
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: