[Django] #36366: Improving the accessibility of the pagination layout in the admin.

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Type:
| Cleanup/optimization
Status: new | Component:
| contrib.admin
Version: 5.1 | Severity: Normal
Keywords: accessibility, | Triage Stage:
screen reader, pagination | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
In the admin, when navigating to the pagination area using a screen
reader, there is currently no description provided for the area. When
focusing on a button, the screen reader only announces the button's
innerHTML and its role.

e.g. "2, button"

[[Image(pagination_screenreader_example.png)]]

This may not clearly communicate the purpose of the button to screen
reader users, as the innerHTML and role alone can be ambiguous.

I believe accessibility could be improved by using `aria-labelledby` to
provide a description when entering the pagination area, and by adding the
`aria-current` attribute to indicate the current page when focusing on
individual buttons. This would help screenreader users better understand
the context and purpose of each button control.
--
Ticket URL: <https://code.djangoproject.com/ticket/36366>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------

Reporter: Antoliny | Owner: (none)
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:

Keywords: accessibility, | Triage Stage:
screen reader, pagination | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Antoliny):

* Attachment "pagination_screenreader_example.png" added.

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------

Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned

Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
screen reader, pagination | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* owner: (none) => Antoliny
* status: new => assigned

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

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
screen reader, pagination | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* Attachment "pagination_screenreader_example.png" removed.

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

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
screen reader, pagination | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* Attachment "resize_pagination_screenreader_example.png" added.

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
screen reader, pagination | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Description changed by Antoliny:

Old description:

> In the admin, when navigating to the pagination area using a screen
> reader, there is currently no description provided for the area. When
> focusing on a button, the screen reader only announces the button's
> innerHTML and its role.
>
> e.g. "2, button"
>
> [[Image(pagination_screenreader_example.png)]]
>
> This may not clearly communicate the purpose of the button to screen
> reader users, as the innerHTML and role alone can be ambiguous.
>
> I believe accessibility could be improved by using `aria-labelledby` to
> provide a description when entering the pagination area, and by adding
> the `aria-current` attribute to indicate the current page when focusing
> on individual buttons. This would help screenreader users better
> understand the context and purpose of each button control.

New description:

In the admin, when navigating to the pagination area using a screen
reader, there is currently no description provided for the area. When
focusing on a button, the screen reader only announces the button's
innerHTML and its role.

e.g. "2, button"

[[Image(resize_pagination_screenreader_example.png)]]

This may not clearly communicate the purpose of the button to screen
reader users, as the innerHTML and role alone can be ambiguous.

I believe accessibility could be improved by using `aria-labelledby` to
provide a description when entering the pagination area, and by adding the
`aria-current` attribute to indicate the current page when focusing on
individual buttons. This would help screenreader users better understand
the context and purpose of each button control.

--

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

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:

Keywords: accessibility, | Triage Stage: Accepted
screen reader, pagination |

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

Changes (by Sarah Boyce):

* cc: Eliana Rosselli, Thibaud Colas, Sarah Abderemane, Tom Carrick
(added)
* stage: Unreviewed => Accepted

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

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, pagination |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Antoliny):

[https://github.com/django/django/pull/19448 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/36366#comment:4>

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, pagination |

Has patch: 1 | Needs documentation: 0

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

Changes (by Antoliny):

* has_patch: 0 => 1

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

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, pagination |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

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

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

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

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, pagination |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

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

Changes (by Antoliny):

* needs_better_patch: 1 => 0

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

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, pagination |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

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

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

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

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, pagination |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

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

Changes (by Antoliny):

* needs_better_patch: 1 => 0

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

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:

Keywords: accessibility, | Triage Stage: Ready for
screen reader, pagination | checkin

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

Changes (by Sarah Boyce):

* stage: Accepted => Ready for checkin

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

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny

Type: | Status: closed

Cleanup/optimization |
Component: contrib.admin | Version: 5.1

Severity: Normal | Resolution: fixed

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

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

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

Comment:

In [changeset:"3f59711581bd22ebd0f13fb040b15b69c0eee21f" 3f59711]:
{{{#!CommitTicketReference repository=""
revision="3f59711581bd22ebd0f13fb040b15b69c0eee21f"
Fixed #36366 -- Improved accessibility of pagination in the admin.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/36366#comment:11>

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: closed
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution: fixed
Keywords: accessibility, | Triage Stage: Ready for
screen reader, pagination | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

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

In [changeset:"d90bea1b067e01de91644b61383732386e1434f7" d90bea1b]:
{{{#!CommitTicketReference repository=""
revision="d90bea1b067e01de91644b61383732386e1434f7"
Fixed #36516, Refs #36366 -- Fixed changelist footer layout with
list_editable and list_filter.

Regression in 3f59711581bd22ebd0f13fb040b15b69c0eee21f.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/36366#comment:12>

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: closed
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution: fixed
Keywords: accessibility, | Triage Stage: Ready for
screen reader, pagination | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Comment (by Sarah Boyce <42296566+sarahboyce@…>):

In [changeset:"aae7836cc021b05f9674d15a06ca383e1db5af78" aae7836]:
{{{#!CommitTicketReference repository=""
revision="aae7836cc021b05f9674d15a06ca383e1db5af78"
Refs #36366 -- Fixed page number layout in admin pagination on small
screens.

Regression in 3f59711581bd22ebd0f13fb040b15b69c0eee21f.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/36366#comment:13>

[Django]

#36366: Improving the accessibility of the pagination layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: closed
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution: fixed
Keywords: accessibility, | Triage Stage: Ready for
screen reader, pagination | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Comment (by Sarah Boyce <42296566+sarahboyce@…>):

In [changeset:"0b2493a0da14ea91027fec7c95cb63af126e3296" 0b2493a]:
{{{#!CommitTicketReference repository=""
revision="0b2493a0da14ea91027fec7c95cb63af126e3296"
Fixed #36558, Refs #36366 -- Fixed the "show all" link hover styling in
admin pagination.

Regression in 3f59711581bd22ebd0f13fb040b15b69c0eee21f.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/36366#comment:14>