[beta5] Accessibility problem: disabled pagination links don't restore the right attributes.

Created on 1 November 2023, about 1 year ago
Updated 4 November 2023, about 1 year ago

Problem/Motivation

Currently, the following are displayed and disabled, they are clickable and do not have the required attributes:

- First page
- Previous page
- Previous Ellipsis
- Next Ellipsis
- Page suivante
- Last page

According to the DSFR , disabled links must not have an href attribute, and must have the following attributes: aria-disabled="true" & role="link".

source : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/pa...

Current:
<a class="fr-pagination__link fr-pagination__link--first" href=""> Première page </a>

Expected:
<a class="fr-pagination__link fr-pagination__link--first" aria-disabled="true" role="link"> Première page </a>

Steps to reproduce

Access a paginated list page and check the markup.

Proposed resolution

I suggested to :
- Add the role and aria-disabled attributes when creating links that are supposed to be empty
- Delete the hard-coded href in the link tag and use the setAttribute('href') method as for the other links.

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇷🇪Réunion Martygraphie Saint-Denis (Réunion)

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024