Rationalise our approach to styling focus states

[christopherthomasdesign]

What

1. Look at our focus states across the Design System, and make sure they're consistent and accessible
2. Write down some principles for styling focus states for different kinds of elements

Why

We've had a few conversations recently where it's been difficult to make decisions on styling focus states. There's a risk that without establishing some guides for ourselves, things will start getting more and more inconsistent.

There are also some changes to the focus guidelines in WCAG 2.2, so we need to make sure everything we do meets those standards (there's a conversation to be had about how realistic it is to meet AAA at this point). Some of that work is already in progress.

We have some existing guidance on styling focus states, but it's not comprehensive. Longer term, we could amend and add to this, but I see this as an internal-facing thing for now.

We started some very similar work in #1853, we'll be picking up where that left off so may want to close that issue (cc @CharlotteDowns?).

Who needs to work on this

Designers, Developers, Accessibility Specialist

Who needs to review this

As above

Done when

Beta Give feedback

1. Planned a session to review existing states and discuss what the 'rules' might be
2. Run the session
3. Written down decisions made
4. Written down focus state style principles

[kellylee-gds]

@christopherthomasdesign

@CharlotteDowns, @davidc-gds and I discussed this epic after sprint planning today when we were restructuring the WCAG epics. We've decided to move this out the prioritised epics until the design sprint research sessions have concluded. Charlotte will then become epic lead for this work and bring the work into sprints.

I've also made this card an epic and updated the done whens to be a task list which can be used to track issues when we start working on this in sprints.

[christopherthomasdesign]

That makes sense 👍

I don't think this piece should block any other focus style-related work tbh, I just thought it would be good to try record our rationale while a few of us are thinking about it.

[owenatgov]

@querkmachine made this comment listing all the different flavours of focus state across the library. The intent of this comment was primarily to assess how well they meet WCAG 2.2 2.4.13: focus appearance.

See the comment for more details and some screenshots but in brief our different focus state types are:

• text links - yellow text background with 4px black bottom border
• buttons - whole element turns yellow with 2px black bottom border
• bordered boxes and inputs - element's black border becomes 2px thick instead of 1px (if it wasn't 2px already) with an extra "outer" 2px yellow border
• linked images - The invert of bordered boxes where the extra yellow border is now inside the bounds of the element