sets main-content id outside of main element

[markconroy]

PR for #130

[danchamp]

@markconroy I think we want to keep the id on the main element, since it's the landmark that we want to be the target of the skip link.

The issue is the focus outline that Safari displays, so it may be a better approach to remove that in CSS?

Also paging @msayoung for a sense-check.

[markconroy]

@danchamp

Does it need to be the landmark? Drupal core does not link to a landmark, it links to a a tag, exactly like I have done. You can see it in the bartik theme's /templates/page.html.twig

[danchamp]

The screen reader experience in Safari seems to be much better with the main element as the target. On VoiceOver, the target gets announced as:

Main, you are currently on a heading level one.

With the empty anchor element:

You are currently on a link, inside web content

GovUK and NHS use the main element as the target, but interestingly don't have the tabindex set for the element.

Going to dig further...

Hmm, I understood that without the tabindex there was an issue with the element reliably receiving focus, but that doesn't appear to be the case. GovUK removed it some time ago:

alphagov/govuk_elements#534

And have found this article which confirms there's no longer a need for that negative tabindex:

https://knowbility.org/blog/2019/skip-links

So, I think we can fix this by just removing tabindex="-1" from main, and leaving it as the target of the skip link.

[markconroy]

Cool stuff. I'll get that fixed later so. Thanks Dan.

[markconroy]

Hi @danchamp

This is ready again now. Thanks.