Forced colors mode icon color in default_urlconf “congratulations” view

[Eliana Rosselli]

On the ​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.

[Sarah Boyce]

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

I wrote a visual regression test to generate a couple of screenshots:

tests/view_tests/tests/test_debug.py

@@ -11 +11 @@
 
 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 +19 @@
 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 +472 @@
         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:

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

[Sarah Boyce]

I also think these links in light mode should look more like a link (with an underline) or look like a button