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
3k stars 596 forks source link

Attributes do not match their roles on carousel dots #1001

Closed LinnJS closed 7 months ago

LinnJS commented 1 year ago

Bugs and Questions

Prerequisites

Describe Your Environment

Describe the Problem

We are using the default nuka-carousel carousel dots and styling them by overwriting styles in a css file. When running a lighthouse audit our accessibility score dropped from a 100 to a 90 when implementing a carousel with dots. On our 100 previous score we had a nuka-carousel but used custom prev next buttons with no issues. Adding another nuka-carousel with dots dropped the score and caused an accessibility error.

Error: Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more.

image

Expected behavior:

Aria tags should match roles of element

Actual behavior

Aria error of ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more.

Feel free to go to website and run lighthouse with accessibility audit checked.

Website link

https://bunkr-p9eavz7e8-linnjs.vercel.app/

LinnJS commented 7 months ago

This looks to have been fixed thank you @clarkgunn