WCAG 2.2: Tab focus state risks failing 2.4.13: Focus appearance

[owenatgov]

Description of the issue

The tabs component doesn't meet the minimum requirements for WCAG 2.2 criterion 2.4.13: focus appearance under circumstances where tab text is very short. This is because:

1. the component uses link decoration with black text, reducing the contrast change between focused and unfocused to meet the criterion
2. for "active" tabs (white background) there is no text decoration, reducing the possible area focus area required to meet the criterion
3. for "inactive" tabs (grey background) the contrast between the grey background and the focus yellow is too low

Steps to reproduce the issue

See the testing spreadsheet, including the focus appearance pass fail calculator (internal only) for more details on the circumstances where this issue occurs

Further reading

• Rationalise our approach to styling focus states govuk-design-system#3007 - related issue on focus state rationalisation
• WCAG 2.2: Explore how to handle focus state of short links #4470 - may inadvertently solve this issue