diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..2e4ecb9f Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index de52fa19..61a72b04 100644 --- a/README.md +++ b/README.md @@ -487,6 +487,7 @@ For example if you give to your carousel item padding left and padding right 20p | rewind | `boolean` |`false` | if infinite is not enabled and autoPlay explicitly is, this option rewinds the carousel when the end is reached (Lightweight infinite mode alternative without cloning). | rewindWithAnimation | `boolean` |`false` | when rewinding the carousel back to the beginning, this decides if the rewind process should be instant or with transition. | | rtl | `boolean` |`false` | Sets the carousel direction to be right to left | +| setItemAriaHidden | `boolean` | `true` | Sets the aria-hidden attribute on every item within the carousel. | ## Author diff --git a/src/Carousel.tsx b/src/Carousel.tsx index f7c9c634..4a3b1a90 100644 --- a/src/Carousel.tsx +++ b/src/Carousel.tsx @@ -56,7 +56,8 @@ class Carousel extends React.Component { shouldResetAutoplay: true, rewind: false, rtl: false, - rewindWithAnimation: false + rewindWithAnimation: false, + setItemAriaHidden: true }; private readonly containerRef: React.RefObject; private readonly listRef: React.RefObject; diff --git a/src/CarouselItems.tsx b/src/CarouselItems.tsx index 3bf7ec8c..5a8f0a91 100644 --- a/src/CarouselItems.tsx +++ b/src/CarouselItems.tsx @@ -60,7 +60,9 @@ const CarouselItems = ({ goToSlide(index); } }} - aria-hidden={getIfSlideIsVisbile(index, state) ? "false" : "true"} + {...(props.setItemAriaHidden && { + "aria-hidden": !getIfSlideIsVisbile(index, state) + })} aria-label={ itemAriaLabel ? itemAriaLabel diff --git a/src/types.ts b/src/types.ts index 128815d9..5ccef33c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -62,6 +62,7 @@ export interface CarouselProps { rewind?: boolean; rewindWithAnimation?: boolean; rtl?: boolean; + setItemAriaHidden: boolean; // set the aria-hidden attribute on every item within the carousel. } export type StateCallBack = CarouselInternalState;