[Django] #36437: Improve accessibility of messages in admin.

[Django]

#36437: Improve accessibility of messages in admin.
-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Type: Bug
Status: new | Component:
| contrib.messages
Version: 5.2 | Severity: Normal
Keywords: accessibility | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
1. The message icons in RTL languages should be on the right
2. The color contrast of the icons mostly fail the AA guidelines
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
--
Ticket URL: <https://code.djangoproject.com/ticket/36437>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36437: Improve accessibility of messages in admin.

----------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: (none)

Type: Bug | Status: new
Component: contrib.messages | Version: 5.2

Severity: Normal | Resolution:

Keywords: accessibility | Triage Stage: 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-20250604-151433.png" added.

[Django]

#36437: Improve accessibility of messages in admin.
----------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: (none)
Type: Bug | Status: new
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: 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-20250604-151446.png" added.

[Django]

#36437: Improve accessibility of messages in admin.
----------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: (none)
Type: Bug | Status: new
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: 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-20250604-151500.png" added.

[Django]

#36437: Improve accessibility of messages in admin.
----------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: (none)
Type: Bug | Status: new
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
----------------------------------+--------------------------------------

Description changed by Sarah Boyce:

Old description:

> 1. The message icons in RTL languages should be on the right
> 2. The color contrast of the icons mostly fail the AA guidelines
> 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

New description:

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

[[Image(image-20250604-151500.png​)]]

2. The color contrast of the icons mostly fail the AA guidelines

[[Image(image-20250604-151433.png​​)]]

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

[[Image(image-20250604-151446.png​)]]

--
--
Ticket URL: <https://code.djangoproject.com/ticket/36437#comment:1>

[Django]

#36437: Improve accessibility of messages in admin.
----------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: (none)
Type: Bug | Status: new
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
----------------------------------+--------------------------------------

Comment (by Sarah Boyce):

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

{{{#!diff
--- a/tests/admin_views/tests.py
+++ b/tests/admin_views/tests.py
@@ -135,6 +135,7 @@ from .models import (
UnchangeableObject,
UndeletableObject,
UnorderedObject,
+ UserMessenger,
UserProxy,
Villain,
Vodcast,
@@ -6873,6 +6874,32 @@ class SeleniumTests(AdminSeleniumTestCase):
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)
+
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/36437#comment:2>

[Django]

#36437: Improve accessibility of messages in admin.
----------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: (none)
Type: Bug | Status: new
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: 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-20250604-154457.png" added.

--
Ticket URL: <https://code.djangoproject.com/ticket/36437>

[Django]

#36437: Improve accessibility of messages in admin.
----------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: (none)
Type: Bug | Status: new
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
----------------------------------+--------------------------------------

Description changed by Sarah Boyce:

Old description:

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

> [[Image(image-20250604-151500.png​)]]
>
> 2. The color contrast of the icons mostly fail the AA guidelines
>
> [[Image(image-20250604-151433.png​​)]]
>
> 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
>
> [[Image(image-20250604-151446.png​)]]

New description:

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

[[Image(image-20250604-151500.png​)]]

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.

[[Image(image-20250604-154457.png​​)]]

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

[[Image(image-20250604-151446.png​)]]

--

--
Ticket URL: <https://code.djangoproject.com/ticket/36437#comment:3>

[Django]

#36437: Improve accessibility of messages in admin.
----------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: (none)
Type: Bug | Status: new
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
----------------------------------+--------------------------------------

Comment (by Michał Pokusa):

Can i plese claim/be assigned to this issue, I have a concept on how this
could be resolved and already working on PR.
--
Ticket URL: <https://code.djangoproject.com/ticket/36437#comment:4>

[Django]

#36437: Improve accessibility of messages in admin.
----------------------------------+------------------------------------

Reporter: Sarah Boyce | Owner: (none)
Type: Bug | Status: new
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:

Keywords: accessibility | Triage Stage: Accepted

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

Changes (by Antoliny):

* stage: Unreviewed => Accepted

Comment:

I remember seeing related work in this
[https://code.djangoproject.com/ticket/36386 ticket]. I agree, it's
something that needs improvement.
--
Ticket URL: <https://code.djangoproject.com/ticket/36437#comment:5>

[Django]

#36437: Improve accessibility of messages in admin.

-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Owner: Michał
| Pokusa
Type: Bug | Status: assigned

Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0

-------------------------------------+-------------------------------------
Changes (by Antoliny):

* owner: (none) => Michał Pokusa
* status: new => assigned

Comment:

Replying to [comment:4 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.

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

[Django]

#36437: Improve accessibility of messages in admin.
-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Owner: Michał
| Pokusa
Type: Bug | Status: assigned
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Michał Pokusa):

* Attachment "test_messages--success--rtl.png" added.

--
Ticket URL: <https://code.djangoproject.com/ticket/36437>

[Django]

#36437: Improve accessibility of messages in admin.
-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Owner: Michał
| Pokusa
Type: Bug | Status: assigned
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Michał Pokusa):

* Attachment "test_messages--success--high_contrast.png" added.

[Django]

#36437: Improve accessibility of messages in admin.
-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Owner: Michał
| Pokusa
Type: Bug | Status: assigned
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Michał Pokusa):

Replying to [comment:5 Antoliny]:

> I remember seeing related work in this
[https://code.djangoproject.com/ticket/36386 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.

[[Image(test_messages--success--high_contrast.png)]]

[[Image(test_messages--success--rtl.png)]]
--
Ticket URL: <https://code.djangoproject.com/ticket/36437#comment:7>

[Django]

#36437: Improve accessibility of messages in admin.
-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Owner: Michał
| Pokusa
Type: Bug | Status: assigned
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 1

-------------------------------------+-------------------------------------
Changes (by Michał Pokusa):

* has_patch: 0 => 1
* ui_ux: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36437#comment:8>

[Django]

#36437: Improve accessibility of messages in admin.
-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Owner: Michał
| Pokusa
Type: Bug | Status: assigned
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0

Needs tests: 1 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1
* needs_tests: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36437#comment:9>

[Django]

#36437: Improve accessibility of messages in admin.
-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Owner: Michał
| Pokusa
Type: Bug | Status: assigned
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Michał Pokusa):

* needs_better_patch: 1 => 0
* needs_tests: 1 => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/36437#comment:10>

[Django]

#36437: Improve accessibility of messages in admin.
-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Owner: Michał
| Pokusa
Type: Bug | Status: assigned
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution:

Keywords: accessibility | Triage Stage: Ready for
| checkin

Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* stage: Accepted => Ready for checkin

--
Ticket URL: <https://code.djangoproject.com/ticket/36437#comment:11>

[Django]

#36437: Improve accessibility of messages in admin.
-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Owner: Michał
| Pokusa

Type: Bug | Status: closed
Component: contrib.messages | Version: 5.2
Severity: Normal | Resolution: fixed

Keywords: accessibility | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce <42296566+sarahboyce@…>):

* resolution: => fixed
* status: assigned => closed

Comment:

In [changeset:"1520870c4a6c47df3ed2f597785a8d35a1710bc4" 1520870c]:
{{{#!CommitTicketReference repository=""
revision="1520870c4a6c47df3ed2f597785a8d35a1710bc4"
Fixed #36437 -- Improved accessibility of messages in admin.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/36437#comment:12>