New tabbed prop determines whether roles should follow the Basic Carousel or Tabbed Carousel requirements.
New landmark prop determines whether role should be a region landmark or have role group. Role and label have been moved from the slider frame to the parent carousel element so controls are contained within the label and role. Landmark regions should be intentional, so the default value is set to false.
New carouselId prop gives the carousel frame an id attribute which can be uniquely targeted by controls where there might be multiple carousels on a page. This could be replaced internally with useId with React 18.
Default frameAriaLabel has been changed to a slightly more useful 'Slider', the role description of 'carousel' will already be announced
Default pagination dots have been given the role tab, and aria-controls targeting their slide.
When tabbed is true, slides will have the role tabpanel indicating they are the target of the tab, otherwise they will have the role group and a description of slide.
When tabbed is false, default pagination dots will not be rendered.
Default next and previous buttons now target the slider frame with aria-controls.
[ ] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[x] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[x] This change requires a documentation update
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.
Description
Adjusts roles and attributes to better align with the WCAG Aria Authoring Practices Guide https://www.w3.org/WAI/ARIA/apg/patterns/carousel
tabbed
prop determines whether roles should follow the Basic Carousel or Tabbed Carousel requirements.landmark
prop determines whether role should be aregion
landmark or have rolegroup
. Role and label have been moved from the slider frame to the parent carousel element so controls are contained within the label and role. Landmark regions should be intentional, so the default value is set to false.carouselId
prop gives the carousel frame anid
attribute which can be uniquely targeted by controls where there might be multiple carousels on a page. This could be replaced internally withuseId
with React 18.frameAriaLabel
has been changed to a slightly more useful 'Slider', the role description of 'carousel' will already be announcedtab
, andaria-controls
targeting their slide.tablist
. Astab
s need to be the immediate child oftablist
, and sincetablist
already has list semantics,ul
andli
have been removed. This should resolve https://github.com/FormidableLabs/nuka-carousel/issues/1001 and the issue raised in https://github.com/FormidableLabs/nuka-carousel/pull/803 regardingaria-selected
.tabbed
is true, slides will have the roletabpanel
indicating they are the target of thetab
, otherwise they will have the rolegroup
and a description ofslide
.tabbed
is false, default pagination dots will not be rendered.aria-controls
.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.
Checklist
pnpm run lint
)pnpm run test:ci-with-server
/pnpm run test
)pnpm changeset
.