Accessibility Update

[7agabond]

Made a small update to the code: Changed outline: none to outline-color: transparent. It's good to always have this in outlines for inputs and buttons and such, since users with higher contrasts and such could have issues using the tab button selector. This could have an unintentional effect of making special animations and attributes of the button disappear. Reference: https://www.youtube.com/shorts/4B_4WLpbyp8

[ahosgood]

Hi @7agabond - thank you for your contribution.

In this example, the class tna-!--no-focus-style is designed as an override class. In some instances, it is advantageous to not show a focus style on a focused element.

For example, when we click on a skip link to jump to an anchor on the page we want to focus on that element. However this element is not interactive and does not necessarily have to be accessible through keyboard navigation as it is just an area of the page.

In this instance, we don't want to show a focus style because the element is not focusable.

This example is used here: https://github.com/nationalarchives/tna-frontend/blob/main/src/nationalarchives/components/skip-link/skip-link.mjs#L23

We have followed the conventions of GOV.UK (skip link thread: alphagov/govuk-design-system-backlog#66) which has resulted in a similar solution: https://github.com/alphagov/govuk-frontend/blob/50e6bd4168019a79dcaf4add3f10a57c4c97156d/packages/govuk-frontend/src/govuk/components/skip-link/_index.scss#L35-L46