Skip to main link adds a focus ring to the H1 about nhsuk-frontend HOT 1 OPEN

An interesting, related point of difference compared to govuk-frontend is that we place focus on the first h1 in the page whereas govuk-frontend places focus on the main wrapper.

They then have a class like this which is added by the JS, to remove the outline:

.govuk-skip-link-focused-element {
  &:focus {
    // Remove the native visible focus indicator when the element is programmatically focused.
    //
    // We set the focus on the linked element (this is usually the <main> element) when the skip
    // link is activated to improve screen reader announcements. However, we remove the visible
    // focus indicator from the linked element because the user cannot interact with it.
    //
    // A related discussion: https://github.com/w3c/wcag/issues/1001
    outline: none;
  }
}

While ours is hardcoded to the h1, the govuk-frontend one is more flexible and allows skip links that go to other places in the page. We have a couple of pages with more than one skip link on 111 online so this flexibility would be a useful addition.

My tendency would be to align ourselves with govuk-frontend here and drop their component in wholesale, but we would need to bottom out why the decision was made to focus the h1 instead of the main element. I had a look through the git history and seems to have always been this way since 2018 (See e58d885).

@mcheung-nhs what are your thoughts? Is the h1 behaviour significant, or just an arbitrary difference?

from nhsuk-frontend.