update PR

elastic · Jul 1, 2024 · ff8623e · ff8623e
1 parent 795128a
commit ff8623e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 117 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
@@ -18,11 +18,6 @@ exports[`EuiStat is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -42,11 +37,6 @@ exports[`EuiStat props accent is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -66,11 +56,6 @@ exports[`EuiStat props center is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -90,11 +75,6 @@ exports[`EuiStat props danger is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -114,11 +94,6 @@ exports[`EuiStat props default is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -139,11 +114,6 @@ exports[`EuiStat props hexcode colors are rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -163,11 +133,6 @@ exports[`EuiStat props l is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -187,11 +152,6 @@ exports[`EuiStat props left is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -209,15 +169,11 @@ exports[`EuiStat props loading is rendered 1`] = `
     </p>
   </div>
   <p
+    aria-label="Statistic is loading"
     class="euiTitle euiStat__title emotion-euiTitle-l-euiStat__title-default-isLoading"
   >
     --
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    Statistic is loading
-  </p>
 </div>
 `;
 
@@ -237,11 +193,6 @@ exports[`EuiStat props m is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -261,11 +212,6 @@ exports[`EuiStat props primary is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -328,11 +274,6 @@ exports[`EuiStat props right is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -352,11 +293,6 @@ exports[`EuiStat props s is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -376,11 +312,6 @@ exports[`EuiStat props subdued is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -400,11 +331,6 @@ exports[`EuiStat props success is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -424,11 +350,6 @@ exports[`EuiStat props title and description are reversed 1`] = `
       description
     </p>
   </div>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    title description
-  </p>
 </div>
 `;
 
@@ -448,11 +369,6 @@ exports[`EuiStat props xs is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -472,11 +388,6 @@ exports[`EuiStat props xxs is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
 
@@ -496,10 +407,5 @@ exports[`EuiStat props xxxs is rendered 1`] = `
   >
     title
   </p>
-  <p
-    class="emotion-euiScreenReaderOnly"
-  >
-    description title
-  </p>
 </div>
 `;
diff --git a/packages/eui/src/components/stat/stat.tsx b/packages/eui/src/components/stat/stat.tsx
@@ -18,8 +18,7 @@ import classNames from 'classnames';
 
 import { EuiText } from '../text';
 import { EuiTitle, EuiTitleSize } from '../title/title';
-import { EuiScreenReaderOnly } from '../accessibility';
-import { EuiI18n } from '../i18n';
+import { useEuiI18n } from '../i18n';
 
 import { useEuiTheme } from '../../services';
 import { euiStatStyles, euiStatTitleStyles } from './stat.styles';
@@ -93,6 +92,11 @@ export const EuiStat: FunctionComponent<
   const cssStyles = [styles.euiStat, styles[textAlign]];
   const classes = classNames('euiStat', className);
 
+  const loadingStatsAriaLabel = useEuiI18n(
+    'euiStat.loadingText',
+    'Statistic is loading'
+  );
+
   const descriptionDisplay = (
     <EuiText size="s" className="euiStat__description">
       {createElement(descriptionElement, {}, description)}
@@ -106,40 +110,27 @@ export const EuiStat: FunctionComponent<
     isNamedTitleColor && titleStyles[titleColor as TitleColor],
     isLoading && titleStyles.isLoading,
   ];
-  const titleChildren = isLoading ? '--' : title;
 
   const titleDisplay = (
-    <EuiTitle size={titleSize} className="euiStat__title" css={titleCssStyles}>
+    <EuiTitle
+      size={titleSize}
+      className="euiStat__title"
+      css={titleCssStyles}
+      aria-label={isLoading ? loadingStatsAriaLabel : undefined}
+    >
       {createElement(
         titleElement,
         isNamedTitleColor ? {} : { style: { color: titleColor } },
-        titleChildren
+        isLoading ? '--' : title
       )}
     </EuiTitle>
   );
 
-  const screenReader = (
-    <EuiScreenReaderOnly>
-      <p>
-        {isLoading ? (
-          <EuiI18n token="euiStat.loadingText" default="Statistic is loading" />
-        ) : (
-          <Fragment>
-            {reverse ? `${title} ${description}` : `${description} ${title}`}
-          </Fragment>
-        )}
-      </p>
-    </EuiScreenReaderOnly>
-  );
-
   const statDisplay = (
     <Fragment>
       {!reverse && descriptionDisplay}
       {titleDisplay}
       {reverse && descriptionDisplay}
-      {typeof title === 'string' &&
-        typeof description === 'string' &&
-        screenReader}
     </Fragment>
   );