Background color for admin's m2m multi-select "selected" rows is broken in Edge and Firefox

[cjs59]

The change in https://code.djangoproject.com/ticket/35809 has made the selected item hard to read in Microsoft Edge, as it displays as white text on a yellow background when the m2m widget is not in focus. Chrome and Firefox both display it as black text on a yellow background. When the user clicks on the m2m widget, it changes to use the browser's built-in colours: white text on dark grey for Edge, and white text on blue for Chrome/Firefox.

I am attaching screenshots to show the focused and unfocused colours in both Edge and Chrome.

Adding the following to a custom CSS file fixes Edge so the unfocused widget renders the same as in Chrome:

form .aligned select option:checked {
        color: var(--body-fg);
}

Chrome focused

Chrome unfocused

Edge focused

Edge unfocused

Edge focused(dark)

Edge unfocused(dark)

[Antoliny]

Thank you for submitting the ticket.
I have replicated the issue. In the Edge browser, after clicking the m2m select button and the widget loses focus, the text color in light mode is hex: ffffff (white), resulting in a contrast ratio of 1.03 against the background color, which does not meet the WCAG AA criteria.
In dark mode, the text color is hex: 161616 (black), with a contrast ratio of 1.37 against the background, which also fails to meet the AA criteria, just like in light mode.

I think we could resolve the issue by setting a fixed text color :)

[Chaitanya]

form .aligned select option:checked {
        color: var(--body-fg);
}

applying this change is fixing the issue, but are there any other things that need to be addressed...

[Antoliny]

Replying to Chaitanya:

form .aligned select option:checked {
        color: var(--body-fg);
}

applying this change is fixing the issue, but are there any other things that need to be addressed...

I need to test it to be sure, but from what I can see, adding just the color should fix the issue.

[Nilesh Pahari]

Hi! Since this has been open for a while, would it be okay if I take this on?

[Antoliny]

Replying to Nilesh Pahari:

Hi! Since this has been open for a while, would it be okay if I take this on?

Yes, no problem at all :)

[Nilesh Pahari]

PR link: ​https://github.com/django/django/pull/20404

[Jacob Walls <jacobtylerwalls@…>]

In 3dea5fe:

Fixed #36513 -- Improved text contrast for admin M2M multi-select widget.

Explicitly set the text color for the admin M2M widget to ensure
selected rows remain readable in browsers like Microsoft Edge and
Firefox when the widget was not focused.