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

p-paginator: not accessible #12684

Closed
kyjus25 opened this issue Feb 27, 2023 · 3 comments
Closed

p-paginator: not accessible #12684

kyjus25 opened this issue Feb 27, 2023 · 3 comments
Assignees
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA LTS-PORTABLE
Milestone

Comments

@kyjus25
Copy link
Contributor

kyjus25 commented Feb 27, 2023

Describe the bug

None of the paginator button elements have aria labels on them which fails the Lighthouse report since buttons without inner text is read only as "button". It is impossible to have a 100% Lighthouse score for accessibility with a p-paginator on the page.

Screenshot 2023-02-27 at 4 29 03 PM

Screenshot 2023-02-27 at 4 30 39 PM

Environment

https://primeng.org/paginator

Reproducer

https://primeng.org/paginator

Angular version

15.2.0

PrimeNG version

15.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

N/A

Browser(s)

Chrome

Steps to reproduce the behavior

  1. Navigate to https://primeng.org/paginator in Chrome
  2. Right-click and choose "Inspect"
  3. Go to the "Lighthouse" tab
  4. Generate a report with at least the "Accessibility" category
  5. Scroll to the Accessibility area under "Buttons do not have an accessible name"

Expected behavior

p-paginator passes the Lighthouse test

@kyjus25 kyjus25 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Feb 27, 2023
@Tilesto
Copy link

Tilesto commented Sep 15, 2023

Have the same problems. +1
version 16.3.1
image

@taramason
Copy link

taramason commented Dec 11, 2023

Also seeing this issue. I saw PR from 2019 that seems to add the appropriate aria-labels, but they are definitely not showing up in the DOM on the components when used. I see a PR #7423 that got squashed when someone realized the aria-labels were not added in a way that allows locality, but then I'm not sure if there was any follow up? This is the second bug we have encountered that required major modification on our end to make the components functional. Using this library for professional, accessible websites has proven to be incredibly challenging and if not completely unreliable.

@cetincakiroglu cetincakiroglu removed the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 28, 2023
@cetincakiroglu cetincakiroglu added the Component: Accessibility Issue or pull request is related to WCAG or ARIA label Dec 28, 2023
@cetincakiroglu cetincakiroglu added this to the 17.3.0 milestone Dec 28, 2023
@cetincakiroglu
Copy link
Contributor

Hi,

Thanks a lot for reporting the issue we'll address it in upcoming release!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA LTS-PORTABLE
Projects
None yet
Development

No branches or pull requests

5 participants