feat(ActionRequirement): improve accessibility

gympass · Nov 19, 2024 · b37f671 · b37f671
1 parent 4d34e4e
commit b37f671
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx b/packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx
@@ -73,15 +73,15 @@ function ActionRequirement(props) {
   defineCompoundComponents();
   return (
     <StyledActionRequirement {...props}>
-      {illustration && <BoxIllustration>{illustration}</BoxIllustration>}
+      {illustration && <BoxIllustration aria-hidden="true">{illustration}</BoxIllustration>}
 
       <Content>
         {titleAsTextDisplay ? (
-          <Text.Display2>{title}</Text.Display2>
+          <Text.Display2 as="h1" aria-label={title} tabIndex={0}>{title}</Text.Display2>
         ) : (
-          <Title>{title}</Title>
+          <Title aria-label={title} tabIndex={0}>{title}</Title>
         )}
-        <Text.Body1 mt="small" color="deep">
+        <Text.Body1 mt="small" color="deep" aria-label={description} tabIndex={0}>
           {description}
         </Text.Body1>
         {list && <Box mt="large">{list}</Box>}

diff --git a/packages/yoga/src/ActionRequirement/web/ActionRequirementStyles.js b/packages/yoga/src/ActionRequirement/web/ActionRequirementStyles.js
@@ -5,7 +5,7 @@ import Box from '../../Box';
 import Button from '../../Button';
 
 export const Title = styled(Text.H4).attrs({
-  as: 'p',
+  as: 'h1',
   bold: true,
 })`
   ${({