Opened 3 months ago

Last modified 3 months ago

#36437 closed Bug

Improve accessibility of messages in admin. — at Version 3

Reported by: Sarah Boyce Owned by:
Component: contrib.messages Version: 5.2
Severity: Normal Keywords: accessibility
Cc: Eliana Rosselli, Thibaud Colas, Sarah Abderemane, Tom Carrick Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description (last modified by Sarah Boyce)

  1. The message icons in RTL languages should be on the right


  1. The color contrast of the success message (yes icon) fails the AA guidelines in both light and dark mode. The warning message (alert icon) fail the AA guidelines in light mode.


  1. In forced colors mode, the message probably needs a border. Note that this can be partially acheived by giving a bottom border to the header breadcrumbs


Change History (7)

by Sarah Boyce, 3 months ago

Attachment: image-20250604-151433.png added

by Sarah Boyce, 3 months ago

Attachment: image-20250604-151446.png added

by Sarah Boyce, 3 months ago

Attachment: image-20250604-151500.png added

comment:1 by Sarah Boyce, 3 months ago

Description: modified (diff)

comment:2 by Sarah Boyce, 3 months ago

Note that the following screenshot test can be used to generate screenshots for testing

  • tests/admin_views/tests.py

    a b from .models import (  
    135135    UnchangeableObject,
    136136    UndeletableObject,
    137137    UnorderedObject,
     138    UserMessenger,
    138139    UserProxy,
    139140    Villain,
    140141    Vodcast,
    class SeleniumTests(AdminSeleniumTestCase):  
    68736874        name_input_value = name_input.get_attribute("value")
    68746875        self.assertEqual(name_input_value, "Test section 1")
    68756876
     6877    @screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark", "high_contrast"])
     6878    @override_settings(MESSAGE_LEVEL=10)
     6879    def test_messages(self):
     6880        from selenium.webdriver.common.by import By
     6881        from selenium.webdriver.support.ui import Select
     6882
     6883        self.admin_login(
     6884            username="super", password="secret", login_url=reverse("admin:index")
     6885        )
     6886        UserMessenger.objects.create()
     6887        for level in ["warning", "info", "error", "success", "debug"]:
     6888            self.selenium.get(
     6889                self.live_server_url + reverse("admin:admin_views_usermessenger_changelist"),
     6890            )
     6891            checkbox = self.selenium.find_element(
     6892                By.CSS_SELECTOR, "tr input.action-select"
     6893            )
     6894            checkbox.click()
     6895            Select(self.selenium.find_element(By.NAME, "action")).select_by_value(
     6896                f"message_{level}"
     6897            )
     6898            self.selenium.find_element(By.XPATH, '//button[text()="Run"]').click()
     6899            message = self.selenium.find_element(By.CSS_SELECTOR, "ul.messagelist li")
     6900            self.assertEqual(message.get_attribute("innerText"), f"Test {level}")
     6901            self.take_screenshot(level)
     6902

by Sarah Boyce, 3 months ago

Attachment: image-20250604-154457.png added

comment:3 by Sarah Boyce, 3 months ago

Description: modified (diff)
Note: See TracTickets for help on using tickets.
Back to Top