React-Carousel: Add aria labels to Carousel story buttons (#32404)

microsoft · Aug 28, 2024 · 29373ad · 29373ad
1 parent b733c23
commit 29373ad
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 26 deletions.
diff --git a/...react-components/react-carousel-preview/stories/src/Carousel/CarouselAutoplay.stories.tsx b/...react-components/react-carousel-preview/stories/src/Carousel/CarouselAutoplay.stories.tsx
@@ -66,10 +66,19 @@ export const Autoplay = () => {
             justifyContent: 'center',
           }}
         >
-          <CarouselButton navType="prev" />
-          <CarouselAutoplayButton />
-          <CarouselNav>{() => <CarouselNavImageButton image={{ src: SWAP_IMAGE }} />}</CarouselNav>
-          <CarouselButton navType="next" />
+          <CarouselButton navType="prev" aria-label="previous carousel page" />
+          <CarouselAutoplayButton
+            aria-label={'Carousel Autoplay Button'}
+            autoplayAriaLabel={(autoplay: boolean) => {
+              return autoplay ? 'Stop Carousel Autoplay' : 'Start Carousel Autoplay';
+            }}
+          />
+          <CarouselNav>
+            {index => (
+              <CarouselNavImageButton aria-label={`Carousel Nav Button ${index}`} image={{ src: SWAP_IMAGE }} />
+            )}
+          </CarouselNav>
+          <CarouselButton navType="next" aria-label="next carousel page" />
         </div>
       </Carousel>
     </div>

diff --git a/...onents/react-carousel-preview/stories/src/Carousel/CarouselAutoplayControlled.stories.tsx b/...onents/react-carousel-preview/stories/src/Carousel/CarouselAutoplayControlled.stories.tsx
@@ -76,15 +76,22 @@ export const AutoplayControlled = () => {
             justifyContent: 'center',
           }}
         >
-          <CarouselButton navType="prev" />
+          <CarouselButton navType="prev" aria-label={'Carousel Go Previous Button'} />
           <CarouselAutoplayButton
+            autoplayAriaLabel={(autoplay: boolean) => {
+              return autoplay ? 'Stop Carousel Autoplay' : 'Start Carousel Autoplay';
+            }}
             checked={enableAutoplay}
             onCheckedChange={(_, data) => {
               setEnableAutoplay(data.checked);
             }}
           />
-          <CarouselNav>{() => <CarouselNavImageButton image={{ src: SWAP_IMAGE }} />}</CarouselNav>
-          <CarouselButton navType="next" />
+          <CarouselNav>
+            {index => (
+              <CarouselNavImageButton aria-label={`Carousel Nav Button ${index}`} image={{ src: SWAP_IMAGE }} />
+            )}
+          </CarouselNav>
+          <CarouselButton navType="next" aria-label={'Carousel Go Next Button'} />
         </div>
       </Carousel>
     </div>

diff --git a/...react-components/react-carousel-preview/stories/src/Carousel/CarouselCircular.stories.tsx b/...react-components/react-carousel-preview/stories/src/Carousel/CarouselCircular.stories.tsx
@@ -4,12 +4,11 @@ import {
   CarouselButton,
   CarouselCard,
   CarouselNav,
-  CarouselNavImageButton,
+  CarouselNavButton,
   CarouselSlider,
 } from '@fluentui/react-carousel-preview';
 import * as React from 'react';
 
