Add option to toggle aria-hidden attribute for every item within the carousel.

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
 

src/Carousel.tsx

@@ -56,7 +56,8 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
     shouldResetAutoplay: true,
     rewind: false,
     rtl: false,
-    rewindWithAnimation: false
+    rewindWithAnimation: false,
+    setItemAriaHidden: true
   };
   private readonly containerRef: React.RefObject<HTMLDivElement>;
   private readonly listRef: React.RefObject<HTMLUListElement>;

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

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;