Improve accessibility of messages in admin.

[Sarah Boyce]

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

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

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

[Sarah Boyce]

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

tests/admin_views/tests.py

@@ -135 +135 @@
     UnchangeableObject,
     UndeletableObject,
     UnorderedObject,
+    UserMessenger,
     UserProxy,
     Villain,
     Vodcast,
@@ -6873 +6874 @@
         name_input_value = name_input.get_attribute("value")
         self.assertEqual(name_input_value, "Test section 1")
 
+    @screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark", "high_contrast"])
+    @override_settings(MESSAGE_LEVEL=10)
+    def test_messages(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")
+        )
+        UserMessenger.objects.create()
+        for level in ["warning", "info", "error", "success", "debug"]:
+            self.selenium.get(
+                self.live_server_url + reverse("admin:admin_views_usermessenger_changelist"),
+            )
+            checkbox = self.selenium.find_element(
+                By.CSS_SELECTOR, "tr input.action-select"
+            )
+            checkbox.click()
+            Select(self.selenium.find_element(By.NAME, "action")).select_by_value(
+                f"message_{level}"
+            )
+            self.selenium.find_element(By.XPATH, '//button[text()="Run"]').click()
+            message = self.selenium.find_element(By.CSS_SELECTOR, "ul.messagelist li")
+            self.assertEqual(message.get_attribute("innerText"), f"Test {level}")
+            self.take_screenshot(level)
+

[Michał Pokusa]

Can I please claim/be assigned to this issue, I have a concept on how this could be resolved and already working on PR.

[Antoliny]

I remember seeing related work in this ticket. I agree, it's something that needs improvement.

[Antoliny]

Replying to Michał Pokusa:

Can I please claim/be assigned to this issue, I have a concept on how this could be resolved and already working on PR.

[Michał Pokusa]

Replying to Antoliny:

I remember seeing related work in this ticket. I agree, it's something that needs improvement.

Yes, this is the prerequisite for that PR, I understand that after this is resolved, it would be time to proceed with new styles.

Below I attached screenshots of how messages look like after the changes.

The contrast one was a bit more tricky, and I resolved it by making a sprite-like svg both both themes, similar to icon-calendar.svg. This approach required some modification of the message HTML. Of course the colors used can be changed, I just used ones that meet the AA guidelines.

[Sarah Boyce <42296566+sarahboyce@…>]

In 1520870c:

Fixed #36437 -- Improved accessibility of messages in admin.