From 83eb3662ba66f95cbcb9c2eba04bdddb634148a3 Mon Sep 17 00:00:00 2001
From: Yvonne Tang <ytang2@stanford.edu>
Date: Tue, 12 Mar 2024 14:20:39 -0700
Subject: [PATCH] Accessible headings; remove isSmallHeading prop

---
 components/DataCard/DataCard.tsx    | 7 +++++--
 components/Storyblok/SbDataCard.tsx | 2 --
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/DataCard/DataCard.tsx b/components/DataCard/DataCard.tsx
index 1f04dc19..2cd842ad 100644
--- a/components/DataCard/DataCard.tsx
+++ b/components/DataCard/DataCard.tsx
@@ -11,7 +11,6 @@ import * as styles from './DataCard.styles';
 export type DataCardProps = React.HTMLAttributes<HTMLDivElement> & {
   heading?: string;
   headingLevel?: HeadingType;
-  isSmallHeading?: boolean;
   isDarkTheme?: boolean;
   barColor?: AccentBorderColorType;
   body?: React.ReactNode;
@@ -27,7 +26,6 @@ export type DataCardProps = React.HTMLAttributes<HTMLDivElement> & {
 export const DataCard = ({
   heading,
   headingLevel = 'h3',
-  isSmallHeading,
   barColor,
   body,
   cta,
@@ -53,6 +51,10 @@ export const DataCard = ({
         {...props}
       >
         <FlexBox direction="col" className={styles.flex}>
+          {/* If number counter is enabled, aria-hidden the animated heading and add a SR only heading */}
+          {isCounter && heading && (
+            <Heading as={headingLevel} srOnly>{heading}</Heading>
+          )}
           {heading && (
             <Heading
               as={headingLevel}
@@ -60,6 +62,7 @@ export const DataCard = ({
               leading="druk"
               color={isDarkTheme ? 'white' : 'black'}
               size="f5"
+              aria-hidden={isCounter}
               className={styles.heading}
             >
               {isCounter ? (
diff --git a/components/Storyblok/SbDataCard.tsx b/components/Storyblok/SbDataCard.tsx
index 20e002a8..fd02611f 100644
--- a/components/Storyblok/SbDataCard.tsx
+++ b/components/Storyblok/SbDataCard.tsx
@@ -35,7 +35,6 @@ export const SbDataCard = ({
   blok: {
     heading,
     headingLevel,
-    isSmallHeading,
     body,
     cta,
     paddingTop,
@@ -56,7 +55,6 @@ export const SbDataCard = ({
       {...storyblokEditable(blok)}
       heading={heading}
       headingLevel={headingLevel}
-      isSmallHeading={isSmallHeading}
       isDarkTheme={isDarkTheme}
       isCounter={isCounter}
       counterDuration={counterDuration}