From 7c685c5becd2bdc5fefda0102e7b9aff199a5a22 Mon Sep 17 00:00:00 2001 From: Georgi Kirilov Date: Mon, 8 Jul 2024 11:26:01 +0200 Subject: [PATCH 1/4] add option to unset item aria hidden --- .DS_Store | Bin 0 -> 6148 bytes README.md | 1 + src/Carousel.tsx | 27 ++++++++++++++------------- src/CarouselItems.tsx | 4 +++- src/types.ts | 1 + 5 files changed, 19 insertions(+), 14 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..2e4ecb9fd43881326631485d0a9fc3a66a034193 GIT binary patch literal 6148 zcmeHKyG{c!5S)b+k)TLP>0jUvtSEc|9{_?&cW_0N{wltUPhT!`gh`ePuTlF(RF3yx;>92AnajvVRXa_a2|YIxhG}oQBi; z_%=QIRGu|q%7tV=EhgI`ob+c86VsSgqZ;=k`i5jJV6j&;7 zo6DWo|0nt%{r{4rl@yQySEYb$4$p@@pH#JV^*FD!js8maoNu}t=Rx5R<(L@dmz!i84o&9KLf6dObYzB0zaq$7Ha?i literal 0 HcmV?d00001 diff --git a/README.md b/README.md index de52fa19..bb67af8c 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 | +| setAriaHidden | `boolean` | `true` | Sets the aria hidden attiribute for each item in the carousel ## Author diff --git a/src/Carousel.tsx b/src/Carousel.tsx index f7c9c634..34860ca6 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; @@ -180,8 +181,8 @@ class Carousel extends React.Component { } /* - We only want to set the clones on the client-side cause it relies on getting the width of the carousel items. - */ + We only want to set the clones on the client-side cause it relies on getting the width of the carousel items. + */ public setClones( slidesToShow: number, itemWidth?: number, @@ -281,9 +282,9 @@ class Carousel extends React.Component { setToDomDirectly?: boolean ): void { /* - For swipe, drag and resizing, they changed the position of the carousel, but the position are not always correct. - Hence, this is to make sure our items are in the correct place. - */ + For swipe, drag and resizing, they changed the position of the carousel, but the position are not always correct. + Hence, this is to make sure our items are in the correct place. + */ if (isAnimationAllowed) { this.isAnimationAllowed = true; } @@ -375,9 +376,9 @@ class Carousel extends React.Component { this.transformPlaceHolder = this.state.transform; } /* - If we reach the last slide of a non-infinite carousel we can rewind the carousel - if opted in to autoPlay (lightweight infinite mode alternative). - */ + If we reach the last slide of a non-infinite carousel we can rewind the carousel + if opted in to autoPlay (lightweight infinite mode alternative). + */ if (this.props.autoPlay && this.props.rewind) { if (!this.props.infinite && isInRightEnd(this.state)) { const rewindBuffer = @@ -424,10 +425,10 @@ class Carousel extends React.Component { return; } /* - two cases: - 1. We are not over-sliding. - 2. We are sliding over to what we have, that means nextslides > this.props.children.length. (does not apply to the inifnite mode) - */ + two cases: + 1. We are not over-sliding. + 2. We are sliding over to what we have, that means nextslides > this.props.children.length. (does not apply to the inifnite mode) + */ const { nextSlides, nextPosition } = populateNextSlides( this.state, this.props, 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..69f2b523 100644 --- a/src/types.ts +++ b/src/types.ts @@ -45,6 +45,7 @@ export interface CarouselProps { showDots?: boolean; renderDotsOutside?: boolean; // show dots outside of the container for custom styling. renderButtonGroupOutside?: boolean; // show buttonGroup outside of the container for custom styling. + setItemAriaHidden: boolean; // set aria hidden attiribute to each item in the carousel. // Show next/previous item partially // partialVisible has to be used in conjunction with the responsive props, details are in documentation. // it shows the next set of items partially, different from centerMode as it shows both. From 9621998df83dc4ba2970b6197a837d74412b496a Mon Sep 17 00:00:00 2001 From: Georgi Kirilov Date: Mon, 8 Jul 2024 11:34:54 +0200 Subject: [PATCH 2/4] amends --- README.md | 2 +- src/Carousel.tsx | 26 +++++++++++++------------- src/types.ts | 2 +- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index bb67af8c..447cc5c2 100644 --- a/README.md +++ b/README.md @@ -487,7 +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 | -| setAriaHidden | `boolean` | `true` | Sets the aria hidden attiribute for each item in the carousel +| setAriaHidden | `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 34860ca6..1f3a78b7 100644 --- a/src/Carousel.tsx +++ b/src/Carousel.tsx @@ -57,7 +57,7 @@ class Carousel extends React.Component { rewind: false, rtl: false, rewindWithAnimation: false, - setItemAriaHidden: true + setAriaVisibility: true }; private readonly containerRef: React.RefObject; private readonly listRef: React.RefObject; @@ -181,8 +181,8 @@ class Carousel extends React.Component { } /* - We only want to set the clones on the client-side cause it relies on getting the width of the carousel items. - */ + We only want to set the clones on the client-side cause it relies on getting the width of the carousel items. + */ public setClones( slidesToShow: number, itemWidth?: number, @@ -282,9 +282,9 @@ class Carousel extends React.Component { setToDomDirectly?: boolean ): void { /* - For swipe, drag and resizing, they changed the position of the carousel, but the position are not always correct. - Hence, this is to make sure our items are in the correct place. - */ + For swipe, drag and resizing, they changed the position of the carousel, but the position are not always correct. + Hence, this is to make sure our items are in the correct place. + */ if (isAnimationAllowed) { this.isAnimationAllowed = true; } @@ -376,9 +376,9 @@ class Carousel extends React.Component { this.transformPlaceHolder = this.state.transform; } /* - If we reach the last slide of a non-infinite carousel we can rewind the carousel - if opted in to autoPlay (lightweight infinite mode alternative). - */ + If we reach the last slide of a non-infinite carousel we can rewind the carousel + if opted in to autoPlay (lightweight infinite mode alternative). + */ if (this.props.autoPlay && this.props.rewind) { if (!this.props.infinite && isInRightEnd(this.state)) { const rewindBuffer = @@ -425,10 +425,10 @@ class Carousel extends React.Component { return; } /* - two cases: - 1. We are not over-sliding. - 2. We are sliding over to what we have, that means nextslides > this.props.children.length. (does not apply to the inifnite mode) - */ + two cases: + 1. We are not over-sliding. + 2. We are sliding over to what we have, that means nextslides > this.props.children.length. (does not apply to the inifnite mode) + */ const { nextSlides, nextPosition } = populateNextSlides( this.state, this.props, diff --git a/src/types.ts b/src/types.ts index 69f2b523..5ccef33c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -45,7 +45,6 @@ export interface CarouselProps { showDots?: boolean; renderDotsOutside?: boolean; // show dots outside of the container for custom styling. renderButtonGroupOutside?: boolean; // show buttonGroup outside of the container for custom styling. - setItemAriaHidden: boolean; // set aria hidden attiribute to each item in the carousel. // Show next/previous item partially // partialVisible has to be used in conjunction with the responsive props, details are in documentation. // it shows the next set of items partially, different from centerMode as it shows both. @@ -63,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; From 51857318263031a236cc8f6ec74ecba34303e739 Mon Sep 17 00:00:00 2001 From: Georgi Kirilov Date: Mon, 8 Jul 2024 11:41:55 +0200 Subject: [PATCH 3/4] fix default prop --- src/Carousel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Carousel.tsx b/src/Carousel.tsx index 1f3a78b7..4a3b1a90 100644 --- a/src/Carousel.tsx +++ b/src/Carousel.tsx @@ -57,7 +57,7 @@ class Carousel extends React.Component { rewind: false, rtl: false, rewindWithAnimation: false, - setAriaVisibility: true + setItemAriaHidden: true }; private readonly containerRef: React.RefObject; private readonly listRef: React.RefObject; From 074d9837171c56033d921c8c46672b4e24ff6e20 Mon Sep 17 00:00:00 2001 From: Georgi Kirilov Date: Mon, 8 Jul 2024 11:43:23 +0200 Subject: [PATCH 4/4] update readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 447cc5c2..61a72b04 100644 --- a/README.md +++ b/README.md @@ -487,7 +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 | -| setAriaHidden | `boolean` | `true` | Sets the aria-hidden attribute on every item within the carousel. | +| setItemAriaHidden | `boolean` | `true` | Sets the aria-hidden attribute on every item within the carousel. | ## Author