Opened 3 days ago

Last modified 28 hours ago

#36229 assigned Bug

Forced colors mode icon color in default_urlconf “congratulations” view

Reported by: Eliana Rosselli Owned by: Eliana Rosselli
Component: Core (Other) Version: 5.1
Severity: Normal Keywords: accessibility colors
Cc: Triage Stage: Accepted
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no
Pull Requests:How to create a pull request

Description

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.

According to the ticket's flags, the next step(s) to move this issue forward are:

  • To provide a patch by sending a pull request. Claim the ticket when you start working so that someone else doesn't duplicate effort. Before sending a pull request, review your work against the patch review checklist. Check the "Has patch" flag on the ticket after sending a pull request and include a link to the pull request in the ticket comment when making that update. The usual format is: [https://github.com/django/django/pull/#### PR].

Change History (6)

by Sarah Boyce, 2 days ago

Attachment: image-20250305-094854.png added

by Sarah Boyce, 2 days ago

Attachment: image-20250305-094914.png added

by Sarah Boyce, 2 days ago

Attachment: image-20250305-095730.png added

comment:1 by Sarah Boyce, 2 days ago

Component: UncategorizedCore (Other)
Triage Stage: UnreviewedAccepted

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:

  • TabularUnified tests/view_tests/tests/test_debug.py

    a b from unittest import mock, skipIf  
    1111
    1212from asgiref.sync import async_to_sync, iscoroutinefunction
    1313
     14from django.contrib.staticfiles.testing import StaticLiveServerTestCase
    1415from django.core import mail
    1516from django.core.files.uploadedfile import SimpleUploadedFile
    1617from django.db import DatabaseError, connection
    from django.http import Http404, HttpRequest, HttpResponse  
    1819from django.shortcuts import render
    1920from django.template import TemplateDoesNotExist
    2021from django.test import RequestFactory, SimpleTestCase, override_settings
     22from django.test.selenium import SeleniumTestCase, screenshot_cases
    2123from django.test.utils import LoggingCaptureMixin
    2224from django.urls import path, reverse
    2325from django.urls.converters import IntConverter
    class DebugViewTests(SimpleTestCase):  
    470472        self.assertContains(response, "Oh dear, an error occurred!", status_code=500)
    471473
    472474
     475@override_settings(ROOT_URLCONF="view_tests.default_urls", DEBUG=True)
     476class DebugViewVisualTests(SeleniumTestCase, StaticLiveServerTestCase):
     477    available_apps = ["django.contrib.admin"]
     478
     479    @screenshot_cases(["desktop_size", "mobile_size", "dark", "high_contrast"])
     480    def test_congratulations_page(self):
     481        from selenium.webdriver.common.by import By
     482
     483        self.selenium.get(self.live_server_url)
     484        h1 = self.selenium.find_element(By.TAG_NAME, "h1")
     485        self.assertEqual(h1.text, "The install worked successfully! Congratulations!")
     486        self.take_screenshot("top")
     487        self.selenium.execute_script("window.scrollTo(0, document.body.scrollHeight);")
     488        self.take_screenshot("bottom")
     489
     490
    473491class DebugViewQueriesAllowedTests(SimpleTestCase):
    474492    # May need a query to initialize MySQL connection

Sample generated screenshots:


comment:2 by Tom Carrick, 29 hours ago

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.

comment:3 by Sarah Boyce, 28 hours ago

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

Note: See TracTickets for help on using tickets.
Back to Top