test: update snapshots

gympass · Sep 6, 2023 · 5ee9d86 · 5ee9d86
1 parent 23ef347
commit 5ee9d86
Show file tree

Hide file tree

Showing 20 changed files with 91 additions and 88 deletions.
diff --git a/packages/yoga/src/Avatar/native/__snapshots__/Avatar.test.jsx.snap b/packages/yoga/src/Avatar/native/__snapshots__/Avatar.test.jsx.snap
@@ -88,6 +88,7 @@ exports[`<Avatar /> should match snapshot in circle avatar 1`] = `
   width={48}
 >
   <RNSVGSvgView
+    aria-hidden={true}
     bbHeight="50%"
     bbWidth="50%"
     fill="#FFFFFF"
@@ -201,6 +202,7 @@ exports[`<Avatar /> should match snapshot in circle avatar with placeholder prop
   width={48}
 >
   <RNSVGSvgView
+    aria-hidden={true}
     bbHeight="50%"
     bbWidth="50%"
     fill="#FFFFFF"
@@ -313,6 +315,7 @@ exports[`<Avatar /> should match snapshot in default avatar 1`] = `
   width={78}
 >
   <RNSVGSvgView
+    aria-hidden={true}
     bbHeight="50%"
     bbWidth="50%"
     fill="black"
@@ -426,6 +429,7 @@ exports[`<Avatar /> should match snapshot in default avatar with placeholder pro
   width={48}
 >
   <RNSVGSvgView
+    aria-hidden={true}
     bbHeight="50%"
     bbWidth="50%"
     fill="#FFFFFF"

diff --git a/packages/yoga/src/Avatar/web/__snapshots__/Avatar.test.jsx.snap b/packages/yoga/src/Avatar/web/__snapshots__/Avatar.test.jsx.snap
@@ -75,6 +75,7 @@ exports[`<Avatar /> should match snapshot in circle avatar 1`] = `
     width="48"
   >
     <svg
+      aria-hidden="true"
       class="c1"
       fill="#FFFFFF"
       height="50%"
@@ -121,6 +122,7 @@ exports[`<Avatar /> should match snapshot in circle avatar with placeholder prop
     width="48"
   >
     <svg
+      aria-hidden="true"
       class="c1"
       fill="#FFFFFF"
       height="50%"
@@ -211,6 +213,7 @@ exports[`<Avatar /> should match snapshot in default avatar 1`] = `
     width="78"
   >
     <svg
+      aria-hidden="true"
       class="c1"
       fill="black"
       height="50%"
@@ -257,6 +260,7 @@ exports[`<Avatar /> should match snapshot in default avatar with placeholder pro
     width="48"
   >
     <svg
+      aria-hidden="true"
       class="c1"
       fill="#FFFFFF"
       height="50%"

diff --git a/packages/yoga/src/Banner/native/__snapshots__/Banner.test.jsx.snap b/packages/yoga/src/Banner/native/__snapshots__/Banner.test.jsx.snap
@@ -422,6 +422,7 @@ exports[`<Banner /> should match snapshot with icon 1`] = `
     }
   >
     <RNSVGSvgView
+      aria-hidden={true}
       bbHeight={20}
       bbWidth={20}
       fill="#231B22"

diff --git a/packages/yoga/src/Banner/web/__snapshots__/Banner.test.jsx.snap b/packages/yoga/src/Banner/web/__snapshots__/Banner.test.jsx.snap
@@ -429,6 +429,7 @@ exports[`<Banner /> should match snapshot with icon 1`] = `
       display="flex"
     >
       <svg
+        aria-hidden="true"
         class="c2"
         fill="#231B22"
         height="20"

diff --git a/packages/yoga/src/Button/native/__snapshots__/Button.test.jsx.snap b/packages/yoga/src/Button/native/__snapshots__/Button.test.jsx.snap
@@ -266,6 +266,7 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
     }
   >
     <RNSVGSvgView
+      aria-hidden={true}
       bbHeight={24}
       bbWidth={24}
       fill="#6B6B78"
@@ -1277,6 +1278,7 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
     }
   >
     <RNSVGSvgView
+      aria-hidden={true}
       bbHeight={24}
       bbWidth={24}
       fill="#D8385E"
@@ -1603,6 +1605,7 @@ exports[`<Button /> Snapshots primary buttons With large prop should match snaps
     }
   >
     <RNSVGSvgView
+      aria-hidden={true}
       bbHeight={24}
       bbWidth={24}
       fill="#FFFFFF"
@@ -3247,6 +3250,7 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
     }
   >
     <RNSVGSvgView
+      aria-hidden={true}
       bbHeight={24}
       bbWidth={24}
       fill="#231B22"
@@ -3575,6 +3579,7 @@ exports[`<Button /> Snapshots secondary buttons With large prop should match sna
     }
   >
     <RNSVGSvgView
