From e9e3cf3374a564e24efa2e866a594b4f570d1b9c Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 1 Feb 2023 16:15:57 +0100
Subject: [PATCH 1/9] docs: improve grid examples

---
 .../stories/Card/CardTemplates.stories.tsx    | 83 +++++++++++--------
 1 file changed, 48 insertions(+), 35 deletions(-)

diff --git a/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx b/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx
index a7428f30fc726d..032c46b43b5148 100644
--- a/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx
@@ -22,12 +22,9 @@ import {
 import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
 
 const useStyles = makeStyles({
-  mainContainer: {
+  container: {
     ...shorthands.gap('16px'),
-    width: 'fit-content',
-    height: '256px',
     display: 'flex',
-    flexDirection: 'column',
     flexWrap: 'wrap',
   },
 
@@ -59,6 +56,12 @@ const useStyles = makeStyles({
     display: 'flex',
     alignItems: 'flex-start',
   },
+
+  grid: {
+    ...shorthands.gap('16px'),
+    display: 'flex',
+    flexDirection: 'column',
+  },
 });
 
 const resolveAsset = (asset: string) => {
@@ -76,13 +79,7 @@ export const Templates = () => {
   const styles = useStyles();
 
   return (
-    <div className={styles.mainContainer}>
-      <Card className={styles.card}>
-        <CardPreview>
-          <img src={resolveAsset('intelligence.png')} alt="Intelligence - Design to Amplify" />
-        </CardPreview>
-      </Card>
-
+    <div className={styles.container}>
       <Card className={styles.card}>
         <header className={mergeClasses(styles.flex, styles.labels)}>
           <Badge color="severe" shape="rounded" appearance="tint">
@@ -146,32 +143,48 @@ export const Templates = () => {
         </footer>
       </Card>
 
-      <Card className={styles.card} size="small">
-        <CardHeader
-          image={{ as: 'img', src: powerpointLogoURL }}
-          header={<Text weight="semibold">Team Offsite 2020</Text>}
-          description={<Caption1 className={styles.caption}>OneDrive &gt; Presentations</Caption1>}
-          action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} />}
-        />
-      </Card>
-
-      <Card className={styles.card} size="small">
-        <CardHeader
-          image={{ as: 'img', src: excelLogo }}
-          header={<Text weight="semibold">Team Budget</Text>}
-          description={<Caption1 className={styles.caption}>OneDrive &gt; Spreadsheets</Caption1>}
-          action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} />}
-        />
+      <Card className={styles.card}>
+        <CardPreview>
+          <img src={resolveAsset('intelligence.png')} alt="Intelligence - Design to Amplify" />
+        </CardPreview>
       </Card>
 
-      <Card className={styles.card} size="small">
-        <CardHeader
-          image={{ as: 'img', src: wordLogo }}
-          header={<Text weight="semibold">Secret Project Briefing</Text>}
-          description={<Caption1 className={styles.caption}>OneDrive &gt; Documents</Caption1>}
-          action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} />}
-        />
-      </Card>
+      <div className={styles.grid}>
+        <Card className={styles.card} size="small">
+          <CardHeader
+            image={{ as: 'img', src: powerpointLogoURL }}
+            header={<Text weight="semibold">Team Offsite 2020</Text>}
+            description={<Caption1 className={styles.caption}>OneDrive &gt; Presentations</Caption1>}
+            action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} />}
+          />
+        </Card>
+
+        <Card className={styles.card} size="small">
+          <CardHeader
+            image={{ as: 'img', src: excelLogo }}
+            header={<Text weight="semibold">Team Budget</Text>}
+            description={<Caption1 className={styles.caption}>OneDrive &gt; Spreadsheets</Caption1>}
+            action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} />}
+          />
+        </Card>
+
+        <Card className={styles.card} size="small">
+          <CardHeader
+            image={{ as: 'img', src: wordLogo }}
+            header={<Text weight="semibold">Secret Project Briefing</Text>}
+            description={<Caption1 className={styles.caption}>OneDrive &gt; Documents</Caption1>}
+            action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} />}
+          />
+        </Card>
+      </div>
     </div>
   );
 };