-const SWAP_IMAGE = 'https://fabricweb.azureedge.net/fabric-website/assets/images/wireframe/image-square.png';
 const useClasses = makeStyles({
   test: {
     ...typographyStyles.largeTitle,
@@ -63,9 +62,11 @@ export const Circular = () => (
         justifyContent: 'center',
       }}
     >
-      <CarouselButton navType="prev" />
-      <CarouselNav>{() => <CarouselNavImageButton image={{ src: SWAP_IMAGE }} />}</CarouselNav>
-      <CarouselButton navType="next" />
+      <CarouselButton navType="prev" aria-label={'Previous Carousel Page Button'} />
+      <CarouselNav appearance="brand">
+        {index => <CarouselNavButton aria-label={`Carousel Nav Button ${index}`} />}
+      </CarouselNav>
+      <CarouselButton navType="next" aria-label={'Next Carousel Page Button'} />
     </div>
   </Carousel>
 );
diff --git a/...act-components/react-carousel-preview/stories/src/Carousel/CarouselControlled.stories.tsx b/...act-components/react-carousel-preview/stories/src/Carousel/CarouselControlled.stories.tsx
@@ -68,7 +68,7 @@ export const Controlled = () => {
         groupSize={1}
         onActiveIndexChange={(e, data) => setActiveIndex(data.index)}
       >
-        <CarouselButton navType="prev" />
+        <CarouselButton navType="prev" aria-label="Previous Carousel Page Button" />
 
         <div style={{ display: 'flex', overflow: 'hidden' }}>
           <CarouselSlider>
@@ -90,7 +90,7 @@ export const Controlled = () => {
           </CarouselSlider>
         </div>
 
-        <CarouselButton navType="next" />
+        <CarouselButton navType="next" aria-label="Next Carousel Page Button" />
       </Carousel>
 
       <div className={classes.footer}>
@@ -102,6 +102,7 @@ export const Controlled = () => {
               className={classes.control}
               disabled={index === activeIndex}
               onClick={() => setActiveIndex(index)}
+              aria-label={`Carousel Nav Button ${index} `}
             >
               {index}
             </Button>

diff --git a/.../react-components/react-carousel-preview/stories/src/Carousel/CarouselDefault.stories.tsx b/.../react-components/react-carousel-preview/stories/src/Carousel/CarouselDefault.stories.tsx
@@ -76,9 +76,9 @@ export const Default = () => (
         justifyContent: 'center',
       }}
     >
-      <CarouselButton navType="prev" />
-      <CarouselNav>{() => <CarouselNavButton />}</CarouselNav>
-      <CarouselButton navType="next" />
+      <CarouselButton navType="prev" aria-label={'Previous Carousel Page Button'} />
+      <CarouselNav>{index => <CarouselNavButton aria-label={`Carousel Nav Button ${index}`} />}</CarouselNav>
+      <CarouselButton navType="next" aria-label={'Next Carousel Page Button'} />
     </div>
   </Carousel>
 );
diff --git a/...es/react-components/react-carousel-preview/stories/src/Carousel/CarouselFocus.stories.tsx b/...es/react-components/react-carousel-preview/stories/src/Carousel/CarouselFocus.stories.tsx
@@ -89,9 +89,9 @@ export const CardFocus = () => {
             return autoplay ? 'Stop Carousel Autoplay' : 'Start Carousel Autoplay';
           }}
         />
-        <CarouselButton navType="prev" aria-label="previous carousel page" />
-        <CarouselNav aria-roledescription="carousel page navigation">{() => <CarouselNavButton />}</CarouselNav>
-        <CarouselButton navType="next" aria-label="next carousel page" />
+        <CarouselButton navType="prev" aria-label={'Previous Carousel Page Button'} />
+        <CarouselNav>{index => <CarouselNavButton aria-label={`Carousel Nav Button ${index}`} />}</CarouselNav>
+        <CarouselButton navType="next" aria-label={'Next Carousel Page Button'} />
       </div>
     </Carousel>
   );

diff --git a/...act-components/react-carousel-preview/stories/src/Carousel/CarouselFreeLayout.stories.tsx b/...act-components/react-carousel-preview/stories/src/Carousel/CarouselFreeLayout.stories.tsx
@@ -69,9 +69,11 @@ export const FreeLayout = () => {
           justifyContent: 'center',
         }}
       >
-        <CarouselButton navType="prev" />
-        <CarouselNav>{() => <CarouselNavImageButton image={{ src: SWAP_IMAGE }} />}</CarouselNav>
-        <CarouselButton navType="next" />
+        <CarouselButton navType="prev" aria-label={`Previous Carousel Page Button`} />
+        <CarouselNav>
+          {index => <CarouselNavImageButton image={{ src: SWAP_IMAGE }} aria-label={`Carousel Nav Button ${index}`} />}
+        </CarouselNav>
+        <CarouselButton navType="next" aria-label={'Next Carousel Page Button'} />
       </div>
     </Carousel>
   );

diff --git a/...-components/react-carousel-preview/stories/src/Carousel/CarouselMultipleCards.stories.tsx b/...-components/react-carousel-preview/stories/src/Carousel/CarouselMultipleCards.stories.tsx
@@ -70,9 +70,11 @@ export const MultipleCards = () => {
           justifyContent: 'center',
         }}
       >
-        <CarouselButton navType="prev" />
-        <CarouselNav>{() => <CarouselNavImageButton image={{ src: SWAP_IMAGE }} />}</CarouselNav>
-        <CarouselButton navType="next" />
+        <CarouselButton navType="prev" aria-label={'Previous Carousel Page Button'} />
+        <CarouselNav>
+          {index => <CarouselNavImageButton image={{ src: SWAP_IMAGE }} aria-label={`Carousel Nav Button ${index}`} />}
+        </CarouselNav>
+        <CarouselButton navType="next" aria-label={'Next Carousel Page Button'} />
       </div>
     </Carousel>
   );