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

Carousel: Improve button accessibility #1432

Closed
hollymiller525 opened this issue Jul 6, 2020 · 1 comment · Fixed by #2826 or #2829
Closed

Carousel: Improve button accessibility #1432

hollymiller525 opened this issue Jul 6, 2020 · 1 comment · Fixed by #2826 or #2829
Assignees
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone

Comments

@hollymiller525
Copy link

hollymiller525 commented Jul 6, 2020

The carousel navigational links ( p-link ) are failing accessibility checks. The button is empty or has no value text.

I'm submitting a ...

[x] bug report
[ ] feature request
[ ] support request

Current behavior
The p-link button within the carousel is empty and has no value text

Expected behavior
Include text attribute to the button

React version:
16.12.0

PrimeReact version:
3.4.0

Why It Matters
When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button.

How to Fix It
Place text content within the element or give the element a value attribute.

** Found via WAVE Web Accessibility Evaluation Tool

@mertsincan mertsincan added the Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add label Feb 10, 2021
@mertsincan mertsincan added this to the 6.1.0 milestone Feb 10, 2021
@mertsincan mertsincan self-assigned this Feb 10, 2021
@mertsincan mertsincan modified the milestones: 6.1.0, 7.0.0 Mar 9, 2021
@melloware melloware added the Component: Accessibility Issue or pull request is related to WCAG or ARIA label Apr 9, 2022
@melloware melloware self-assigned this Apr 26, 2022
@melloware melloware changed the title Improve carousel accessibility Carousel: Improve button accessibility Apr 27, 2022
@melloware
Copy link
Member

melloware commented Apr 27, 2022

Looks like there needs to be text inside the presentation element which is hidden with displayNone

<button type="button" class="p-carousel-next p-link">
   <span class="p-carousel-next-icon pi pi-chevron-right"></span>
  <span role="presentation" class="p-ink"></span>
</button>

Should be:

<button type="button" class="p-carousel-next p-link" aria-label="Next Page">
   <span class="p-carousel-next-icon pi pi-chevron-right"></span>
  <span role="presentation" class="p-ink"></span>
</button>

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 Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
3 participants