Merge pull request #851 from gympass/feat/improve-accessibility-from-…

…action-requirement-component feat(ActionRequirement): improve accessibility
gympass · Nov 27, 2024 · ad78e56 · ad78e56
2 parents 14c7d64 + d1ad094
commit ad78e56
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx b/packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx
@@ -73,11 +73,12 @@ function ActionRequirement(props) {
   defineCompoundComponents();
   return (
     <StyledActionRequirement {...props}>
-      {illustration && <BoxIllustration>{illustration}</BoxIllustration>}
-
+      {illustration && (
+        <BoxIllustration aria-hidden>{illustration}</BoxIllustration>
+      )}
       <Content>
         {titleAsTextDisplay ? (
-          <Text.Display2>{title}</Text.Display2>
+          <Text.Display2 as="h1">{title}</Text.Display2>
         ) : (
           <Title>{title}</Title>
         )}

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,
 })`
   ${({

diff --git a/packages/yoga/src/ActionRequirement/web/__snapshots__/ActionRequirement.test.jsx.snap b/packages/yoga/src/ActionRequirement/web/__snapshots__/ActionRequirement.test.jsx.snap
@@ -112,11 +112,11 @@ exports[`<ActionRequirement /> should default match snapshot 1`] = `
     <div
       class="c1"
     >
-      <p
+      <h1
         class="c2"
       >
         title
-      </p>
+      </h1>
       <p
         class="c3"
         color="deep"
@@ -271,11 +271,11 @@ exports[`<ActionRequirement /> should match snapshot with list 1`] = `
     <div
       class="c1"
     >
-      <p
+      <h1
         class="c2"
       >
         title
-      </p>
+      </h1>
       <p
         class="c3"
         color="deep"
@@ -418,11 +418,11 @@ exports[`<ActionRequirement /> should match snapshot with text display 1`] = `
     <div
       class="c1"
     >
-      <p
+      <h1
         class="c2"
       >
         title
-      </p>
+      </h1>
       <p
         class="c3"
         color="deep"