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

[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.