fix: minor story accessibility updates to v9 utility examples (#31089)

microsoft · Apr 18, 2024 · 98265bb · 98265bb
1 parent f7ab06d
commit 98265bb
Show file tree

Hide file tree

Showing 17 changed files with 118 additions and 51 deletions.
diff --git a/...s/react-components/stories/Concepts/FocusManagement/useFocusableGroup/Default.stories.tsx b/...s/react-components/stories/Concepts/FocusManagement/useFocusableGroup/Default.stories.tsx
@@ -7,6 +7,7 @@ import {
   shorthands,
   tokens,
   createFocusOutlineStyle,
+  useId,
 } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
@@ -40,24 +41,30 @@ const useStyles = makeStyles({
 export const Default = () => {
   const styles = useStyles();
   const attributes = useFocusableGroup();
+  const labelId1 = useId('chat1');
+  const labelId2 = useId('chat2');
 
   return (
-    <div className={styles.pane}>
-      <div tabIndex={0} aria-label="A chat message" {...attributes} className={styles.container}>
-        <div className={styles.body}>Hello world!</div>
+    <ul className={styles.pane}>
+      <li tabIndex={0} aria-labelledby={labelId1} {...attributes} className={styles.container}>
+        <div className={styles.body} id={labelId1}>
+          Hello world!
+        </div>
         <div className={styles.actions}>
           <Button aria-label="Copy message" icon={<CopyRegular />} size="small" />
           <Button aria-label="Delete message" icon={<DeleteRegular />} size="small" />
         </div>
-      </div>
+      </li>
 
-      <div tabIndex={0} aria-label="A chat message" {...attributes} className={styles.container}>
-        <div className={styles.body}>How are you doing?</div>
+      <li tabIndex={0} aria-labelledby={labelId2} {...attributes} className={styles.container}>
+        <div className={styles.body} id={labelId2}>
+          How are you doing?
+        </div>
         <div className={styles.actions}>
           <Button aria-label="Copy message" icon={<CopyRegular />} size="small" />
           <Button aria-label="Delete message" icon={<DeleteRegular />} size="small" />
         </div>
-      </div>
-    </div>
+      </li>
+    </ul>
   );
 };
diff --git a/...s/react-components/stories/Concepts/FocusManagement/useFocusableGroup/Limited.stories.tsx b/...s/react-components/stories/Concepts/FocusManagement/useFocusableGroup/Limited.stories.tsx
@@ -7,6 +7,7 @@ import {
   shorthands,
   tokens,
   createFocusOutlineStyle,
+  useId,
 } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
@@ -40,25 +41,31 @@ const useStyles = makeStyles({
 export const Limited = () => {
   const styles = useStyles();
   const attributes = useFocusableGroup({ tabBehavior: 'limited' });
+  const labelId1 = useId('chat1');
+  const labelId2 = useId('chat2');
 
   return (
-    <div className={styles.pane}>
-      <div tabIndex={0} aria-label="A chat message" {...attributes} className={styles.container}>
-        <div className={styles.body}>Hello world!</div>
+    <ul className={styles.pane}>
+      <li tabIndex={0} aria-labelledby={labelId1} {...attributes} className={styles.container}>
+        <div className={styles.body} id={labelId1}>
+          Hello world!
+        </div>
         <div className={styles.actions}>
           <Button aria-label="Copy message" icon={<CopyRegular />} size="small" />
           <Button aria-label="Delete message" icon={<DeleteRegular />} size="small" />
         </div>
-      </div>
+      </li>
 
-      <div tabIndex={0} aria-label="A chat message" {...attributes} className={styles.container}>
-        <div className={styles.body}>How are you doing?</div>
+      <li tabIndex={0} aria-labelledby={labelId2} {...attributes} className={styles.container}>
+        <div className={styles.body} id={labelId2}>
+          How are you doing?
+        </div>
         <div className={styles.actions}>
           <Button aria-label="Copy message" icon={<CopyRegular />} size="small" />
           <Button aria-label="Delete message" icon={<DeleteRegular />} size="small" />
         </div>
-      </div>
-    </div>
+      </li>
+    </ul>
   );
 };
 

diff --git a/...omponents/stories/Concepts/FocusManagement/useFocusableGroup/LimitedTrapFocus.stories.tsx b/...omponents/stories/Concepts/FocusManagement/useFocusableGroup/LimitedTrapFocus.stories.tsx
@@ -7,6 +7,7 @@ import {
   shorthands,
   tokens,
   createFocusOutlineStyle,
+  useId,
 } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
@@ -33,32 +34,41 @@ const useStyles = makeStyles({
   pane: {
     display: 'flex',
     flexDirection: 'column',
+    listStyleType: 'none',
     ...shorthands.gap('10px'),
+    ...shorthands.margin(0),
+    ...shorthands.padding(0),
   },
 });
 
 export const LimitedTrapFocus = () => {
   const styles = useStyles();
   const attributes = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });
+  const labelId1 = useId('chat1');
+  const labelId2 = useId('chat2');
 
   return (
-    <div className={styles.pane}>
-      <div tabIndex={0} aria-label="A chat message" {...attributes} className={styles.container}>
-        <div className={styles.body}>Hello world!</div>
+    <ul className={styles.pane}>
+      <li tabIndex={0} aria-labelledby={labelId1} {...attributes} className={styles.container}>
+        <div className={styles.body} id={labelId1}>
+          Hello world!
+        </div>
         <div className={styles.actions}>
           <Button aria-label="Copy message" icon={<CopyRegular />} size="small" />
           <Button aria-label="Delete message" icon={<DeleteRegular />} size="small" />
         </div>
-      </div>
+      </li>
 
-      <div tabIndex={0} aria-label="A chat message" {...attributes} className={styles.container}>
-        <div className={styles.body}>How are you doing?</div>
+      <li tabIndex={0} aria-labelledby={labelId2} {...attributes} className={styles.container}>
+        <div className={styles.body} id={labelId2}>
+          How are you doing?
+        </div>
         <div className={styles.actions}>
           <Button aria-label="Copy message" icon={<CopyRegular />} size="small" />
           <Button aria-label="Delete message" icon={<DeleteRegular />} size="small" />
         </div>
-      </div>
-    </div>
+      </li>
+    </ul>
   );
 };
 

diff --git a/...onents/stories/Concepts/FocusManagement/useRestoreFocusSource/Default.stories.stories.tsx b/...onents/stories/Concepts/FocusManagement/useRestoreFocusSource/Default.stories.stories.tsx
@@ -43,8 +43,18 @@ export const Default = () => {
       {!feedbackSent ? (
         <div {...restoreFocusSourceAttribute} className={styles.feedback}>
           How was your experience completing this task?
-          <Button appearance="subtle" onClick={() => setFeedbackSent(true)} icon={<ThumbLikeRegular />} />
-          <Button appearance="subtle" onClick={() => setFeedbackSent(true)} icon={<ThumbDislikeRegular />} />
+          <Button
+            appearance="subtle"
+            onClick={() => setFeedbackSent(true)}
+            icon={<ThumbLikeRegular />}
+            aria-label="Like"
+          />
+          <Button
+            appearance="subtle"
+            onClick={() => setFeedbackSent(true)}
+            icon={<ThumbDislikeRegular />}
+            aria-label="Dislike"
+          />
         </div>
       ) : (
         <div>Thanks for submitting feedback!</div>

diff --git a/...ts/stories/Concepts/FocusManagement/useRestoreFocusSource/FocusRestoreHistory.stories.tsx b/...ts/stories/Concepts/FocusManagement/useRestoreFocusSource/FocusRestoreHistory.stories.tsx
@@ -59,11 +59,13 @@ export const FocusRestoreHistory = () => {
               appearance="subtle"
               onClick={() => setExperienceFeedbackSent(true)}
               icon={<ThumbLikeRegular />}
+              aria-label="Like"
             />
             <Button
               appearance="subtle"
               onClick={() => setExperienceFeedbackSent(true)}
               icon={<ThumbDislikeRegular />}
+              aria-label="Dislike"
             />
           </div>
         </>
@@ -74,8 +76,18 @@ export const FocusRestoreHistory = () => {
         <>
           <div {...restoreFocusSourceAttribute} className={styles.feedback}>
             Was your message delivered successfully?
-            <Button appearance="subtle" onClick={() => setDeliveryFeedbackSent(true)} icon={<ThumbLikeRegular />} />
-            <Button appearance="subtle" onClick={() => setDeliveryFeedbackSent(true)} icon={<ThumbDislikeRegular />} />
+            <Button
+              appearance="subtle"
+              onClick={() => setDeliveryFeedbackSent(true)}
+              icon={<ThumbLikeRegular />}
+              aria-label="Like"
+            />
+            <Button
+              appearance="subtle"
+              onClick={() => setDeliveryFeedbackSent(true)}
+              icon={<ThumbDislikeRegular />}
+              aria-label="Dislike"
+            />
           </div>
         </>
       ) : (

diff --git a/...ories/Concepts/FocusManagement/useRestoreFocusSource/UserRestoreFocus.stories.stories.tsx b/...ories/Concepts/FocusManagement/useRestoreFocusSource/UserRestoreFocus.stories.stories.tsx
@@ -63,11 +63,13 @@ export const UserRestoreFocus = () => {
               appearance="subtle"
               onClick={() => setExperienceFeedbackSent(true)}
               icon={<ThumbLikeRegular />}
+              aria-label="Like"
             />
             <Button
               appearance="subtle"
               onClick={() => setExperienceFeedbackSent(true)}
               icon={<ThumbDislikeRegular />}
+              aria-label="Dislike"
             />
           </div>
         </>
@@ -78,8 +80,18 @@ export const UserRestoreFocus = () => {
         <>
           <div {...restoreFocusSourceAttribute} className={styles.feedback}>
             Was your message delivered successfully?
-            <Button appearance="subtle" onClick={() => setDeliveryFeedbackSent(true)} icon={<ThumbLikeRegular />} />
-            <Button appearance="subtle" onClick={() => setDeliveryFeedbackSent(true)} icon={<ThumbDislikeRegular />} />
+            <Button
+              appearance="subtle"
+              onClick={() => setDeliveryFeedbackSent(true)}
+              icon={<ThumbLikeRegular />}
+              aria-label="Like"
+            />
+            <Button
+              appearance="subtle"
+              onClick={() => setDeliveryFeedbackSent(true)}
+              icon={<ThumbDislikeRegular />}
+              aria-label="Dislike"
+            />
           </div>
         </>
       ) : (

diff --git a/...nts/react-motions-preview/stories/CreateMotionComponent/CreateMotionComponent.stories.tsx b/...nts/react-motions-preview/stories/CreateMotionComponent/CreateMotionComponent.stories.tsx
@@ -14,7 +14,7 @@ const useClasses = makeStyles({
     display: 'flex',
     flexDirection: 'column',
 
-    ...shorthands.border('3px', 'solid', tokens.colorNeutralForeground3),
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorNeutralForeground3),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     ...shorthands.padding('10px'),
 
@@ -23,6 +23,7 @@ const useClasses = makeStyles({
   },
   item: {
     backgroundColor: tokens.colorBrandBackground,
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorTransparentStroke),
     width: '100px',
     height: '100px',
   },

diff --git a/...ct-motions-preview/stories/CreateMotionComponent/CreateMotionComponentDefault.stories.tsx b/...ct-motions-preview/stories/CreateMotionComponent/CreateMotionComponentDefault.stories.tsx
@@ -8,14 +8,15 @@ const useClasses = makeStyles({
     display: 'flex',
   },
   card: {
-    ...shorthands.border('3px', 'solid', tokens.colorNeutralForeground3),
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorNeutralForeground3),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
 
     ...shorthands.padding('20px'),
     ...shorthands.margin('20px'),
   },
   item: {
     backgroundColor: tokens.colorBrandBackground,
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorTransparentStroke),
     ...shorthands.borderRadius('50%'),
 
     width: '100px',

diff --git a/...ts/react-motions-preview/stories/CreateMotionComponent/ImperativeRefPlayState.stories.tsx b/...ts/react-motions-preview/stories/CreateMotionComponent/ImperativeRefPlayState.stories.tsx
@@ -15,14 +15,15 @@ const useClasses = makeStyles({
     display: 'flex',
     flexDirection: 'column',
 
-    ...shorthands.border('3px', 'solid', tokens.colorNeutralForeground3),
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorNeutralForeground3),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     ...shorthands.padding('10px'),
 
     alignItems: 'center',
   },
   item: {
     backgroundColor: tokens.colorBrandBackground,
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorTransparentStroke),
     ...shorthands.borderRadius('50%'),
 
     width: '100px',
@@ -37,7 +38,7 @@ const useClasses = makeStyles({
 
     marginTop: '20px',
 
-    ...shorthands.border('3px', 'solid', tokens.colorNeutralForeground3),
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorNeutralForeground3),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     ...shorthands.padding('10px'),
   },

diff --git a/...ct-components/react-motions-preview/stories/CreateMotionComponent/TokensUsage.stories.tsx b/...ct-components/react-motions-preview/stories/CreateMotionComponent/TokensUsage.stories.tsx
@@ -14,7 +14,7 @@ const useClasses = makeStyles({
     display: 'flex',
     flexDirection: 'column',
 
-    ...shorthands.border('3px', 'solid', tokens.colorNeutralForeground3),
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorNeutralForeground3),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     ...shorthands.padding('10px'),
 
@@ -25,6 +25,7 @@ const useClasses = makeStyles({
     ...shorthands.borderRadius(tokens.borderRadiusCircular),
     width: '100px',
     height: '100px',
+    forcedColorAdjust: 'none',
   },
   description: {
     ...shorthands.margin('5px'),

diff --git a/...react-motions-preview/stories/CreatePresenceComponent/CreatePresenceComponent.stories.tsx b/...react-motions-preview/stories/CreatePresenceComponent/CreatePresenceComponent.stories.tsx
@@ -15,14 +15,15 @@ const useClasses = makeStyles({
     display: 'flex',
     flexDirection: 'column',
 
-    ...shorthands.border('3px', 'solid', tokens.colorNeutralForeground3),
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorNeutralForeground3),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     ...shorthands.padding('10px'),
 
     alignItems: 'center',
   },
   item: {
     backgroundColor: tokens.colorBrandBackground,
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorTransparentStroke),
     ...shorthands.borderRadius('50%'),
 
     width: '100px',
@@ -37,7 +38,7 @@ const useClasses = makeStyles({
 
     marginTop: '20px',
 
-    ...shorthands.border('3px', 'solid', tokens.colorNeutralForeground3),
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorNeutralForeground3),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     ...shorthands.padding('10px'),
   },

diff --git a/...otions-preview/stories/CreatePresenceComponent/CreatePresenceComponentDefault.stories.tsx b/...otions-preview/stories/CreatePresenceComponent/CreatePresenceComponentDefault.stories.tsx
@@ -12,14 +12,15 @@ const useClasses = makeStyles({
     display: 'flex',
     flexDirection: 'column',
 
-    ...shorthands.border('3px', 'solid', tokens.colorNeutralForeground3),
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorNeutralForeground3),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     ...shorthands.padding('10px'),
 
     alignItems: 'center',
   },
   item: {
     backgroundColor: tokens.colorBrandBackground,
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorTransparentStroke),
     ...shorthands.borderRadius('50%'),
 
     width: '100px',
@@ -34,7 +35,7 @@ const useClasses = makeStyles({
 
     marginTop: '20px',
 
-    ...shorthands.border('3px', 'solid', tokens.colorNeutralForeground3),
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorNeutralForeground3),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     ...shorthands.padding('10px'),
   },

diff --git a/...ponents/react-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.tsx b/...ponents/react-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.tsx
@@ -15,7 +15,7 @@ const useClasses = makeStyles({
     display: 'flex',
     flexDirection: 'column',
 
-    ...shorthands.border('3px', 'solid', tokens.colorNeutralForeground3),
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorNeutralForeground3),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     ...shorthands.padding('10px'),
 
@@ -24,7 +24,7 @@ const useClasses = makeStyles({
     minHeight: '200px',
   },
   item: {
-    ...shorthands.border('3px', 'solid', tokens.colorBrandBackground),
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorBrandBackground),
     ...shorthands.padding('8px'),
 
     width: '300px',
@@ -36,7 +36,7 @@ const useClasses = makeStyles({
 
     marginTop: '20px',
 
-    ...shorthands.border('3px', 'solid', tokens.colorNeutralForeground3),
+    ...shorthands.border(tokens.strokeWidthThicker, 'solid', tokens.colorNeutralForeground3),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     ...shorthands.padding('10px'),
   },