Opened 7 weeks ago

Last modified 6 weeks ago

#36513 assigned Bug

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

Reported by: cjs59 Owned by:
Component: contrib.admin Version: 5.2
Severity: Normal Keywords: accessibility
Cc: Antoliny Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: yes
Easy pickings: yes UI/UX: no

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

}

Change History (4)

by cjs59, 7 weeks ago

Attachment: Chrome-focused.png added

by cjs59, 7 weeks ago

Attachment: Chrome-unfocused.png added

by cjs59, 7 weeks ago

Attachment: Edge-focused.png added

by cjs59, 7 weeks ago

Attachment: Edge-unfocused.png added
Note: See TracTickets for help on using tickets.
Back to Top