+
+Templates.parameters = {
+  docs: {
+    description: {
+      story: 'Cards can be composed with other components to build rich elements for a page.',
+    },
+  },
+};

From d9c84885c33f8b973227031a2c4ab3416642accf Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 1 Feb 2023 16:16:15 +0100
Subject: [PATCH 2/9] docs: add better a11y props

---
 .../react-card/stories/Card/CardDefault.stories.tsx         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/react-card/stories/Card/CardDefault.stories.tsx b/packages/react-components/react-card/stories/Card/CardDefault.stories.tsx
index e404af921e9727..e35569aaa8d944 100644
--- a/packages/react-components/react-card/stories/Card/CardDefault.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardDefault.stories.tsx
@@ -25,7 +25,7 @@ export const Default = () => {
   return (
     <Card className={styles.card}>
       <CardHeader
-        image={<img src={resolveAsset('avatar_elvia.svg')} alt="Face of a person" />}
+        image={<img src={resolveAsset('avatar_elvia.svg')} alt="Elvia Atkins avatar picture" />}
         header={
           <Body1>
             <b>Elvia Atkins</b> mentioned you
@@ -34,8 +34,8 @@ export const Default = () => {
         description={<Caption1>5h ago · About us - Overview</Caption1>}
       />
 
-      <CardPreview logo={<img src={resolveAsset('word_logo.svg')} alt="Microsoft Word logo" />}>
-        <img src={resolveAsset('doc_template.png')} alt="Preview of a Word document " />
+      <CardPreview logo={<img src={resolveAsset('word_logo.svg')} alt="Microsoft Word document" />}>
+        <img src={resolveAsset('doc_template.png')} alt="Preview of a Word document: About Us - Overview" />
       </CardPreview>
 
       <CardFooter>

From 94530c9d6a29bb4948237a3c8ae3587322d564c3 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 1 Feb 2023 16:21:17 +0100
Subject: [PATCH 3/9] docs: improve card main description

---
 .../react-card/stories/Card/CardDescription.md                | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-card/stories/Card/CardDescription.md b/packages/react-components/react-card/stories/Card/CardDescription.md
index 4f7a02021958cb..53ce4d835ff331 100644
--- a/packages/react-components/react-card/stories/Card/CardDescription.md
+++ b/packages/react-components/react-card/stories/Card/CardDescription.md
@@ -1 +1,3 @@
-The Card component is a framework for organizing content within the confines of a container. It's main function is to provide the scaffolding for hosting actions and content for a single topic within a card.
+A card is a container that holds information and actions related to a single concept or object, like a document or a contact.
+
+Cards can give information prominence and create predictable patterns. While they're very flexible, it's important to use them consistently for particular use cases across experiences.

From f171cddde768661b697f4c340592c481cbfe0250 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 1 Feb 2023 17:03:26 +0100
Subject: [PATCH 4/9] docs: change orientation examples to be easier to compare

---
 .../stories/Card/CardOrientation.stories.tsx  | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/react-components/react-card/stories/Card/CardOrientation.stories.tsx b/packages/react-components/react-card/stories/Card/CardOrientation.stories.tsx
index c693a6da19f0bc..76184c1dc3b9af 100644
--- a/packages/react-components/react-card/stories/Card/CardOrientation.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardOrientation.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles, shorthands, Avatar, Button, Caption1, Text, tokens, Subtitle1 } from '@fluentui/react-components';
+import { makeStyles, shorthands, Button, Caption1, Text, tokens, Subtitle1 } from '@fluentui/react-components';
 import { MoreHorizontal20Filled } from '@fluentui/react-icons';
 import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
 
@@ -18,6 +18,12 @@ const useStyles = makeStyles({
     flexWrap: 'wrap',
   },
 
+  card: {
+    width: '360px',
+    maxWidth: '100%',
+    height: 'fit-content',
+  },
+
   section: {
     width: 'fit-content',
   },
@@ -27,14 +33,8 @@ const useStyles = makeStyles({
   },
 
   horizontalCardImage: {
-    width: '60px',
-    height: '60px',
-  },
-
-  verticalCard: {
-    width: '360px',
-    maxWidth: '100%',
-    height: 'fit-content',
+    width: '64px',
+    height: '64px',
   },
 
   headerImage: {
@@ -69,9 +69,11 @@ export const Orientation = () => {
     <div className={styles.main}>
       <section className={styles.section}>
         <Title>'vertical' (Default)</Title>
-        <Card className={styles.verticalCard}>
+        <p>With image as part of header</p>
+
+        <Card className={styles.card}>
           <CardHeader
-            image={<img src={resolveAsset('app_logo.svg')} className={styles.headerImage} />}
+            image={<img className={styles.headerImage} src={resolveAsset('app_logo.svg')} alt="App Name Document" />}
             header={<Text weight="semibold">App Name</Text>}
             description={<Caption1 className={styles.caption}>Developer</Caption1>}
             action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} aria-label="More options" />}
@@ -86,16 +88,16 @@ export const Orientation = () => {
 
       <section className={styles.section}>
         <Title>'horizontal'</Title>
+        <p>With image as part of preview</p>
 
-        <Card size="small" orientation="horizontal">
+        <Card className={styles.card} orientation="horizontal">
           <CardPreview className={styles.horizontalCardImage}>
-            <img src={resolveAsset('logo.svg')} alt="Company Logo" />
+            <img className={styles.horizontalCardImage} src={resolveAsset('app_logo.svg')} alt="App Name Document" />
           </CardPreview>
 
           <CardHeader
-            image={<Avatar badge={{ status: 'available' }} image={{ src: resolveAsset('avatar_elvia.svg') }} />}
-            header={<Text weight="semibold">Strategy 2021</Text>}
-            description={<Caption1>https://aka.ms/fluentui</Caption1>}
+            header={<Text weight="semibold">App Name</Text>}
+            description={<Caption1 className={styles.caption}>Developer</Caption1>}
             action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} aria-label="More options" />}
           />
         </Card>

From f22f6391202236fbd9dad62bfa00419a820a0bfc Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 1 Feb 2023 17:08:17 +0100
Subject: [PATCH 5/9] docs: use "Filled" to describe the default card
 appearance

---
 .../react-card/stories/Card/CardAppearance.stories.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-card/stories/Card/CardAppearance.stories.tsx b/packages/react-components/react-card/stories/Card/CardAppearance.stories.tsx
index 8a1880fedac613..b94b2ac673335b 100644
--- a/packages/react-components/react-card/stories/Card/CardAppearance.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardAppearance.stories.tsx
@@ -105,7 +105,7 @@ export const Appearance = () => {
     <div className={styles.main}>
       <section>
         <ExampleHeader
-          title="Default"
+          title="Filled (Default)"
           description="This is the default style to use for cards. Use this style variant for most of your card
           designs."
         />

From 8a5952cabc78f4d0ce823c2955bc5f947777c5c4 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 2 Feb 2023 18:42:32 +0100
Subject: [PATCH 6/9] docs: add meaningful alt params to images

---
 .../react-card/stories/Card/CardAppearance.stories.tsx    | 2 +-
 .../react-card/stories/Card/CardSelectable.stories.tsx    | 4 ++--
 .../stories/Card/CardSelectableIndicator.stories.tsx      | 8 ++++----
 .../react-card/stories/Card/CardSize.stories.tsx          | 4 ++--
 .../react-card/stories/Card/CardTemplates.stories.tsx     | 6 +++---
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react-components/react-card/stories/Card/CardAppearance.stories.tsx b/packages/react-components/react-card/stories/Card/CardAppearance.stories.tsx
index b94b2ac673335b..bacc6582f49335 100644
--- a/packages/react-components/react-card/stories/Card/CardAppearance.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardAppearance.stories.tsx
@@ -85,7 +85,7 @@ const CardExample = ({ className, ...props }: CardProps) => {
   return (
     <Card {...props} className={mergeClasses(className, styles.card)} onClick={onClick}>
       <CardHeader
-        image={<img className={styles.logo} src={resolveAsset('app_logo.svg')} />}
+        image={<img className={styles.logo} src={resolveAsset('app_logo.svg')} alt="App name logo" />}
         header={<Text weight="semibold">App Name</Text>}
         description={<Caption1 className={styles.caption}>Developer</Caption1>}
         action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} aria-label="More options" />}
diff --git a/packages/react-components/react-card/stories/Card/CardSelectable.stories.tsx b/packages/react-components/react-card/stories/Card/CardSelectable.stories.tsx
index 485262307283b4..ca94223a972e30 100644
--- a/packages/react-components/react-card/stories/Card/CardSelectable.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardSelectable.stories.tsx
@@ -50,9 +50,9 @@ const CardExample = (props: CardProps) => {
     <Card className={styles.card} {...props}>
       <CardPreview
         className={styles.grayBackground}
-        logo={<img className={styles.logoBadge} alt="app logo" src={resolveAsset('logo3.svg')} />}
+        logo={<img className={styles.logoBadge} src={resolveAsset('logo3.svg')} alt="Figma app logo" />}
       >
-        <img alt="Presentation Preview" src={resolveAsset('office1.png')} className={styles.smallRadius} />
+        <img className={styles.smallRadius} src={resolveAsset('office1.png')} alt="Presentation Preview" />
       </CardPreview>
 
       <CardHeader
diff --git a/packages/react-components/react-card/stories/Card/CardSelectableIndicator.stories.tsx b/packages/react-components/react-card/stories/Card/CardSelectableIndicator.stories.tsx
index 16c2a0200f24f5..d6780e643fdca8 100644
--- a/packages/react-components/react-card/stories/Card/CardSelectableIndicator.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardSelectableIndicator.stories.tsx
@@ -82,9 +82,9 @@ export const SelectableIndicator = () => {
         >
           <CardPreview
             className={styles.grayBackground}
-            logo={<img className={styles.logoBadge} alt="app logo" src={resolveAsset('logo3.svg')} />}
+            logo={<img className={styles.logoBadge} src={resolveAsset('logo3.svg')} alt="Figma app logo" />}
           >
-            <img alt="Presentation Preview" src={resolveAsset('office1.png')} className={styles.smallRadius} />
+            <img className={styles.smallRadius} src={resolveAsset('office1.png')} alt="Presentation Preview" />
           </CardPreview>
 
           <CardHeader
@@ -102,9 +102,9 @@ export const SelectableIndicator = () => {
         >
           <CardPreview
             className={styles.grayBackground}
-            logo={<img className={styles.logoBadge} alt="app logo" src={resolveAsset('logo3.svg')} />}
+            logo={<img className={styles.logoBadge} src={resolveAsset('logo3.svg')} alt="Figma app logo" />}
           >
-            <img alt="Presentation Preview" src={resolveAsset('office1.png')} className={styles.smallRadius} />
+            <img className={styles.smallRadius} src={resolveAsset('office1.png')} alt="Presentation Preview" />
           </CardPreview>
 
           <CardHeader
diff --git a/packages/react-components/react-card/stories/Card/CardSize.stories.tsx b/packages/react-components/react-card/stories/Card/CardSize.stories.tsx
index 2693c8f9b7ddf4..218d1e75040220 100644
--- a/packages/react-components/react-card/stories/Card/CardSize.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardSize.stories.tsx
@@ -66,8 +66,8 @@ const CardExample = (props: CardProps) => {
   return (
     <Card className={styles.card} {...props}>
       <header className={styles.flex}>
-        <img className={styles.appIcon} src={resolveAsset('logo.svg')} />
-        <img className={styles.appIcon} src={resolveAsset('logo2.svg')} />
+        <img className={styles.appIcon} src={resolveAsset('logo.svg')} alt="Application one logo" />
+        <img className={styles.appIcon} src={resolveAsset('logo2.svg')} alt="Application two logo" />
       </header>
 
       <CardHeader
diff --git a/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx b/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx
index 032c46b43b5148..d5298cae8203dd 100644
--- a/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx
@@ -152,7 +152,7 @@ export const Templates = () => {
       <div className={styles.grid}>
         <Card className={styles.card} size="small">
           <CardHeader
-            image={{ as: 'img', src: powerpointLogoURL }}
+            image={{ as: 'img', src: powerpointLogoURL, alt: 'PowerPoint app logo' }}
             header={<Text weight="semibold">Team Offsite 2020</Text>}
             description={<Caption1 className={styles.caption}>OneDrive &gt; Presentations</Caption1>}
             action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} />}
@@ -161,7 +161,7 @@ export const Templates = () => {
 
         <Card className={styles.card} size="small">
           <CardHeader
-            image={{ as: 'img', src: excelLogo }}
+            image={{ as: 'img', src: excelLogo, alt: 'Excel app logo' }}
             header={<Text weight="semibold">Team Budget</Text>}
             description={<Caption1 className={styles.caption}>OneDrive &gt; Spreadsheets</Caption1>}
             action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} />}
@@ -170,7 +170,7 @@ export const Templates = () => {
 
         <Card className={styles.card} size="small">
           <CardHeader
-            image={{ as: 'img', src: wordLogo }}
+            image={{ as: 'img', src: wordLogo, alt: 'Word app logo' }}
             header={<Text weight="semibold">Secret Project Briefing</Text>}
             description={<Caption1 className={styles.caption}>OneDrive &gt; Documents</Caption1>}
             action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} />}

From 1771a207cabc368ce1ab604091b5bd7122ac86d5 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 2 Feb 2023 18:46:37 +0100
Subject: [PATCH 7/9] docs: add examples of role list for card templates

---
 .../react-card/stories/Card/CardTemplates.stories.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx b/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx
index d5298cae8203dd..d451067532926e 100644
--- a/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx
@@ -149,8 +149,8 @@ export const Templates = () => {
         </CardPreview>
       </Card>
 
-      <div className={styles.grid}>
-        <Card className={styles.card} size="small">
+      <div className={styles.grid} role="list">
+        <Card className={styles.card} size="small" role="listitem">
           <CardHeader
             image={{ as: 'img', src: powerpointLogoURL, alt: 'PowerPoint app logo' }}
             header={<Text weight="semibold">Team Offsite 2020</Text>}
@@ -159,7 +159,7 @@ export const Templates = () => {
           />
         </Card>
 
-        <Card className={styles.card} size="small">
+        <Card className={styles.card} size="small" role="listitem">
           <CardHeader
             image={{ as: 'img', src: excelLogo, alt: 'Excel app logo' }}
             header={<Text weight="semibold">Team Budget</Text>}
@@ -168,7 +168,7 @@ export const Templates = () => {
           />
         </Card>
 
-        <Card className={styles.card} size="small">
+        <Card className={styles.card} size="small" role="listitem">
           <CardHeader
             image={{ as: 'img', src: wordLogo, alt: 'Word app logo' }}
             header={<Text weight="semibold">Secret Project Briefing</Text>}

From 83b886e4ddf67f99743e979909c1db6c4e7769e6 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 2 Feb 2023 20:47:28 +0100
Subject: [PATCH 8/9] fix: add changefile

---
 ...ui-react-card-24ad34ca-37f3-47a1-950e-00a89d618a76.json | 7 +++++++
 ...ui-react-card-81b33dd1-22a9-4f5c-bb0e-7bc28875611e.json | 6 ++++++
 ...ui-react-card-d23d41e3-2da0-4ca9-a6b8-06a1b10fe985.json | 7 +++++++
 3 files changed, 20 insertions(+)
 create mode 100644 change/@fluentui-react-card-24ad34ca-37f3-47a1-950e-00a89d618a76.json
 create mode 100644 change/@fluentui-react-card-81b33dd1-22a9-4f5c-bb0e-7bc28875611e.json
 create mode 100644 change/@fluentui-react-card-d23d41e3-2da0-4ca9-a6b8-06a1b10fe985.json

diff --git a/change/@fluentui-react-card-24ad34ca-37f3-47a1-950e-00a89d618a76.json b/change/@fluentui-react-card-24ad34ca-37f3-47a1-950e-00a89d618a76.json
new file mode 100644
index 00000000000000..e5c495773b01b5
--- /dev/null
+++ b/change/@fluentui-react-card-24ad34ca-37f3-47a1-950e-00a89d618a76.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: improve a11y of card storybook examples",
+  "packageName": "@fluentui/react-card",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-card-81b33dd1-22a9-4f5c-bb0e-7bc28875611e.json b/change/@fluentui-react-card-81b33dd1-22a9-4f5c-bb0e-7bc28875611e.json
new file mode 100644
index 00000000000000..38e19fc73980a0
--- /dev/null
+++ b/change/@fluentui-react-card-81b33dd1-22a9-4f5c-bb0e-7bc28875611e.json
@@ -0,0 +1,6 @@
+{
+  "type": "prerelease",
+  "packageName": "@fluentui/react-card",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-card-d23d41e3-2da0-4ca9-a6b8-06a1b10fe985.json b/change/@fluentui-react-card-d23d41e3-2da0-4ca9-a6b8-06a1b10fe985.json
new file mode 100644
index 00000000000000..e5c495773b01b5
--- /dev/null
+++ b/change/@fluentui-react-card-d23d41e3-2da0-4ca9-a6b8-06a1b10fe985.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: improve a11y of card storybook examples",
+  "packageName": "@fluentui/react-card",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "none"
+}

From 939355cff10c001fb84ced27e742b225a897685c Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 6 Feb 2023 14:46:39 +0100
Subject: [PATCH 9/9] fix: regenerate changefiles

---
 ...ui-react-card-81b33dd1-22a9-4f5c-bb0e-7bc28875611e.json | 6 ------
 ...i-react-card-b924c1a0-fd8f-451e-9edb-7633490f4256.json} | 0
 ...ui-react-card-d23d41e3-2da0-4ca9-a6b8-06a1b10fe985.json | 7 -------
 3 files changed, 13 deletions(-)
 delete mode 100644 change/@fluentui-react-card-81b33dd1-22a9-4f5c-bb0e-7bc28875611e.json
 rename change/{@fluentui-react-card-24ad34ca-37f3-47a1-950e-00a89d618a76.json => @fluentui-react-card-b924c1a0-fd8f-451e-9edb-7633490f4256.json} (100%)
 delete mode 100644 change/@fluentui-react-card-d23d41e3-2da0-4ca9-a6b8-06a1b10fe985.json

diff --git a/change/@fluentui-react-card-81b33dd1-22a9-4f5c-bb0e-7bc28875611e.json b/change/@fluentui-react-card-81b33dd1-22a9-4f5c-bb0e-7bc28875611e.json
deleted file mode 100644
index 38e19fc73980a0..00000000000000
--- a/change/@fluentui-react-card-81b33dd1-22a9-4f5c-bb0e-7bc28875611e.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "type": "prerelease",
-  "packageName": "@fluentui/react-card",
-  "email": "marcosvmmoura@gmail.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-card-24ad34ca-37f3-47a1-950e-00a89d618a76.json b/change/@fluentui-react-card-b924c1a0-fd8f-451e-9edb-7633490f4256.json
similarity index 100%
rename from change/@fluentui-react-card-24ad34ca-37f3-47a1-950e-00a89d618a76.json
rename to change/@fluentui-react-card-b924c1a0-fd8f-451e-9edb-7633490f4256.json
diff --git a/change/@fluentui-react-card-d23d41e3-2da0-4ca9-a6b8-06a1b10fe985.json b/change/@fluentui-react-card-d23d41e3-2da0-4ca9-a6b8-06a1b10fe985.json
deleted file mode 100644
index e5c495773b01b5..00000000000000
--- a/change/@fluentui-react-card-d23d41e3-2da0-4ca9-a6b8-06a1b10fe985.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "docs: improve a11y of card storybook examples",
-  "packageName": "@fluentui/react-card",
-  "email": "marcosvmmoura@gmail.com",
-  "dependentChangeType": "none"
-}