FormidableLabs / nuka-carousel

Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site.
https://commerce.nearform.com/open-source/nuka-carousel
Other
2.99k stars 594 forks source link

Update accessible roles for v5 #1031

Closed clarkgunn closed 9 months ago

clarkgunn commented 9 months ago

Description

Adjusts roles and attributes to better align with the WCAG Aria Authoring Practices Guide https://www.w3.org/WAI/ARIA/apg/patterns/carousel

Adds dev dependencies: jest-axe, @types/jest-axe

Fixes https://github.com/FormidableLabs/nuka-carousel/issues/1001

Type of Change

These changes will impact the roles and attributes when default props are used. I believe this will improve accessibility but may be considered a breaking change.

How Has This Been Tested?

New jest and cypress tests were added. Existing cypress tests needed wait logic to pass, akin to this change https://github.com/FormidableLabs/nuka-carousel/pull/887/commits/1f7f0200e5b5fe45f0f55379d4c909836fc2d5cb

Cypress and Jest tests and Lighthouse accessibility report should all pass. Attributes and roles can be verified in devtools.

A tabbed carousel with chrome devtools displaying accessible roles and attributes.

An untabbed region landmark carousel with chrome devtools displaying accessible roles and attributes.

Checklist

vercel[bot] commented 9 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nuka-carousel-website ❌ Failed (Inspect) Sep 14, 2023 6:58pm