2.4.13: Focus Appearance (WCAG 2.2)

[Febakke]

As a part of working with #997 we should change our focus styling so we dont break the new requirements for focus in WCAG 2.2

New requirements found in 2.4.13: Focus Appearance AAA

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

• is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
• has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

Our current version have a yellow border outside of the component and a dark border over the excisting border. The contrast between the unfocused component border and the focus border needs to be 3:1. This probably means we have to move 2px of the dark border outside. So that it meets the contrast to the (often) white background.

Problem with todays focus appearance

We need a contrast of more than 3:1 one between unfocused and focused components. Today we add a dark border on top of our components. Not around it. So we need to measure the contrast between the unfocused color on the component and the focus color. With the blue color we use on buttons we get a contrast of 2.36:1 and i guess it is worse on other unput components that use a darker color like radio and inputfield.

We can solve this for button using the Gov.uk and Brreg way of styling buttons, but that wont solve it for our other components. Below are an example on how Brreg has solved this. In this case with a secondary button the yellow focus color do not have enough contrast to the unfocused pixels. But the focus border has a 3px width and good enough contrast on 2px. On primary buttons this would reversed. Meaning that the yellow focus would have good enough contrast but the border might not.

This might work for buttons, but we also need something that can work on our other components. This applies to all our components whitch have solid border that is 2px or more before focus. (Radio and checkbox are examples of this)

One solution might be to alway put a solid black outline outside the component (when possible) ensuring that there are a bigger difference when focusing. Using our surface tokens you should not have a background that wont comply with our text colour and since we use the same color on both text and focus we should not have an issue contrast.

While trying this out in practice i recognize its not an elegant solution. Some of the components just look weird 🤔

• [ ] Check if I understand the new requirements correctly?
• [ ] Create a suggestion on how to solve this in figma
• [ ] Test on all components in Figma