From faf63d1b16e662b3c01076478db2c505e5087766 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Mon, 1 Jul 2024 12:20:23 +0300
Subject: [PATCH] [EuiStat] Accessibility - removed `aria-hidden=true`
 attribute

---
 .../stat/__snapshots__/stat.test.tsx.snap     | 105 ++++--------------
 packages/eui/src/components/stat/stat.tsx     |  15 +--
 2 files changed, 27 insertions(+), 93 deletions(-)

diff --git a/packages/eui/src/components/stat/__snapshots__/stat.test.tsx.snap b/packages/eui/src/components/stat/__snapshots__/stat.test.tsx.snap
index 06962fa2a5c..649546d70d0 100644
--- a/packages/eui/src/components/stat/__snapshots__/stat.test.tsx.snap
+++ b/packages/eui/src/components/stat/__snapshots__/stat.test.tsx.snap
@@ -9,14 +9,11 @@ exports[`EuiStat is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-default"
   >
     title
@@ -36,14 +33,11 @@ exports[`EuiStat props accent is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-accent"
   >
     title
@@ -63,14 +57,11 @@ exports[`EuiStat props center is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-default"
   >
     title
@@ -90,14 +81,11 @@ exports[`EuiStat props danger is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-danger"
   >
     title
@@ -117,14 +105,11 @@ exports[`EuiStat props default is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-default"
   >
     title
@@ -144,14 +129,11 @@ exports[`EuiStat props hexcode colors are rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title"
     style="color: rgb(235, 25, 25);"
   >
@@ -172,14 +154,11 @@ exports[`EuiStat props l is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-default"
   >
     title
@@ -199,14 +178,11 @@ exports[`EuiStat props left is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-default"
   >
     title
@@ -228,14 +204,11 @@ exports[`EuiStat props loading is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-default-isLoading"
   >
     --
@@ -255,14 +228,11 @@ exports[`EuiStat props m is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-m-euiStat__title-default"
   >
     title
@@ -282,14 +252,11 @@ exports[`EuiStat props primary is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-primary"
   >
     title
@@ -309,16 +276,13 @@ exports[`EuiStat props render with custom description element 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <div
-      aria-hidden="true"
-    >
+    <div>
       <div>
         description
       </div>
     </div>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title"
     style="color: rgb(235, 25, 25);"
   >
@@ -334,14 +298,11 @@ exports[`EuiStat props render with custom title element 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <div
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-default"
   >
     <div>
@@ -358,14 +319,11 @@ exports[`EuiStat props right is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-default"
   >
     title
@@ -385,14 +343,11 @@ exports[`EuiStat props s is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-s-euiStat__title-default"
   >
     title
@@ -412,14 +367,11 @@ exports[`EuiStat props subdued is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-subdued"
   >
     title
@@ -439,14 +391,11 @@ exports[`EuiStat props success is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-success"
   >
     title
@@ -464,7 +413,6 @@ exports[`EuiStat props title and description are reversed 1`] = `
   class="euiStat emotion-euiStat-left"
 >
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-default"
   >
     title
@@ -472,9 +420,7 @@ exports[`EuiStat props title and description are reversed 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
@@ -493,14 +439,11 @@ exports[`EuiStat props xs is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-xs-euiStat__title-default"
   >
     title
@@ -520,14 +463,11 @@ exports[`EuiStat props xxs is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-xxs-euiStat__title-default"
   >
     title
@@ -547,14 +487,11 @@ exports[`EuiStat props xxxs is rendered 1`] = `
   <div
     class="euiText euiStat__description emotion-euiText-s"
   >
-    <p
-      aria-hidden="true"
-    >
+    <p>
       description
     </p>
   </div>
   <p
-    aria-hidden="true"
     class="euiTitle euiStat__title emotion-euiTitle-xxxs-euiStat__title-default"
   >
     title
diff --git a/packages/eui/src/components/stat/stat.tsx b/packages/eui/src/components/stat/stat.tsx
index d7525f3a9d3..d8bdf8690d5 100644
--- a/packages/eui/src/components/stat/stat.tsx
+++ b/packages/eui/src/components/stat/stat.tsx
@@ -93,13 +93,9 @@ export const EuiStat: FunctionComponent<
   const cssStyles = [styles.euiStat, styles[textAlign]];
   const classes = classNames('euiStat', className);
 
-  const commonProps: HTMLAttributes<Element> = {
-    'aria-hidden': true,
-  };
-
   const descriptionDisplay = (
     <EuiText size="s" className="euiStat__description">
-      {createElement(descriptionElement, commonProps, description)}
+      {createElement(descriptionElement, {}, description)}
     </EuiText>
   );
 
@@ -110,14 +106,15 @@ export const EuiStat: FunctionComponent<
     isNamedTitleColor && titleStyles[titleColor as TitleColor],
     isLoading && titleStyles.isLoading,
   ];
-  const titleProps = isNamedTitleColor
-    ? commonProps
-    : { ...commonProps, style: { color: titleColor } };
   const titleChildren = isLoading ? '--' : title;
 
   const titleDisplay = (
     <EuiTitle size={titleSize} className="euiStat__title" css={titleCssStyles}>
-      {createElement(titleElement, titleProps, titleChildren)}
+      {createElement(
+        titleElement,
+        isNamedTitleColor ? {} : { style: { color: titleColor } },
+        titleChildren
+      )}
     </EuiTitle>
   );