+      aria-hidden={true}
       bbHeight={24}
       bbWidth={24}
       fill="#FFFFFF"
@@ -4340,6 +4345,7 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
     }
   >
     <RNSVGSvgView
+      aria-hidden={true}
       bbHeight={24}
       bbWidth={24}
       fill="#FFFFFF"

diff --git a/packages/yoga/src/Button/web/__snapshots__/Button.test.jsx.snap b/packages/yoga/src/Button/web/__snapshots__/Button.test.jsx.snap
@@ -687,6 +687,7 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
     disabled=""
   >
     <svg
+      aria-hidden="true"
       class="c1"
       height="24"
       width="24"
@@ -1581,6 +1582,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
     disabled=""
   >
     <svg
+      aria-hidden="true"
       class="c1"
       height="24"
       width="24"
@@ -3119,6 +3121,7 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
     class="c0"
   >
     <svg
+      aria-hidden="true"
       class="c1"
       height="24"
       width="24"
@@ -4030,6 +4033,7 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
     class="c0"
   >
     <svg
+      aria-hidden="true"
       class="c1"
       height="16"
       width="16"
@@ -4732,6 +4736,7 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
     class="c0"
   >
     <svg
+      aria-hidden="true"
       class="c1"
       height="24"
       width="24"
@@ -6225,6 +6230,7 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
     class="c0"
   >
     <svg
+      aria-hidden="true"
       class="c1"
       height="24"
       width="24"
@@ -7286,6 +7292,7 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
     class="c0"
   >
     <svg
+      aria-hidden="true"
       class="c1"
       height="16"
       width="16"
@@ -7988,6 +7995,7 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
     class="c0"
   >
     <svg
+      aria-hidden="true"
       class="c1"
       height="24"
       width="24"

diff --git a/packages/yoga/src/Card/native/PlanCard/__snapshots__/PlanCard.test.jsx.snap b/packages/yoga/src/Card/native/PlanCard/__snapshots__/PlanCard.test.jsx.snap
@@ -275,6 +275,7 @@ exports[`<PlanCard /> Snapshots should match snapshot with default PlanCard 1`]
               }
             >
               <RNSVGSvgView
+                aria-hidden={true}
                 bbHeight={16}
                 bbWidth={16}
                 focusable={false}
@@ -402,6 +403,7 @@ exports[`<PlanCard /> Snapshots should match snapshot with default PlanCard 1`]
               }
             >
               <RNSVGSvgView
+                aria-hidden={true}
                 bbHeight={16}
                 bbWidth={16}
                 fill="#231B22"

diff --git a/packages/yoga/src/Card/web/PlanCard/__snapshots__/PlanCard.test.jsx.snap b/packages/yoga/src/Card/web/PlanCard/__snapshots__/PlanCard.test.jsx.snap
@@ -384,6 +384,7 @@ exports[`<PlanCard /> Snapshots should match snapshot with default PlanCard 1`]
               class="c15"
             >
               <svg
+                aria-hidden="true"
                 class="c16"
                 height="16"
                 stroke="#9898A6"
@@ -1149,6 +1150,7 @@ exports[`<PlanCard /> Snapshots should render list item content as button 1`] =
               class="c15"
             >
               <svg
+                aria-hidden="true"
                 class="c16"
                 height="16"
                 stroke="#9898A6"

diff --git a/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap b/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap
@@ -446,6 +446,7 @@ exports[`<Dialog /> should match snapshot with close button 1`] = `
               class="c4"
             >
               <svg
+                aria-hidden="true"
                 class="c5"
                 height="24"
                 width="24"

diff --git a/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap b/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap
@@ -101,6 +101,7 @@ exports[`<Feedback /> should render correctly when not centered vertically 1`] =
         class="c1"
       >
         <svg
+          aria-hidden="true"
           class="c2"
           data-testid="feedback-icon"
           fill="#1D856C"
@@ -141,6 +142,7 @@ exports[`<Feedback /> should render the icon for attention variant 1`] = `
 }
 
 <svg
+  aria-hidden="true"
   class="c0"
   data-testid="feedback-icon"
   fill="#FF874C"
@@ -158,6 +160,7 @@ exports[`<Feedback /> should render the icon for informative variant 1`] = `
 }
 
 <svg
+  aria-hidden="true"
   class="c0"
   data-testid="feedback-icon"
   fill="#5340C9"
@@ -175,6 +178,7 @@ exports[`<Feedback /> should render the icon for success variant 1`] = `
 }
 
 <svg
+  aria-hidden="true"
   class="c0"
   data-testid="feedback-icon"
   fill="#1D856C"

