Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug - [Pagination] - [accessibility: add unique aria-label for usage of multiple Pagination components on one page] #11047

Open
rmscampos opened this issue Sep 23, 2024 · 1 comment

Comments

@rmscampos
Copy link

Describe the problem
A clear and concise description of the problem. Which components are affected?

Pagination - we are using this in various product detail pages tables and often have pagination at the top of the table and also at the bottom. The nested 'nav' element has a built-in aria-label="Pagination" so when someone is using multiple Pagination components on one view, axeDevTools will flag an issue with duplicate, non-unique landmark aria-labels.

How do you reproduce the problem?
See https://catalog.redhat.com/software/container-stacks/detail/6449606fbc2f51cf1d9bcfad as an example, on the Certified Components table mid-page. If you run an axeDevTools scan for WCAG 2.1 AA, there should be an error of 'Landmarks should have a unique role or role/label/title (i.e. accessible name) combination' and will highlight <nav class="pf-c-pagination__nav" aria-label="Pagination"> as the issue.

Expected behavior
I think we should be able to add our own aria-label to the nav element or the existing aria-label could be associated with the variant (like aria-label="Pagination-top"). Although, I don't know if this would work if there were multiple tables on a page, all with a 'top' and 'bottom' pagination component.

Is this issue blocking you?
I am doing accessibility remediations for the Ecosystem Catalog so this isn't a blocker, but something that is keeping us from a 100% score.

Screenshots
Screenshot 2024-09-23 at 5 16 48 PM

Screenshot 2024-09-23 at 5 16 06 PM

Screenshot 2024-09-23 at 5 26 44 PM

What is your environment?

  • OS: Sonoma 14.6.1
  • Browser: Chrome
  • Version: 129.0.6668.59

What is your product and what release date are you targeting?
Ecosystem Catalog and we are attempting to get all of our last remaining accessibility issues corrected by the end of the year.

Any other information?

@rmscampos rmscampos added the bug label Sep 23, 2024
@rmscampos rmscampos changed the title Bug - [Pagination] - [add unique aria-label for usage of multiple Pagination components on one page] Bug - [Pagination] - [accessibility: add unique aria-label for usage of multiple Pagination components on one page] Sep 23, 2024
@tlabaj
Copy link
Contributor

tlabaj commented Oct 3, 2024

@rmscampos this aria-label is configurable. You would need to pass the titles pro p and set the paginationAriaLabel value. Let us know if you need anymore help with this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Parking lot
Development

No branches or pull requests

2 participants