RMcNeely
commented
4 months ago Looks good to me but its already out of date (sorry!) If you can get this updated then I think it will be good. I did some greepping for other places that had a value set for outline but couldn't find any so I think we're good.
NickColley
Focus indicators are important for keyboard users to navigate around the website, without them it is very difficult or impossible to know where they are on the page.
This change removes the styles that prevent focus indicators being shown and bring them inline with the rest of the website e.g. blog page.
Ideally we've have some sort of design system where we have considered focus styles that work at a component level but this is the minimum to make things consistent and remove a big barrier.
This resolves issues related to Focus Visible (Level AA), Focus Appearance (Level AAA), Non-text Contrast (Level AA). Relevant failure example which mirrors the issue we see in our project: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator
As part of #3591
Screenshots
Before
After
Focus indicators will be the default for the operating system and browser, here's how it looks on Ubuntu Firefox. This is consistent with the majority of the website.
Note that for some browsers focus styles will only appear when using the keyboard when using the default focus styles, following this up with custom focus indicators in the future may be an opportunity to add them to people using pointer devices as well e.g. a mouse.