diff --git a/packages/yoga/src/Heading/web/__snapshots__/Heading.test.jsx.snap b/packages/yoga/src/Heading/web/__snapshots__/Heading.test.jsx.snap
@@ -166,6 +166,7 @@ exports[`<Heading /> should match snapshot no padding 1`] = `
       class="c1 c2"
     >
       <svg
+        aria-hidden="true"
         class="c3"
         height="24"
         width="24"
@@ -189,6 +190,7 @@ exports[`<Heading /> should match snapshot no padding 1`] = `
         class="c1 c7"
       >
         <svg
+          aria-hidden="true"
           class="c3"
           height="24"
           width="24"
@@ -370,6 +372,7 @@ exports[`<Heading /> should match snapshot with all components 1`] = `
       class="c1 c2"
     >
       <svg
+        aria-hidden="true"
         class="c3"
         height="24"
         width="24"
@@ -393,6 +396,7 @@ exports[`<Heading /> should match snapshot with all components 1`] = `
         class="c1 c7"
       >
         <svg
+          aria-hidden="true"
           class="c3"
           height="24"
           width="24"
@@ -559,6 +563,7 @@ exports[`<Heading /> should match snapshot with back button 1`] = `
       class="c1 c2"
     >
       <svg
+        aria-hidden="true"
         class="c3"
         height="24"
         width="24"
@@ -832,6 +837,7 @@ exports[`<Heading /> should match snapshot with title and back button 1`] = `
       class="c1 c2"
     >
       <svg
+        aria-hidden="true"
         class="c3"
         height="24"
         width="24"

diff --git a/packages/yoga/src/Icon/Icon.jsx b/packages/yoga/src/Icon/Icon.jsx
@@ -28,12 +28,21 @@ const Icon = ({
   const componentWithTitle = propsTitle => {
     const titleId = `${ariaLabel}-titleId`;
     let ariaDescribedBy = titleId;
-    const titleElement = <title id={titleId}>{title}</title>;
+    const titleElement = (
+      <title id={titleId} key={titleId}>
+        {title}
+      </title>
+    );
+
     let svgChildren = [titleElement];
 
     if (description) {
       const descId = `${ariaLabel}-descId`;
-      const descElement = <desc id={descId}>{description}</desc>;
+      const descElement = (
+        <desc id={descId} key={descId}>
+          {description}
+        </desc>
+      );
 
       ariaDescribedBy += ` ${descId}`;
 
@@ -58,7 +67,7 @@ const Icon = ({
 
   return (
     <Box
-      as={title ? componentWithTitle : Component}
+      as={title && ariaLabel ? componentWithTitle : Component}
       width={get(theme.yoga.spacing, width, width)}
       height={get(theme.yoga.spacing, height, height)}
       {...(fill && { fill: get(theme.yoga.colors, fill, fill) })}
@@ -99,35 +108,35 @@ Icon.propTypes = {
    */
   description: string,
   /** Text used as identifier for aria-describedby, title and description */
-  ariaLabel: string,
-  /** Horizontal size of the SVG. Use it as one of
-   * theme.spacing tokens (xxsmall, small, medium...) */
-  width: oneOfType([oneOf(commonSizes), string, number]),
-  /** Vertical size of the SVG. Use it as one of
-   * theme.spacing tokens (xxsmall, small, medium...) */
-  height: oneOfType([oneOf(commonSizes), string, number]),
-  /** Size for vertical and horizontal of the SVG.
-   * Use it as one of theme.spacing tokens (xxsmall, small, medium...) */
-  size: (props, propName, componentName) => {
-    const { size, width, height } = props;
+  ariaLabel: (props, propName, componentName) => {
+    const { title, ariaLabel } = props;
 
-    if (size && (width || height)) {
+    if (title && !ariaLabel) {
       return new Error(
-        `you must use only ${propName}, alone, or width and/or height in ${componentName}`,
+        `accessible elements, such as title, must receive the ${propName} property as an identifier.`,
       );
     }
 
     checkPropTypes(
       {
-        [propName]: oneOfType([oneOf(commonSizes), string, number]),
+        [propName]: string,
       },
-      { size },
+      { ariaLabel },
       'prop',
       componentName,
     );
 
     return null;
   },
+  /** Horizontal size of the SVG. Use it as one of
+   * theme.spacing tokens (xxsmall, small, medium...) */
+  width: oneOfType([oneOf(commonSizes), string, number]),
+  /** Vertical size of the SVG. Use it as one of
+   * theme.spacing tokens (xxsmall, small, medium...) */
+  height: oneOfType([oneOf(commonSizes), string, number]),
+  /** Size for vertical and horizontal of the SVG.
+   * Use it as one of theme.spacing tokens (xxsmall, small, medium...) */
+  size: oneOfType([oneOf(commonSizes), string, number]),
 };
 
 Icon.defaultProps = {