From 4252e7feb2decf4f4757e160b0e0eb91b784363e Mon Sep 17 00:00:00 2001
From: Flavia Moraes <ext.flavia.moraes@gympass.com>
Date: Wed, 30 Aug 2023 10:00:26 -0300
Subject: [PATCH 1/5] feat: add accessibility elements to icon

---
 packages/yoga/src/Icon/Icon.jsx | 59 +++++++++++++++++++++++++++------
 1 file changed, 48 insertions(+), 11 deletions(-)

diff --git a/packages/yoga/src/Icon/Icon.jsx b/packages/yoga/src/Icon/Icon.jsx
index e70ef3c8b7..11222affa4 100644
--- a/packages/yoga/src/Icon/Icon.jsx
+++ b/packages/yoga/src/Icon/Icon.jsx
@@ -20,17 +20,43 @@ const Icon = ({
   fill,
   stroke,
   theme,
+  title,
+  description,
+  ariaLabel,
   ...props
-}) => (
-  <Box
-    as={Component}
-    width={get(theme.yoga.spacing, width, width)}
-    height={get(theme.yoga.spacing, height, height)}
-    {...(fill && { fill: get(theme.yoga.colors, fill, fill) })}
-    {...(stroke && { stroke: get(theme.yoga.colors, stroke, stroke) })}
-    {...props}
-  />
-);
+}) => {
+  const withTitle = propsTitle => {
+    const defaultProps = {
+      width: '12',
+      height: '12',
+      viewBox: '0 0 12 12',
+      role: 'img',
+    };
+    const titleElement = <title>{title}</title>;
+    const descElement = <desc>{description}</desc>;
+
+    const newSvg = React.createElement(
+      'svg',
+      { ...propsTitle, ...defaultProps },
+      titleElement,
+      descElement,
+      Component().props.children,
+    );
+
+    return newSvg;
+  };
+
+  return (
+    <Box
+      as={title ? withTitle : Component}
+      width={get(theme.yoga.spacing, width, width)}
+      height={get(theme.yoga.spacing, height, height)}
+      {...(fill && { fill: get(theme.yoga.colors, fill, fill) })}
+      {...(stroke && { stroke: get(theme.yoga.colors, stroke, stroke) })}
+      {...props}
+    />
+  );
+};
 
 const commonSizes = [
   'xxxsmall',
@@ -55,6 +81,14 @@ Icon.propTypes = {
   /** Stroke color. Use it as one of theme.colors
    * tokens (vibin, neutral, stamina...) */
   stroke: string,
+  /** Text that will be displayed in the title element, used for accessibility */
+  title: string,
+  /** Text used as element description, used for accessibility.
+   * A title must be given in order to use description corretly.
+   */
+  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]),
@@ -88,7 +122,10 @@ Icon.propTypes = {
 Icon.defaultProps = {
   fill: undefined,
   stroke: undefined,
-  width: undefined,
+  title: 'teste',
+  description: 'teste description',
+  ariaLabel: 'label test',
+  width: 30,
   height: undefined,
   size: undefined,
 };

From 55ad2e551349df616620df3f582c0fad2ad2c792 Mon Sep 17 00:00:00 2001
From: Flavia Moraes <ext.flavia.moraes@gympass.com>
Date: Fri, 1 Sep 2023 11:58:43 -0300
Subject: [PATCH 2/5] feat: description adjustments

---
 packages/yoga/src/Icon/Icon.jsx | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/yoga/src/Icon/Icon.jsx b/packages/yoga/src/Icon/Icon.jsx
index 11222affa4..eee5db08ba 100644
--- a/packages/yoga/src/Icon/Icon.jsx
+++ b/packages/yoga/src/Icon/Icon.jsx
@@ -26,20 +26,30 @@ const Icon = ({
   ...props
 }) => {
   const withTitle = propsTitle => {
+    const titleId = `${ariaLabel}-titleId`;
+    let ariaDescribedBy = titleId;
+    const titleElement = <title id={titleId}>{title}</title>;
+    let svgChildren = [titleElement];
+
+    if (description) {
+      const descId = `${ariaLabel}-descId`;
+      const descElement = <desc id={descId}>{description}</desc>;
+
+      ariaDescribedBy += ` ${descId}`;
+
+      svgChildren = [...svgChildren, descElement];
+    }
+
     const defaultProps = {
-      width: '12',
-      height: '12',
       viewBox: '0 0 12 12',
       role: 'img',
+      'aria-describedby': ariaDescribedBy,
     };
-    const titleElement = <title>{title}</title>;
-    const descElement = <desc>{description}</desc>;
 
     const newSvg = React.createElement(
       'svg',
       { ...propsTitle, ...defaultProps },
-      titleElement,
-      descElement,
+      svgChildren,
       Component().props.children,
     );
 
@@ -54,6 +64,7 @@ const Icon = ({
       {...(fill && { fill: get(theme.yoga.colors, fill, fill) })}
       {...(stroke && { stroke: get(theme.yoga.colors, stroke, stroke) })}
       {...props}
+      aria-hidden={title ? undefined : true}
     />
   );
 };
@@ -122,12 +133,12 @@ Icon.propTypes = {
 Icon.defaultProps = {
   fill: undefined,
   stroke: undefined,
-  title: 'teste',
-  description: 'teste description',
-  ariaLabel: 'label test',
-  width: 30,
+  title: undefined,
+  description: undefined,
+  ariaLabel: undefined,
+  width: undefined,
   height: undefined,
-  size: undefined,
+  size: 12,
 };
 
 export default withTheme(Icon);

From 97518b170ac991bc1f127e20c18bed22185b712d Mon Sep 17 00:00:00 2001
From: Flavia Moraes <ext.flavia.moraes@gympass.com>
Date: Tue, 5 Sep 2023 10:15:53 -0300
Subject: [PATCH 3/5] test: add tests

---
 packages/yoga/src/Icon/Icon.jsx               |  4 +-
 packages/yoga/src/Icon/native/Icon.test.jsx   | 17 +++++++++
 .../native/__snapshots__/Icon.test.jsx.snap   | 38 +++++++++++++++++++
 packages/yoga/src/Icon/web/Icon.test.jsx      | 17 +++++++++
 .../Icon/web/__snapshots__/Icon.test.jsx.snap | 38 +++++++++++++++++++
 5 files changed, 112 insertions(+), 2 deletions(-)

diff --git a/packages/yoga/src/Icon/Icon.jsx b/packages/yoga/src/Icon/Icon.jsx
index eee5db08ba..4c26522b7a 100644
--- a/packages/yoga/src/Icon/Icon.jsx
+++ b/packages/yoga/src/Icon/Icon.jsx
@@ -25,7 +25,7 @@ const Icon = ({
   ariaLabel,
   ...props
 }) => {
-  const withTitle = propsTitle => {
+  const componentWithTitle = propsTitle => {
     const titleId = `${ariaLabel}-titleId`;
     let ariaDescribedBy = titleId;
     const titleElement = <title id={titleId}>{title}</title>;
@@ -58,7 +58,7 @@ const Icon = ({
 
   return (
     <Box
-      as={title ? withTitle : Component}
+      as={title ? componentWithTitle : Component}
       width={get(theme.yoga.spacing, width, width)}
       height={get(theme.yoga.spacing, height, height)}
       {...(fill && { fill: get(theme.yoga.colors, fill, fill) })}
diff --git a/packages/yoga/src/Icon/native/Icon.test.jsx b/packages/yoga/src/Icon/native/Icon.test.jsx
index 55baf83c68..fa960c3167 100644
--- a/packages/yoga/src/Icon/native/Icon.test.jsx
+++ b/packages/yoga/src/Icon/native/Icon.test.jsx
@@ -45,4 +45,21 @@ describe('Snapshots', () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('should match snapshot with accessible props', () => {
+    const { toJSON } = render(
+      <ThemeProvider>
+        <Icon
+          as={Circle}
+          size="small"
+          fill="stamina"
+          title="Circle icon"
+          description="This is a circular icon"
+          ariaLabel="circleIcon"
+        />
+      </ThemeProvider>,
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/packages/yoga/src/Icon/native/__snapshots__/Icon.test.jsx.snap b/packages/yoga/src/Icon/native/__snapshots__/Icon.test.jsx.snap
index c4a71e9005..6917a5536d 100644
--- a/packages/yoga/src/Icon/native/__snapshots__/Icon.test.jsx.snap
+++ b/packages/yoga/src/Icon/native/__snapshots__/Icon.test.jsx.snap
@@ -2,6 +2,7 @@
 
 exports[`Snapshots should match snapshot 1`] = `
 <svg
+  aria-hidden={true}
   fill="#231B22"
   height={16}
   style={
@@ -22,8 +23,44 @@ exports[`Snapshots should match snapshot 1`] = `
 </svg>
 `;
 
+exports[`Snapshots should match snapshot whit acessible props 1`] = `
+<svg
+  aria-describedby="circleIcon-titleId circleIcon-descId"
+  fill="#231B22"
+  height={16}
+  role="img"
+  style={
+    [
+      {
+        "height": 16,
+        "width": 16,
+      },
+    ]
+  }
+  viewBox="0 0 12 12"
+  width={16}
+>
+  <title
+    id="circleIcon-titleId"
+  >
+    Circle icon
+  </title>
+  <desc
+    id="circleIcon-descId"
+  >
+    This is a circular icon
+  </desc>
+  <circle
+    cx="16"
+    cy="16"
+    r="16"
+  />
+</svg>
+`;
+
 exports[`Snapshots should match snapshot with size prop 1`] = `
 <svg
+  aria-hidden={true}
   fill="#231B22"
   height={16}
   style={
@@ -46,6 +83,7 @@ exports[`Snapshots should match snapshot with size prop 1`] = `
 
 exports[`Snapshots should match snapshot with system props 1`] = `
 <svg
+  aria-hidden={true}
   elevation="medium"
   fill="#231B22"
   height={16}
diff --git a/packages/yoga/src/Icon/web/Icon.test.jsx b/packages/yoga/src/Icon/web/Icon.test.jsx
index cceb6f9e31..c75458a5f9 100644
--- a/packages/yoga/src/Icon/web/Icon.test.jsx
+++ b/packages/yoga/src/Icon/web/Icon.test.jsx
@@ -45,4 +45,21 @@ describe('Snapshots', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  it('should match snapshot with acessible props', () => {
+    const { container } = render(
+      <ThemeProvider>
+        <Icon
+          as={Circle}
+          size="small"
+          fill="stamina"
+          title="Circle icon"
+          description="This is a circular icon"
+          ariaLabel="circleIcon"
+        />
+      </ThemeProvider>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/packages/yoga/src/Icon/web/__snapshots__/Icon.test.jsx.snap b/packages/yoga/src/Icon/web/__snapshots__/Icon.test.jsx.snap
index 585cef42c9..d9e503ed27 100644
--- a/packages/yoga/src/Icon/web/__snapshots__/Icon.test.jsx.snap
+++ b/packages/yoga/src/Icon/web/__snapshots__/Icon.test.jsx.snap
@@ -8,6 +8,7 @@ exports[`Snapshots should match snapshot 1`] = `
 
 <div>
   <svg
+    aria-hidden="true"
     class="c0"
     fill="#231B22"
     height="16"
@@ -22,6 +23,41 @@ exports[`Snapshots should match snapshot 1`] = `
 </div>
 `;
 
+exports[`Snapshots should match snapshot when acessible props is passed 1`] = `
+.c0 {
+  width: 16px;
+  height: 16px;
+}
+
+<div>
+  <svg
+    aria-describedby="circleIcon-titleId circleIcon-descId"
+    class="c0"
+    fill="#231B22"
+    height="16"
+    role="img"
+    viewBox="0 0 12 12"
+    width="16"
+  >
+    <title
+      id="circleIcon-titleId"
+    >
+      Circle icon
+    </title>
+    <desc
+      id="circleIcon-descId"
+    >
+      This is a circular icon
+    </desc>
+    <circle
+      cx="16"
+      cy="16"
+      r="16"
+    />
+  </svg>
+</div>
+`;
+
 exports[`Snapshots should match snapshot with size prop 1`] = `
 .c0 {
   width: 16px;
@@ -30,6 +66,7 @@ exports[`Snapshots should match snapshot with size prop 1`] = `
 
 <div>
   <svg
+    aria-hidden="true"
     class="c0"
     fill="#231B22"
     height="16"
@@ -54,6 +91,7 @@ exports[`Snapshots should match snapshot with system props 1`] = `
 
 <div>
   <svg
+    aria-hidden="true"
     class="c0"
     elevation="medium"
     fill="#231B22"

From 23ef347d71bf6efec069a2df4d28520d9fa1bc8a Mon Sep 17 00:00:00 2001
From: Flavia Moraes <ext.flavia.moraes@gympass.com>
Date: Tue, 5 Sep 2023 10:20:24 -0300
Subject: [PATCH 4/5] test: missing snapshots

---
 .../native/__snapshots__/Icon.test.jsx.snap   | 35 +++++++++++++++++++
 .../Icon/web/__snapshots__/Icon.test.jsx.snap | 35 +++++++++++++++++++
 2 files changed, 70 insertions(+)

diff --git a/packages/yoga/src/Icon/native/__snapshots__/Icon.test.jsx.snap b/packages/yoga/src/Icon/native/__snapshots__/Icon.test.jsx.snap
index 6917a5536d..b0891aeac2 100644
--- a/packages/yoga/src/Icon/native/__snapshots__/Icon.test.jsx.snap
+++ b/packages/yoga/src/Icon/native/__snapshots__/Icon.test.jsx.snap
@@ -58,6 +58,41 @@ exports[`Snapshots should match snapshot whit acessible props 1`] = `
 </svg>
 `;
 
+exports[`Snapshots should match snapshot with accessible props 1`] = `
+<svg
+  aria-describedby="circleIcon-titleId circleIcon-descId"
+  fill="#231B22"
+  height={16}
+  role="img"
+  style={
+    [
+      {
+        "height": 16,
+        "width": 16,
+      },
+    ]
+  }
+  viewBox="0 0 12 12"
+  width={16}
+>
+  <title
+    id="circleIcon-titleId"
+  >
+    Circle icon
+  </title>
+  <desc
+    id="circleIcon-descId"
+  >
+    This is a circular icon
+  </desc>
+  <circle
+    cx="16"
+    cy="16"
+    r="16"
+  />
+</svg>
+`;
+
 exports[`Snapshots should match snapshot with size prop 1`] = `
 <svg
   aria-hidden={true}
diff --git a/packages/yoga/src/Icon/web/__snapshots__/Icon.test.jsx.snap b/packages/yoga/src/Icon/web/__snapshots__/Icon.test.jsx.snap
index d9e503ed27..e168b22bea 100644
--- a/packages/yoga/src/Icon/web/__snapshots__/Icon.test.jsx.snap
+++ b/packages/yoga/src/Icon/web/__snapshots__/Icon.test.jsx.snap
@@ -58,6 +58,41 @@ exports[`Snapshots should match snapshot when acessible props is passed 1`] = `
 </div>
 `;
 
+exports[`Snapshots should match snapshot with acessible props 1`] = `
+.c0 {
+  width: 16px;
+  height: 16px;
+}
+
+<div>
+  <svg
+    aria-describedby="circleIcon-titleId circleIcon-descId"
+    class="c0"
+    fill="#231B22"
+    height="16"
+    role="img"
+    viewBox="0 0 12 12"
+    width="16"
+  >
+    <title
+      id="circleIcon-titleId"
+    >
+      Circle icon
+    </title>
+    <desc
+      id="circleIcon-descId"
+    >
+      This is a circular icon
+    </desc>
+    <circle
+      cx="16"
+      cy="16"
+      r="16"
+    />
+  </svg>
+</div>
+`;
+
 exports[`Snapshots should match snapshot with size prop 1`] = `
 .c0 {
   width: 16px;

From 5ee9d86675139d7751d45e0e39b635e5f170bb5c Mon Sep 17 00:00:00 2001
From: Flavia Moraes <ext.flavia.moraes@gympass.com>
Date: Wed, 6 Sep 2023 15:28:11 -0300
Subject: [PATCH 5/5] test: update snapshots

---
 .../native/__snapshots__/Avatar.test.jsx.snap |  4 ++
 .../web/__snapshots__/Avatar.test.jsx.snap    |  4 ++
 .../native/__snapshots__/Banner.test.jsx.snap |  1 +
 .../web/__snapshots__/Banner.test.jsx.snap    |  1 +
 .../native/__snapshots__/Button.test.jsx.snap |  6 +++
 .../web/__snapshots__/Button.test.jsx.snap    |  8 ++++
 .../__snapshots__/PlanCard.test.jsx.snap      |  2 +
 .../__snapshots__/PlanCard.test.jsx.snap      |  2 +
 .../web/__snapshots__/Dialog.test.jsx.snap    |  1 +
 .../web/__snapshots__/Feedback.test.jsx.snap  |  4 ++
 .../web/__snapshots__/Heading.test.jsx.snap   |  6 +++
 packages/yoga/src/Icon/Icon.jsx               | 45 +++++++++++--------
 .../native/__snapshots__/Icon.test.jsx.snap   | 35 ---------------
 .../Icon/web/__snapshots__/Icon.test.jsx.snap | 35 ---------------
 .../Menu/web/__snapshots__/Menu.test.jsx.snap |  9 ++++
 .../native/__snapshots__/Result.test.jsx.snap |  9 ++++
 .../__snapshots__/Snackbar.test.jsx.snap      |  2 +
 .../web/__snapshots__/Snackbar.test.jsx.snap  |  2 +
 .../native/__snapshots__/Tag.test.jsx.snap    |  2 +
 .../Tag/web/__snapshots__/Tag.test.jsx.snap   |  1 +
 20 files changed, 91 insertions(+), 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
index 791a46baff..be43db2bef 100644
--- 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
index 2955d251b5..aa2454f34c 100644
--- 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
index ad6b083680..d8d9c3e8d1 100644
--- 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
index 8cea47084c..2854264982 100644
--- 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
index f5f0082edf..6c70c83c9e 100644
--- 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
index edad2a6b4b..2313fe9e80 100644
--- 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
index c628782a54..bc89b6f2c7 100644
--- 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
index 94041f9fee..ef5d85bce7 100644
--- 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
index 0dd2b5bf42..c335856618 100644
--- 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
index 635e88e711..03bae4e0cd 100644
--- 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
index 6cee2168c7..725291bb39 100644
--- 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
index 4c26522b7a..28be453e72 100644
--- 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 = {
diff --git a/packages/yoga/src/Icon/native/__snapshots__/Icon.test.jsx.snap b/packages/yoga/src/Icon/native/__snapshots__/Icon.test.jsx.snap
index b0891aeac2..af60c9121f 100644
--- a/packages/yoga/src/Icon/native/__snapshots__/Icon.test.jsx.snap
+++ b/packages/yoga/src/Icon/native/__snapshots__/Icon.test.jsx.snap
@@ -23,41 +23,6 @@ exports[`Snapshots should match snapshot 1`] = `
 </svg>
 `;
 
-exports[`Snapshots should match snapshot whit acessible props 1`] = `
-<svg
-  aria-describedby="circleIcon-titleId circleIcon-descId"
-  fill="#231B22"
-  height={16}
-  role="img"
-  style={
-    [
-      {
-        "height": 16,
-        "width": 16,
-      },
-    ]
-  }
-  viewBox="0 0 12 12"
-  width={16}
->
-  <title
-    id="circleIcon-titleId"
-  >
-    Circle icon
-  </title>
-  <desc
-    id="circleIcon-descId"
-  >
-    This is a circular icon
-  </desc>
-  <circle
-    cx="16"
-    cy="16"
-    r="16"
-  />
-</svg>
-`;
-
 exports[`Snapshots should match snapshot with accessible props 1`] = `
 <svg
   aria-describedby="circleIcon-titleId circleIcon-descId"
diff --git a/packages/yoga/src/Icon/web/__snapshots__/Icon.test.jsx.snap b/packages/yoga/src/Icon/web/__snapshots__/Icon.test.jsx.snap
index e168b22bea..958414562a 100644
--- a/packages/yoga/src/Icon/web/__snapshots__/Icon.test.jsx.snap
+++ b/packages/yoga/src/Icon/web/__snapshots__/Icon.test.jsx.snap
@@ -23,41 +23,6 @@ exports[`Snapshots should match snapshot 1`] = `
 </div>
 `;
 
-exports[`Snapshots should match snapshot when acessible props is passed 1`] = `
-.c0 {
-  width: 16px;
-  height: 16px;
-}
-
-<div>
-  <svg
-    aria-describedby="circleIcon-titleId circleIcon-descId"
-    class="c0"
-    fill="#231B22"
-    height="16"
-    role="img"
-    viewBox="0 0 12 12"
-    width="16"
-  >
-    <title
-      id="circleIcon-titleId"
-    >
-      Circle icon
-    </title>
-    <desc
-      id="circleIcon-descId"
-    >
-      This is a circular icon
-    </desc>
-    <circle
-      cx="16"
-      cy="16"
-      r="16"
-    />
-  </svg>
-</div>
-`;
-
 exports[`Snapshots should match snapshot with acessible props 1`] = `
 .c0 {
   width: 16px;
diff --git a/packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap b/packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap
index ef8f92be4b..21a8f5c92a 100644
--- a/packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap
+++ b/packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap
@@ -88,6 +88,7 @@ exports[`<Menu /> should match snapshot Menu with a onMouseHover props false 1`]
     type="button"
   >
     <svg
+      aria-hidden="true"
       class="c1"
       height="24"
       width="24"
@@ -185,6 +186,7 @@ exports[`<Menu /> should match snapshot Menu with an align props end 1`] = `
       type="button"
     >
       <svg
+        aria-hidden="true"
         class="c1"
         height="24"
         width="24"
@@ -283,6 +285,7 @@ exports[`<Menu /> should match snapshot Menu with an align props start 1`] = `
       type="button"
     >
       <svg
+        aria-hidden="true"
         class="c1"
         height="24"
         width="24"
@@ -381,6 +384,7 @@ exports[`<Menu /> should match snapshot Menu.Item with active 1`] = `
       type="button"
     >
       <svg
+        aria-hidden="true"
         class="c1"
         height="24"
         width="24"
@@ -479,6 +483,7 @@ exports[`<Menu /> should match snapshot Menu.Item with disabled 1`] = `
       type="button"
     >
       <svg
+        aria-hidden="true"
         class="c1"
         height="24"
         width="24"
@@ -577,6 +582,7 @@ exports[`<Menu /> should match snapshot Menu.Item with disabled and icon 1`] = `
       type="button"
     >
       <svg
+        aria-hidden="true"
         class="c1"
         height="24"
         width="24"
@@ -675,6 +681,7 @@ exports[`<Menu /> should match snapshot Menu.Item with icon 1`] = `
       type="button"
     >
       <svg
+        aria-hidden="true"
         class="c1"
         height="24"
         width="24"
@@ -773,6 +780,7 @@ exports[`<Menu /> should match snapshot Menu.Item with link 1`] = `
       type="button"
     >
       <svg
+        aria-hidden="true"
         class="c1"
         height="24"
         width="24"
@@ -871,6 +879,7 @@ exports[`<Menu /> should match snapshot in default Menu 1`] = `
       type="button"
     >
       <svg
+        aria-hidden="true"
         class="c1"
         height="24"
         width="24"
diff --git a/packages/yoga/src/Result/native/__snapshots__/Result.test.jsx.snap b/packages/yoga/src/Result/native/__snapshots__/Result.test.jsx.snap
index c286b0e583..6381a93e14 100644
--- a/packages/yoga/src/Result/native/__snapshots__/Result.test.jsx.snap
+++ b/packages/yoga/src/Result/native/__snapshots__/Result.test.jsx.snap
@@ -50,6 +50,7 @@ exports[`<Result /> should match snapshot 1`] = `
     width={48}
   >
     <RNSVGSvgView
+      aria-hidden={true}
       bbHeight="50%"
       bbWidth="50%"
       fill="#FFFFFF"
@@ -190,6 +191,7 @@ exports[`<Result /> should match snapshot 1`] = `
           width="xsmall"
         >
           <RNSVGSvgView
+            aria-hidden={true}
             bbHeight={12}
             bbWidth={12}
             fill="#6B6B78"
@@ -306,6 +308,7 @@ exports[`<Result /> should match snapshot 1`] = `
           width="xsmall"
         >
           <RNSVGSvgView
+            aria-hidden={true}
             bbHeight={12}
             bbWidth={12}
             fill="#6B6B78"
@@ -423,6 +426,7 @@ exports[`<Result /> should match snapshot 1`] = `
         }
       >
         <RNSVGSvgView
+          aria-hidden={true}
           bbHeight={12}
           bbWidth={12}
           fill="#6B6B78"
@@ -1041,6 +1045,7 @@ exports[`<Result /> should match snapshot without attendence 1`] = `
     width={48}
   >
     <RNSVGSvgView
+      aria-hidden={true}
       bbHeight="50%"
       bbWidth="50%"
       fill="#FFFFFF"
@@ -1532,6 +1537,7 @@ exports[`<Result /> should match snapshot without limitLabel prop 1`] = `
     width={48}
   >
     <RNSVGSvgView
+      aria-hidden={true}
       bbHeight="50%"
       bbWidth="50%"
       fill="#FFFFFF"
@@ -1672,6 +1678,7 @@ exports[`<Result /> should match snapshot without limitLabel prop 1`] = `
           width="xsmall"
         >
           <RNSVGSvgView
+            aria-hidden={true}
             bbHeight={12}
             bbWidth={12}
             fill="#6B6B78"
@@ -1788,6 +1795,7 @@ exports[`<Result /> should match snapshot without limitLabel prop 1`] = `
           width="xsmall"
         >
           <RNSVGSvgView
+            aria-hidden={true}
             bbHeight={12}
             bbWidth={12}
             fill="#6B6B78"
@@ -1905,6 +1913,7 @@ exports[`<Result /> should match snapshot without limitLabel prop 1`] = `
         }
       >
         <RNSVGSvgView
+          aria-hidden={true}
           bbHeight={12}
           bbWidth={12}
           fill="#6B6B78"
diff --git a/packages/yoga/src/Snackbar/native/__snapshots__/Snackbar.test.jsx.snap b/packages/yoga/src/Snackbar/native/__snapshots__/Snackbar.test.jsx.snap
index 6205d0fec5..e74fc83f3b 100644
--- a/packages/yoga/src/Snackbar/native/__snapshots__/Snackbar.test.jsx.snap
+++ b/packages/yoga/src/Snackbar/native/__snapshots__/Snackbar.test.jsx.snap
@@ -125,6 +125,7 @@ exports[`<Snackbar /> should match snapshot when have a long text 1`] = `
         variant="success"
       >
         <RNSVGSvgView
+          aria-hidden={true}
           bbHeight={24}
           bbWidth={24}
           fill="#231B22"
@@ -585,6 +586,7 @@ exports[`<Snackbar /> should match snapshot when have an icon and action 1`] = `
         variant="success"
       >
         <RNSVGSvgView
+          aria-hidden={true}
           bbHeight={24}
           bbWidth={24}
           fill="#231B22"
diff --git a/packages/yoga/src/Snackbar/web/__snapshots__/Snackbar.test.jsx.snap b/packages/yoga/src/Snackbar/web/__snapshots__/Snackbar.test.jsx.snap
index 5483865d0e..5363b18c35 100644
--- a/packages/yoga/src/Snackbar/web/__snapshots__/Snackbar.test.jsx.snap
+++ b/packages/yoga/src/Snackbar/web/__snapshots__/Snackbar.test.jsx.snap
@@ -125,6 +125,7 @@ exports[`<Snackbar /> should match snapshot 1`] = `
       role="img"
     >
       <svg
+        aria-hidden="true"
         class="c2"
         fill="#231B22"
         height="24"
@@ -144,6 +145,7 @@ exports[`<Snackbar /> should match snapshot 1`] = `
         role="button"
       >
         <svg
+          aria-hidden="true"
           class="c6"
           fill="#231B22"
           height="20"
diff --git a/packages/yoga/src/Tag/native/__snapshots__/Tag.test.jsx.snap b/packages/yoga/src/Tag/native/__snapshots__/Tag.test.jsx.snap
index f7419d99c6..bf5b4fcbc7 100644
--- a/packages/yoga/src/Tag/native/__snapshots__/Tag.test.jsx.snap
+++ b/packages/yoga/src/Tag/native/__snapshots__/Tag.test.jsx.snap
@@ -78,6 +78,7 @@ exports[`<Tag /> should match snapshot with custom icon and informative type 1`]
       }
     >
       <RNSVGSvgView
+        aria-hidden={true}
         bbHeight={16}
         bbWidth={16}
         fill="#231B22"
@@ -210,6 +211,7 @@ exports[`<Tag /> should match snapshot with custom icon and informative type 1`]
       }
     >
       <RNSVGSvgView
+        aria-hidden={true}
         bbHeight={12}
         bbWidth={12}
         fill="#231B22"
diff --git a/packages/yoga/src/Tag/web/__snapshots__/Tag.test.jsx.snap b/packages/yoga/src/Tag/web/__snapshots__/Tag.test.jsx.snap
index d673709326..789fade8a8 100644
--- a/packages/yoga/src/Tag/web/__snapshots__/Tag.test.jsx.snap
+++ b/packages/yoga/src/Tag/web/__snapshots__/Tag.test.jsx.snap
@@ -87,6 +87,7 @@ exports[`<Tag /> should match snapshot with custom icon and informative type 1`]
     class="c0 c1"
   >
     <svg
+      aria-hidden="true"
       class="c2"
       fill="#231B22"
       height="16"