Skip to content

Commit

Permalink
[EuiStat] Accessibility - removed aria-hidden=true attribute
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexwizp
alexwizp committed Jul 1, 2024
1 parent 17f68d5 commit faf63d1
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 93 deletions.
105 changes: 21 additions & 84 deletions packages/eui/src/components/stat/__snapshots__/stat.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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);"
>
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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"
>
--
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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);"
>
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -464,17 +413,14 @@ 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
</p>
<div
class="euiText euiStat__description emotion-euiText-s"
>
<p
aria-hidden="true"
>
<p>
description
</p>
</div>
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
15 changes: 6 additions & 9 deletions packages/eui/src/components/stat/stat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);

Expand All @@ -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>
);

Expand Down

0 comments on commit faf63d1

Please sign in to comment.