Fixed #36513 -- M2M multi-select background color. #19674
Conversation
There was a problem hiding this comment.
Hello! Thank you for your contribution 💪
As it's your first contribution be sure to check out the patch review checklist.
If you're fixing a ticket from Trac make sure to set the "Has patch" flag and include a link to this PR in the ticket!
If you have any design or process questions then you can ask in the Django forum.
Welcome aboard ⛵️!
| background-color: var(--selected-row); | ||
| background-color: var(--body-fg); |
There was a problem hiding this comment.
The issue is resolved in the Edge browser with the applied color for the selected option, but the same issue occurs in other browsers.
For reference, the color you selected causes an issue as a foreground color.
Edge
Firefox
There was a problem hiding this comment.
I think if we can make the text color consistent between browsers, that would be better than chosing a new background color 👍
@forrrestr I recommend you add screenshots to your PR (as stated in the PR description) to make this easier to review 👍
There was a problem hiding this comment.
Thank you for picking up this ticket @forrrestr ⭐️.
In my opinion, it might be better to fix the issue by explicitly setting the text color with CSS.
like this...
index 307d9e9d86..ec213e1004 100644
--- a/django/contrib/admin/static/admin/css/forms.css
+++ b/django/contrib/admin/static/admin/css/forms.css
@@ -170,7 +170,8 @@ form .aligned select + div.help {
}
form .aligned select option:checked {
- background-color: var(--body-fg);
+ background-color: var(--selected-row);
+ color: var(--body-fg);
}It may also be a good idea to include a visual regression test.
|
It seems the ticket link in the main text is incorrect. |
docs/releases/5.2.5.txt
Outdated
|
|
||
| * Fixed Background color for admin's m2m multi-select "selected" rows in Edge | ||
| (:ticket: `36513`) |
There was a problem hiding this comment.
| * Fixed Background color for admin's m2m multi-select "selected" rows in Edge | |
| (:ticket: `36513`) |
As this is not a release blocker, we do not need a release note in Django 5.2.5
|
@Antoliny0919 & @sarahboyce Thank you for your feedback! Below are some screenshots based on @Antoliny0919 recommended adjustments Edge Chrome Firefox |
| (:ticket:`36502`). | ||
| (:ticket:`36502`). |
There was a problem hiding this comment.
I don't think this should be included in the changes!
| @screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark", "high_contrast"]) | ||
| def test_selectbox_selected_option_contrast(self): | ||
| from selenium.webdriver.common.by import By | ||
| from selenium.webdriver.support.ui import Select |
There was a problem hiding this comment.
It seems that the current test is a regular Selenium test rather than a Visual Regression test.
Also, instead of testing color contrast, it would be better to take screenshots that match the screenshot test cases, capturing the state when an option is selected and when focus is lost.
I made it like this.
index 582f548a71..dff3582c67 100644
--- a/tests/admin_views/tests.py
+++ b/tests/admin_views/tests.py
@@ -6222,36 +6222,23 @@ class SeleniumTests(AdminSeleniumTestCase):
self.take_screenshot("selectbox-non-collapsible")
@screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark", "high_contrast"])
- def test_selectbox_selected_option_contrast(self):
+ def test_selectbox_selected_option(self):
from selenium.webdriver.common.by import By
- from selenium.webdriver.support.ui import Select
self.admin_login(
- username="super",
- password="secret",
- login_url=reverse("admin:index"),
+ username="super", password="secret", login_url=reverse("admin:index")
+ )
+ question = Question.objects.create(question="django")
+ url = self.live_server_url + reverse(
+ "admin7:admin_views_question_change", args=(question.big_id,)
+ )
+ self.selenium.get(url)
+ option = self.selenium.find_element(
+ By.CSS_SELECTOR, "select#id_related_questions_from option"
)
- select_elem = self.selenium.find_element(By.ID, "id_toppings_from")
- select = Select(select_elem)
- select.select_by_index(0) # Select the first option
-
- # Get the selected option
- option_elem = select_elem.find_element(By.CSS_SELECTOR, "option:checked")
- color = option_elem.value_of_css_property("color")
- background = option_elem.value_of_css_property("background-color")
-
- def rgb_to_luminance(rgb):
- import re
- r, g, b = map(int, re.findall(r'\d+', rgb))
- def channel(c):
- c = c / 255.0
- return c / 12.92 if c <= 0.03928 else ((c + 0.055) / 1.055) ** 2.4
- return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b)
-
- lum1 = rgb_to_luminance(color)
- lum2 = rgb_to_luminance(background)
- contrast = (max(lum1, lum2) + 0.05) / (min(lum1, lum2) + 0.05)
- self.assertGreaterEqual(contrast, 4.5, "Contrast ratio too low")
+ self.assertTrue(option.is_displayed())
+ option.click()
+ self.take_screenshot("focus_off")
Trac ticket number
ticket-36513
Branch description
Updated the background color of M2M multi-select to be more visible in Edge.
Checklist
mainbranch.