From 6ba8a6cc5242ae47677cd062dba4771ab3d3595d Mon Sep 17 00:00:00 2001
From: Benjamin Arias <benjamin.j.arias@gmail.com>
Date: Mon, 13 Mar 2023 10:51:05 +0100
Subject: [PATCH] fix: Corrige aria-hidden

---
 site/source/design-system/icons/index.tsx     |   3 -
 site/source/design-system/message/index.tsx   |   2 +-
 .../source/pages/statistiques/GlobalStats.tsx | 100 ++++++++++--------
 3 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/site/source/design-system/icons/index.tsx b/site/source/design-system/icons/index.tsx
index 22e832ec8..73562bf37 100644
--- a/site/source/design-system/icons/index.tsx
+++ b/site/source/design-system/icons/index.tsx
@@ -35,7 +35,6 @@ export const InfoIcon = (props: HTMLAttributes<SVGElement>) => (
 		width={20}
 		height={20}
 		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden
 		role="img"
 	>
 		<path
@@ -55,7 +54,6 @@ export const SuccessIcon = (props: HTMLAttributes<SVGElement>) => (
 		width={20}
 		height={20}
 		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden
 		role="img"
 	>
 		<path
@@ -116,7 +114,6 @@ export const ErrorIcon = (props: HTMLAttributes<SVGElement>) => (
 		height="19"
 		viewBox="0 0 20 19"
 		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden
 		role="img"
 	>
 		<path
diff --git a/site/source/design-system/message/index.tsx b/site/source/design-system/message/index.tsx
index 700ab3306..1a9b79334 100644
--- a/site/source/design-system/message/index.tsx
+++ b/site/source/design-system/message/index.tsx
@@ -67,7 +67,7 @@ export function Message({
 						) : type === 'error' ? (
 							<ErrorIcon aria-label={t('Échec')} />
 						) : type === 'info' ? (
-							<InfoIcon aria-label={t('Attention')} />
+							<InfoIcon aria-label={t('Attention, information importante')} />
 						) : (
 							<ReturnIcon />
 						)}
diff --git a/site/source/pages/statistiques/GlobalStats.tsx b/site/source/pages/statistiques/GlobalStats.tsx
index d72c5ffc2..b3952fed1 100644
--- a/site/source/pages/statistiques/GlobalStats.tsx
+++ b/site/source/pages/statistiques/GlobalStats.tsx
@@ -17,52 +17,68 @@ export const BigIndicator = ({ main, subTitle, footnote }: IndicatorProps) => (
 		<Indicator main={main} subTitle={subTitle} footnote={footnote} />
 	</Grid>
 )
-
+const mappedLevelToLabel = {
+	mauvais: "Taux d'utilisateurs mécontents",
+	moyen: "Taux d'utilisateurs ayant un avis neutre",
+	bien: "Taux d'utilisateurs satisfaits",
+	'très bien': "Taux d'utilisateurs très satisfaits",
+}
 const RetoursAsProgress = ({
 	percentages,
 }: {
 	percentages: Record<SatisfactionLevel, number>
-}) => (
-	<div
-		className="progress__container"
-		css={`
-			width: 100%;
-			overflow: hidden;
-			height: 2.5rem;
-			border-radius: 3px;
-			margin-top: 1rem;
-			margin-bottom: 2.5rem;
-			display: flex;
-			font-size: 1.8rem;
-		`}
-	>
-		{' '}
-		{SatisfactionStyle.map(([level, { emoji: emojiStr, color }]) => (
-			<div
-				key={level}
-				css={`
-					width: ${percentages[level]}%;
-					background-color: ${color};
-					display: flex;
-					align-items: center;
-					justify-content: center;
-				`}
-			>
-				<Emoji emoji={emojiStr} />
-				<div
-					css={`
-						position: absolute;
-						margin-top: 4rem;
-						font-size: 0.7rem;
-						font-weight: lighter;
-					`}
-				>
-					{Math.round(percentages[level])}%
-				</div>
-			</div>
-		))}
-	</div>
-)
+}) => {
+	const { t } = useTranslation()
+
+	return (
+		<ul
+			className="progress__container"
+			css={`
+				width: 100%;
+				overflow: hidden;
+				height: 2.5rem;
+				border-radius: 3px;
+				margin-top: 1rem;
+				margin-bottom: 2.5rem;
+				display: flex;
+				font-size: 1.8rem;
+				padding: 0;
+			`}
+		>
+			{' '}
+			{SatisfactionStyle.map(([level, { emoji: emojiStr, color }]) => {
+				return (
+					<li
+						key={level}
+						css={`
+							width: ${percentages[level]}%;
+							background-color: ${color};
+							display: flex;
+							align-items: center;
+							justify-content: center;
+						`}
+					>
+						<Emoji
+							emoji={emojiStr}
+							aria-hidden={false}
+							alt={t(mappedLevelToLabel[level])}
+						/>
+						<div
+							css={`
+								position: absolute;
+								margin-top: 4rem;
+								font-size: 0.7rem;
+								font-weight: lighter;
+							`}
+						>
+							{Math.round(percentages[level])}%
+						</div>
+					</li>
+				)
+			})}
+		</ul>
+	)
+}
 
 export default function GlobalStats({ stats }: { stats: StatsStruct }) {
 	const { i18n } = useTranslation()