[Django] #34033: Admin light/dark theme switch needs to convey its state for screen reader users

11 views
Skip to first unread message

Django

unread,
Sep 23, 2022, 7:37:04 AM9/23/22
to django-...@googlegroups.com
#34033: Admin light/dark theme switch needs to convey its state for screen reader
users
-------------------------------------+-------------------------------------
Reporter: Thibaud | Owner: nobody
Colas |
Type: Bug | Status: new
Component: | Version: dev
contrib.admin | Keywords: accessibility,
Severity: Normal | screen reader, translations
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------------------+-------------------------------------
Follow-up to [https://github.com/django/django/pull/15843 PR #15843] /
[https://code.djangoproject.com/ticket/33690 ticket #33690] – there are
two issues with the theme switcher for screen reader users:

- The label isn’t translated
- The label doesn’t convey the button’s current state (light, dark, auto)

This is important for partly-sighted screen reader users, who will expect
the visual appearance of the button and its screen reader announcement to
both convey the current state. Particularly between the user’s "auto"
system theme and a forced theme.

--
Ticket URL: <https://code.djangoproject.com/ticket/34033>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

Django

unread,
Sep 23, 2022, 7:37:52 AM9/23/22
to django-...@googlegroups.com
#34033: Admin light/dark theme switch needs to convey its state for screen reader
users
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner:
| FlorianPerucki
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
screen reader, translations | Unreviewed
Has patch: 0 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by FlorianPerucki):

* owner: nobody => FlorianPerucki
* status: new => assigned


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

Django

unread,
Sep 23, 2022, 8:05:27 AM9/23/22
to django-...@googlegroups.com
#34033: Admin light/dark theme switch needs to convey its state for screen reader
users
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner:
| FlorianPerucki
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
screen reader, translations | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Description changed by Thibaud Colas:

Old description:

> Follow-up to [https://github.com/django/django/pull/15843 PR #15843] /
> [https://code.djangoproject.com/ticket/33690 ticket #33690] – there are
> two issues with the theme switcher for screen reader users:
>
> - The label isn’t translated
> - The label doesn’t convey the button’s current state (light, dark, auto)
>
> This is important for partly-sighted screen reader users, who will expect
> the visual appearance of the button and its screen reader announcement to
> both convey the current state. Particularly between the user’s "auto"
> system theme and a forced theme.

New description:

Follow-up to [https://github.com/django/django/pull/15843 PR #15843] /
[https://code.djangoproject.com/ticket/33690 ticket #33690] – there are
two issues with the theme switcher for screen reader users:

- The label isn’t translated
- The label doesn’t convey the button’s current state (light, dark, auto)

- (potential issue – the SVG elements should be hidden from screen reader
users if they don’t have alternative text)

This is important for partly-sighted screen reader users, who will expect
the visual appearance of the button and its screen reader announcement to
both convey the current state. Particularly between the user’s "auto"
system theme and a forced theme.

Here is the current accessibility tree representation (Google Chrome) as a
reference:


{{{

button "Toggle Light / Dark / Auto color theme"
StaticText "Toggle Light / Dark / Auto color theme"
img ""
Ignored

}}}

--

--
Ticket URL: <https://code.djangoproject.com/ticket/34033#comment:2>

Django

unread,
Sep 23, 2022, 9:44:59 AM9/23/22
to django-...@googlegroups.com
#34033: Admin light/dark theme switch needs to convey its state for screen reader
users
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Florian
| Perucki
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
screen reader, translations | Unreviewed
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Florian Perucki):

* has_patch: 0 => 1


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

Django

unread,
Sep 23, 2022, 9:46:58 AM9/23/22
to django-...@googlegroups.com
#34033: Admin light/dark theme switch needs to convey its state for screen reader
users
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Florian
| Perucki
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
screen reader, translations | Unreviewed
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by Florian Perucki):

PR: https://github.com/django/django/pull/16085

--
Ticket URL: <https://code.djangoproject.com/ticket/34033#comment:4>

Django

unread,
Sep 23, 2022, 9:56:27 AM9/23/22
to django-...@googlegroups.com
#34033: Admin light/dark theme switch needs to convey its state for screen reader
users
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Florian
| Perucki
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Release blocker | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, translations |

Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):

* cc: Sarah Abderemane (added)
* severity: Normal => Release blocker
* stage: Unreviewed => Accepted


Comment:

Thanks for the report. Bug in bc7aa2a5e91cf65fc7510edaf1776528c7ad07b4.

--
Ticket URL: <https://code.djangoproject.com/ticket/34033#comment:5>

Django

unread,
Sep 24, 2022, 7:09:45 AM9/24/22
to django-...@googlegroups.com
#34033: Admin light/dark theme switch needs to convey its state for screen reader
users
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Florian
| Perucki
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Release blocker | Resolution:
Keywords: accessibility, | Triage Stage: Ready for
screen reader, translations | checkin

Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):

* stage: Accepted => Ready for checkin


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

Django

unread,
Sep 24, 2022, 9:27:40 AM9/24/22
to django-...@googlegroups.com
#34033: Admin light/dark theme switch needs to convey its state for screen reader
users
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Florian
| Perucki
Type: Bug | Status: closed
Component: contrib.admin | Version: dev
Severity: Release blocker | Resolution: fixed

Keywords: accessibility, | Triage Stage: Ready for
screen reader, translations | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak <felisiak.mariusz@…>):

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


Comment:

In [changeset:"2c7c22f94dc51b8b48a1590ba6d6d4b28fdcab82" 2c7c22f9]:
{{{
#!CommitTicketReference repository=""
revision="2c7c22f94dc51b8b48a1590ba6d6d4b28fdcab82"
Fixed #34033 -- Improved accessibility of switch button for dark mode in
the admin.

Bug in bc7aa2a5e91cf65fc7510edaf1776528c7ad07b4.

Thanks Thibaud Colas for the report and review.
}}}

--
Ticket URL: <https://code.djangoproject.com/ticket/34033#comment:7>

Reply all
Reply to author
Forward
0 new messages