Autocomplete: Bad colour contrast for search icon in High Contrast mode

[selfthinker]

This issue is from the accessibility audit of the Design System website by DAC in July 2024.

DAC's description

• Page: Home – GOV.UK Design System
• WCAG reference: none (Usability)
• Issue ID: DAC_High_Contrast_Mode_Usability_01

When viewing the site within an inverted colour scheme, low vision users might have difficulty identifying the purpose of the search field due to the way the visible magnifying icon contrasts.

DAC's proposed solution

We suggest applying the CSS property ‘forced-color-adjust: auto’ on the SVG to ensure that it is displayed correctly within in High Contrast Mode.

Other potential solutions

There might be other solutions.
It's probably best to use the same solution we use in other places.

Additional instances

This component appears on every page but is a single component, therefore only needs to be fixed once.
It uses the accessible autocomplete component.
But this particular issues seems to be specific to the Design System website and is not part of the component by default.

Needed roles

Frontend developer