Accessible headings; remove isSmallHeading prop

SU-SWS · Mar 12, 2024 · 83eb366 · 83eb366
1 parent 7df2e00
commit 83eb366
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git 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,13 +51,18 @@ 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}
               font="druk"
               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
@@ -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}