[Django] #36229: Forced colors mode icon color in default_urlconf “congratulations” view

[Django]

#36229: Forced colors mode icon color in default_urlconf “congratulations” view
-------------------------------------+-------------------------------------
Reporter: Eliana | Owner: Eliana Rosselli
Rosselli |
Type: Bug | Status: assigned
Component: | Version: 5.1
Uncategorized | Keywords: accessibility
Severity: Normal | colors
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 0 |
-------------------------------------+-------------------------------------
On the
[https://thibaudcolas.github.io/django_admin_tests/latest/english/debug/default_urlconf/
Congrats! page], the icons aren’t very legible due to their text color.
This is particularly a problem in forced colors mode, where they should be
clearly identifiable as link text.

This can be fixed by changing the .options svg fill and border-color to
currentColor, so the icon visuals and border always match the text color
of the surrounding link element. Although the problem is particularly
obvious in forced colors mode, the "regular" mode would also benefit from
this change, since it improves the color contrast of the icons.
--
Ticket URL: <https://code.djangoproject.com/ticket/36229>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36229: Forced colors mode icon color in default_urlconf “congratulations” view
-------------------------------------+-------------------------------------

Reporter: Eliana Rosselli | Owner: Eliana

| Rosselli
Type: Bug | Status: assigned

Component: Uncategorized | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage:
colors | Unreviewed
Has patch: 0 | Needs documentation: 0

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

Changes (by Sarah Boyce):

* Attachment "image-20250305-094854.png" added.

[Django]

#36229: Forced colors mode icon color in default_urlconf “congratulations” view
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned
Component: Uncategorized | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage:
colors | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Sarah Boyce):

* Attachment "image-20250305-094914.png" added.

[Django]

#36229: Forced colors mode icon color in default_urlconf “congratulations” view
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned
Component: Uncategorized | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage:
colors | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Sarah Boyce):

* Attachment "image-20250305-095730.png" added.

[Django]

#36229: Forced colors mode icon color in default_urlconf “congratulations” view
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned

Component: Core (Other) | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
colors |

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Sarah Boyce):

* component: Uncategorized => Core (Other)
* stage: Unreviewed => Accepted

Comment:

Here is the color contrast checker for grey and I think I agree that we
either need to make the lines thicker or the color darker for it to pass
standards
[[Image(image-20250305-095730.png)]]

I wrote a visual regression test to generate a couple of screenshots:
{{{#!diff
--- a/tests/view_tests/tests/test_debug.py
+++ b/tests/view_tests/tests/test_debug.py
@@ -11,6 +11,7 @@ from unittest import mock, skipIf

from asgiref.sync import async_to_sync, iscoroutinefunction

+from django.contrib.staticfiles.testing import StaticLiveServerTestCase
from django.core import mail
from django.core.files.uploadedfile import SimpleUploadedFile
from django.db import DatabaseError, connection
@@ -18,6 +19,7 @@ from django.http import Http404, HttpRequest,
HttpResponse
from django.shortcuts import render
from django.template import TemplateDoesNotExist
from django.test import RequestFactory, SimpleTestCase, override_settings
+from django.test.selenium import SeleniumTestCase, screenshot_cases
from django.test.utils import LoggingCaptureMixin
from django.urls import path, reverse
from django.urls.converters import IntConverter
@@ -470,6 +472,22 @@ class DebugViewTests(SimpleTestCase):
self.assertContains(response, "Oh dear, an error occurred!",
status_code=500)


+@override_settings(ROOT_URLCONF="view_tests.default_urls", DEBUG=True)
+class DebugViewVisualTests(SeleniumTestCase, StaticLiveServerTestCase):
+ available_apps = ["django.contrib.admin"]
+
+ @screenshot_cases(["desktop_size", "mobile_size", "dark",
"high_contrast"])
+ def test_congratulations_page(self):
+ from selenium.webdriver.common.by import By
+
+ self.selenium.get(self.live_server_url)
+ h1 = self.selenium.find_element(By.TAG_NAME, "h1")
+ self.assertEqual(h1.text, "The install worked successfully!
Congratulations!")
+ self.take_screenshot("top")
+ self.selenium.execute_script("window.scrollTo(0,
document.body.scrollHeight);")
+ self.take_screenshot("bottom")
+
+
class DebugViewQueriesAllowedTests(SimpleTestCase):
# May need a query to initialize MySQL connection
}}}

Sample generated screenshots:
[[Image(image-20250305-094854.png)]]
[[Image(image-20250305-094914.png)]]
--
Ticket URL: <https://code.djangoproject.com/ticket/36229#comment:1>

[Django]

#36229: Forced colors mode icon color in default_urlconf “congratulations” view
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned
Component: Core (Other) | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
colors |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Tom Carrick):

The contrast is only part of the issue here. My understanding is that when
using forced colors mode, all link content should be the link colour,
which includes the icons in this case.
--
Ticket URL: <https://code.djangoproject.com/ticket/36229#comment:2>

[Django]

#36229: Forced colors mode icon color in default_urlconf “congratulations” view
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned
Component: Core (Other) | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
colors |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Sarah Boyce):

I also think these links in light mode should look more like a link (with
an underline) or look like a button
--
Ticket URL: <https://code.djangoproject.com/ticket/36229#comment:3>

[Django]

#36229: Forced colors mode icon color in default_urlconf “congratulations” view
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned
Component: Core (Other) | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
colors |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Philip Narteh):

Hello @Eliana, is this currently being worked on? If not, I'd like to work
on it.
--
Ticket URL: <https://code.djangoproject.com/ticket/36229#comment:4>

[Django]

#36229: Forced colors mode icon color in default_urlconf “congratulations” view
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned
Component: Core (Other) | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
colors |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Eliana Rosselli):

No it’s not , feel free to take it :)
--
Ticket URL: <https://code.djangoproject.com/ticket/36229#comment:5>

[Django]

#36229: Forced colors mode icon color in default_urlconf “congratulations” view
-------------------------------------+-------------------------------------

Reporter: Eliana Rosselli | Owner: Philip
| Narteh

Type: Bug | Status: assigned
Component: Core (Other) | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
colors |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Philip Narteh):

* owner: Eliana Rosselli => Philip Narteh

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