docs: Card examples and docs should include headings (microsoft#34943)

Author: smhigley

packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx

@@ -10,6 +10,7 @@ import {
   Link,
   makeStyles,
   Subtitle1,
+  Text,
   tokens,
 } from '@fluentui/react-components';
 import { MoreHorizontal20Regular, Open16Regular } from '@fluentui/react-icons';
@@ -111,8 +112,8 @@ export const WithAction = () => {
           <CardHeader
             image={<img src={resolveAsset('pptx.png')} width="32px" height="32px" alt="Microsoft PowerPoint logo" />}
             header={
-              <Body1>
-                <b>App Name</b>
+              <Body1 as="h5" style={{ margin: 0, fontWeight: 'bold' }}>
+                App Name
               </Body1>
             }
             description={<Caption1>Developer</Caption1>}
@@ -145,9 +146,11 @@ export const WithAction = () => {
           <CardHeader
             image={<img src={resolveAsset('pptx.png')} width="32px" height="32px" alt="Microsoft PowerPoint logo" />}
             header={
-              <Link href="https://www.microsoft.com/" target="_blank" ref={linkRef} className={styles.link}>
-                <b>App Name</b>
-              </Link>
+              <Text as="h5" style={{ margin: 0 }}>
+                <Link href="https://www.microsoft.com/" target="_blank" ref={linkRef} className={styles.link}>
+                  <b>App Name</b>
+                </Link>
+              </Text>
             }
             description={<Caption1>Developer</Caption1>}
             action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}

packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx

@@ -70,7 +70,11 @@ const CardExample = ({ className, ...props }: CardProps) => {
     <Card {...props} className={mergeClasses(className, styles.card)} onClick={onClick}>
       <CardHeader
         image={<img className={styles.logo} src={resolveAsset('app_logo.svg')} alt="App name logo" />}
-        header={<Text weight="semibold">App Name</Text>}
+        header={
+          <Text as="h5" style={{ margin: 0 }} weight="semibold">
+            App Name
+          </Text>
+        }
         description={<Caption1 className={styles.caption}>Developer</Caption1>}
         action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
       />

packages/react-components/react-card/stories/src/Card/CardBestPractices.md

@@ -3,4 +3,5 @@
 ### Accessibility
 
 - By default, each card is of role="group".
-- Provide meaningful `aria-label`, `aria-describedby` and `aria-labelledby` whenever needed, especially for selectable cards.
+- If the Card is focusable (any `focusMode` aside from `off`), provide a meaningful `aria-label` or `aria-labelledby` and `aria-describedby` that includes all relevant internal text content.
+- For larger Cards that have a single title, use a heading tag to wrap the title text. The specific heading level should be determined by the specific context in which it is used.

packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx

@@ -64,8 +64,8 @@ const CardExample = (props: CardProps) => {
       <CardHeader
         image={<img src={resolveAsset('pptx.png')} width="32px" height="32px" alt="Microsoft PowerPoint logo" />}
         header={
-          <Body1>
-            <b>App Name</b>
+          <Body1 as="h5" style={{ margin: 0, fontWeight: 'bold' }}>
+            App Name
           </Body1>
         }
         description={<Caption1>Developer</Caption1>}

packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx

@@ -70,7 +70,11 @@ export const Orientation = () => {
         <Card className={styles.card}>
           <CardHeader
             image={<img className={styles.headerImage} src={resolveAsset('app_logo.svg')} alt="App Name Document" />}
-            header={<Text weight="semibold">App Name</Text>}
+            header={
+              <Text as="h5" weight="semibold" style={{ margin: 0 }}>
+                App Name
+              </Text>
+            }
             description={<Caption1 className={styles.caption}>Developer</Caption1>}
             action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
           />

packages/react-components/react-card/stories/src/Card/CardSize.stories.tsx

@@ -69,7 +69,11 @@ const CardExample = (props: CardProps) => {
       </header>
 
       <CardHeader
-        header={<Text weight="semibold">Alert in Teams when a new document is uploaded in channel</Text>}
+        header={
+          <Text as="h5" weight="semibold" style={{ margin: 0 }}>
+            Alert in Teams when a new document is uploaded in channel
+          </Text>
+        }
         description={<Caption1 className={styles.caption}>By Microsoft</Caption1>}
       />