[Django] #36513: Background color for admin's m2m multi-select "selected" rows is broken in Edge

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-----------------------+-----------------------------------------
Reporter: cjs59 | Type: Bug
Status: new | Component: Uncategorized
Version: 5.2 | Severity: Normal
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-----------------------+-----------------------------------------
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);
}
--
Ticket URL: <https://code.djangoproject.com/ticket/36513>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

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

-------------------------------+--------------------------------------
Reporter: cjs59 | Owner: (none)

Type: Bug | Status: new
Component: Uncategorized | Version: 5.2

Severity: Normal | Resolution:

Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0

-------------------------------+--------------------------------------
Changes (by cjs59):

* Attachment "Chrome-focused.png" added.

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+--------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: Uncategorized | Version: 5.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+--------------------------------------
Changes (by cjs59):

* Attachment "Edge-focused.png" added.

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+--------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: Uncategorized | Version: 5.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+--------------------------------------
Changes (by cjs59):

* Attachment "Chrome-unfocused.png" added.

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+--------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: Uncategorized | Version: 5.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+--------------------------------------
Changes (by cjs59):

* Attachment "Edge-unfocused.png" added.

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+--------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: Uncategorized | Version: 5.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+--------------------------------------

Description changed by cjs59:

Old description:

> 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);
> }

New description:

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);
}
}}}

--

--
Ticket URL: <https://code.djangoproject.com/ticket/36513#comment:1>

[Django]

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

Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new

Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------

Changes (by Antoliny):

* component: Uncategorized => contrib.admin
* keywords: => accessibility
* stage: Unreviewed => Accepted

--
Ticket URL: <https://code.djangoproject.com/ticket/36513#comment:2>

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------

Comment (by 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 :)
--
Ticket URL: <https://code.djangoproject.com/ticket/36513#comment:3>

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------

Description changed by Antoliny:

** Chrome focused **

[[Image(Chrome-focused.png)]]

** Chrome unfocused **

[[Image(Chrome-unfocused.png)]]

** Edge focused **

[[Image(Edge-focused.png)]]

** Edge unfocused **

[[Image(Edge-unfocused.png)]]

--
--
Ticket URL: <https://code.djangoproject.com/ticket/36513#comment:4>

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------

Changes (by Antoliny):

* Attachment "Screenshot 2025-07-21 at 7.43.04 AM.png" added.

--
Ticket URL: <https://code.djangoproject.com/ticket/36513>

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------
Changes (by Antoliny):

* Attachment "Screenshot 2025-07-21 at 7.43.10 AM.png" added.

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------

Description changed by Antoliny:

Old description:

> 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);
> }
> }}}
>

** Edge focused(dark) **

[[Image(Screenshot 2025-07-21 at 7.43.04 AM.png)]]

** Edge unfocused(dark) **

[[Image(Screenshot 2025-07-21 at 7.43.10 AM.png​)]]

--
--
Ticket URL: <https://code.djangoproject.com/ticket/36513#comment:5>

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------

Changes (by Antoliny):

* cc: Antoliny (added)

--
Ticket URL: <https://code.djangoproject.com/ticket/36513#comment:6>

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------

Comment (by 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...
--
Ticket URL: <https://code.djangoproject.com/ticket/36513#comment:7>

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------

Comment (by Antoliny):

Replying to [comment:7 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.
--
Ticket URL: <https://code.djangoproject.com/ticket/36513#comment:8>

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------+------------------------------------
Reporter: cjs59 | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 1 | UI/UX: 0
-------------------------------+------------------------------------
Changes (by Antoliny):

* easy: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36513#comment:9>

[Django]

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

-------------------------------------+-------------------------------------
Reporter: cjs59 | Owner: Forrest
| Roudebush
Type: Bug | Status: assigned

Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0

-------------------------------------+-------------------------------------
Changes (by Forrest Roudebush):

* owner: (none) => Forrest Roudebush
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/36513#comment:10>

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------------+-------------------------------------
Reporter: cjs59 | Owner: Forrest
| Roudebush
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Forrest Roudebush):

* has_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36513#comment:11>

[Django]

#36513: Background color for admin's m2m multi-select "selected" rows is broken in
Edge
-------------------------------------+-------------------------------------
Reporter: cjs59 | Owner: Forrest
| Roudebush
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

Easy pickings: 1 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36513#comment:12>