Select elements have grey background in Firefox 94

[matteason]

Bug Report

What is the issue?

In the latest Firefox release (94.0.1), select elements have a grey background by default. This makes them look disabled:

Compare to Chrome:

Further testing confirms this change was introduced in Firefox 94. Firefox 93 defaults to a white background for selects.

I think strictly this is a Firefox issue, but from https://bugzilla.mozilla.org/show_bug.cgi?id=1715064 it sounds like they consider it an expected change.

There was a similar issue with Ubuntu in the GOV.UK Design System a couple of years ago (https://github.com/alphagov/govuk-frontend/issues/1659). The issue was closed off because setting a background colour on select caused issues in Firefox if the user has changed their browser default colours, but that issue now appears to be fixed

This issue also affects the GOV.UK Design System; I've filed a similar issue with them: https://github.com/alphagov/govuk-frontend/issues/2435

What steps are required to reproduce the issue?

1. Download the latest Firefox release
2. Visit https://service-manual.nhs.uk/design-system/components/select

What was the environment where this issue occurred?

• Device: Dell XPS 15/Macbook Pro
• Operating System: Windows 10/macOS
• Browser: Firefox
• Browser version: 94.0.1
• NHS.UK frontend package version: Unsure - whichever version is running on https://service-manual.nhs.uk/design-system
• Node version: Same as above
• npm version: Same as above

[karlgoldstraw]

Thanks for raising this @matteason. We will bring it into our team planning for the next sprint, but I suspect that with it being introduced by FF and is clearly linked to that version of FF, it is probably an issue that only they can fix.

Forcing a white background as you say, would probably create problems for users with custom colours.

From an accessibility point of view, the colour change is still AAA compliant, and we'd hav to test with our users whether it looked disabled to them.