Focus state does not meet WCAG 2.2

[mrmjprice]

What

Our current focus state does not meet WCAG 2.2 AA/AAA proposed criteria. We should aim for AAA on this criteria.

Why

• Focus states help users to see where they are on the page
• Currently we have a purple box around the focused element
• 
• We need to make this better while we have the opportunity, we should aim for WCAG 2.2 AAA
• Criteria: 3px border around whole control, change of contrast is at least 4.5:1 different from unfocused (i.e. there is a colour background within the focus background)

Anything else

GOV.UK focus states replicated to NHS Service Manual

[issue-label-bot]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.61. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[KaterinaKir]

New focus state styling: Yellow fill (#ffdd00'), purple outline (#3c1053), 3px.
Yellow pages (major works) will have purple border and white fill and purple background, e.g. top nav or footer, yellow fill, white border

Focus styling overrides original style of the element, e.g. blue button and white text, becomes yellow (fill) and purple (outline and text) when keyboard operated focus is activated.

[KaterinaKir]

When user selects a button with a keyboard, focus state is activated and it overrides original styling. E.g. if user clicks on purple or blue button, it will turn yellow with outline (3px). Our buttons are rounded, but outline will not be rounded.

Yellow background styling. Please develop 2 options and we will test with users to find out which one they find easier to use.

Form fields such as text field, radio buttons, checkboxes will have yellow outline and no fill.

Focus state of disruptions indicators. We are removing colour meaning (red, orange, green), but we communicate severity with an icon.

Content tile focus styling: Only heading will have focus, when users clicks it content tile link is activated. We removed 'read more' link, so the entire block is clickable.

[daylesalmon]

This is a fairly big change that will involve going through every component in the design system and adding a custom focus state to each.

A new class called "wmnds-bg-yellow" will need to be added to the design system and anything that is a child of this class will also need to have a custom focus state too.

So in short...

All components need 2 new classes/styling added:

• One for generic focus state
• Another for wmnds-yellow *:focus state

How the gov uses focus states.