Ajoute des aria-label pour les icones de message

2022-12-15 15:46:48 +01:00 · 2022-12-15 15:46:48 +01:00 · 111db6892d
parent cd10b5665c
commit 111db6892d
9 changed files with 91 additions and 48 deletions
--- a/site/source/components/Notifications.tsx
+++ b/site/source/components/Notifications.tsx
@ -8,6 +8,7 @@ import { hideNotification } from '@/actions/actions'
 import { useEngine, useInversionFail } from '@/components/utils/EngineContext'
 import { Message } from '@/design-system'
 import { CloseButton } from '@/design-system/buttons'
+import { Body } from '@/design-system/typography/paragraphs'
 import { RootState } from '@/reducers/rootReducer'

 import RuleLink from './RuleLink'
@ -77,14 +78,17 @@ export default function Notifications() {
 						key={dottedName}
 					>
 						<Markdown>{résumé ?? description ?? ''}</Markdown>{' '}
-						{résumé && (
-							<RuleLink dottedName={dottedName as DottedName}>
-								<Trans>En savoir plus</Trans>
-							</RuleLink>
-						)}
+						<Body>
+							{résumé && (
+								<RuleLink dottedName={dottedName as DottedName}>
+									<Trans>En savoir plus</Trans>
+								</RuleLink>
+							)}
+						</Body>
 						<AbsoluteCloseButton
 							aria-label={t('Fermer')}
 							onPress={() => dispatch(hideNotification(dottedName))}
+							color={sévérité === 'avertissement' ? 'tertiary' : 'primary'}
 						/>
 					</Message>
 				))}
--- a/site/source/components/PageData.tsx
+++ b/site/source/components/PageData.tsx
@ -7,6 +7,7 @@ import { useIsEmbedded } from '@/components/utils/useIsEmbedded'
 import useSearchParamsSimulationSharing from '@/components/utils/useSearchParamsSimulationSharing'
 import useSimulationConfig from '@/components/utils/useSimulationConfig'
 import { Chip } from '@/design-system'
+import { Emoji } from '@/design-system/emoji'
 import { Spacing } from '@/design-system/layout'
 import { H1 } from '@/design-system/typography/heading'
 import { Intro } from '@/design-system/typography/paragraphs'
@ -85,12 +86,12 @@ export default function PageData(props: PageDataProps) {
 						<H1>
 							<StyledSpan>{title}</StyledSpan>
 							{year && (
-								<Chip type="secondary" icon="📆">
+								<Chip type="secondary" icon={<Emoji emoji="📆" />}>
 									{year}
 								</Chip>
 							)}
 							{beta && (
-								<Chip type="info" icon="🚧">
+								<Chip type="info" icon={<Emoji emoji="🚧" />}>
 									Version bêta
 								</Chip>
 							)}
--- a/site/source/components/layout/NewsBanner.tsx
+++ b/site/source/components/layout/NewsBanner.tsx
@ -5,6 +5,7 @@ import { Message } from '@/design-system'
 import { CloseButton } from '@/design-system/buttons'
 import { Emoji } from '@/design-system/emoji'
 import { Link } from '@/design-system/typography/link'
+import { Body } from '@/design-system/typography/paragraphs'
 import { useFetchData } from '@/hooks/useFetchData'
 import { useSitePaths } from '@/sitePaths'

@ -51,26 +52,41 @@ function NewsBanner({ lastRelease }: { lastRelease: LastRelease }) {
 	}

 	return (
-		<Message className="print-hidden" icon={<Emoji emoji="✨" />}>
-			Découvrez les nouveautés
-			{determinant(lastRelease.name)}
-			<Link
-				to={absoluteSitePaths.nouveautés}
-				aria-label={t(
-					'Voir les nouveautés apportées par la version {{release}}',
-					{ release: lastRelease.name.toLowerCase() }
-				)}
+		<div
+			css={`
+				display: flex;
+				justify-content: center;
+			`}
+		>
+			<Message
+				className="print-hidden"
+				type="secondary"
+				icon={<Emoji emoji="✨" />}
+				mini
+				border={false}
 			>
-				{lastRelease.name.toLowerCase()}
-			</Link>
-			<CloseButton
-				onPress={() => {
-					setShowBanner(false)
-					setItem(localStorageKey, lastRelease.name)
-				}}
-				aria-label={t('Fermer')}
-			/>
-		</Message>
+				<Body>
+					Découvrez les nouveautés {determinant(lastRelease.name)}
+					<Link
+						to={absoluteSitePaths.nouveautés}
+						aria-label={t(
+							'Voir les nouveautés apportées par la version {{release}}',
+							{ release: lastRelease.name.toLowerCase() }
+						)}
+					>
+						{lastRelease.name.toLowerCase()}
+					</Link>
+					<CloseButton
+						color="secondary"
+						onPress={() => {
+							setShowBanner(false)
+							setItem(localStorageKey, lastRelease.name)
+						}}
+						aria-label={t('Fermer')}
+					/>
+				</Body>
+			</Message>
+		</div>
 	)
 }

--- a/site/source/design-system/chip/index.tsx
+++ b/site/source/design-system/chip/index.tsx
@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import styled, { ThemeProvider, css } from 'styled-components'

 import { Palette, SmallPalette } from '@/types/styled'
@ -21,6 +22,8 @@ export function Chip({
 	children,
 	className,
 }: ChipProps) {
+	const { t } = useTranslation()
+
 	return (
 		<ThemeProvider theme={(theme) => ({ ...theme, darkMode: false })}>
 			<StyledChip className={className} type={type}>
@ -29,11 +32,11 @@ export function Chip({
 						{typeof icon !== 'boolean' ? (
 							icon
 						) : type === 'success' ? (
-							<SuccessIcon />
+							<SuccessIcon aria-label={t('Réussite')} />
 						) : type === 'error' ? (
-							<ErrorIcon />
+							<ErrorIcon aria-label={t('Échec')} />
 						) : type === 'info' ? (
-							<InfoIcon />
+							<InfoIcon aria-label={t('Information')} />
 						) : (
 							<></>
 						)}
--- a/site/source/design-system/message/index.tsx
+++ b/site/source/design-system/message/index.tsx
@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import styled, { DefaultTheme, ThemeProvider, css } from 'styled-components'

 import { Palette, SmallPalette } from '@/types/styled'
@ -29,7 +30,12 @@ export function Message({
 	className,
 	role = undefined,
 }: MessageProps) {
-	if (typeof children !== 'object') {
+	const { t } = useTranslation()
+	if (
+		Array.isArray(children) &&
+		children.length === 1 &&
+		typeof children[0] === 'string'
+	) {
 		children = <Body>{children}</Body>
 	}

@ -48,11 +54,11 @@ export function Message({
 						{typeof icon !== 'boolean' ? (
 							icon
 						) : type === 'success' ? (
-							<SuccessIcon />
+							<SuccessIcon aria-label={t('Réussite')} />
 						) : type === 'error' ? (
-							<ErrorIcon />
+							<ErrorIcon aria-label={t('Échec')} />
 						) : type === 'info' ? (
-							<InfoIcon />
+							<InfoIcon aria-label={t('Attention')} />
 						) : (
 							<ReturnIcon />
 						)}
--- a/site/source/design-system/typography/heading.tsx
+++ b/site/source/design-system/typography/heading.tsx
@ -8,6 +8,7 @@ const baseHeading = css`
 		theme.darkMode
 			? theme.colors.extended.grey[100]
 			: theme.colors.bases.primary[700]};
+	background-color: inherit;
 `

 export const HeadingUnderline = css`
--- a/site/source/pages/Simulateurs/Home.tsx
+++ b/site/source/pages/Simulateurs/Home.tsx
@ -242,7 +242,7 @@ export function SimulateurCard({
 							<h4>
 								{shortName} {tooltip && <InfoBulle>{tooltip}</InfoBulle>}
 								{beta && (
-									<Chip type="info" icon="🚧">
+									<Chip type="info" icon={<Emoji emoji="🚧" />}>
 										Bêta
 									</Chip>
 								)}
@ -258,7 +258,7 @@ export function SimulateurCard({
 							<>
 								{shortName}
 								{beta && (
-									<Chip type="info" icon="🚧">
+									<Chip type="info" icon={<Emoji emoji="🚧" />}>
 										Bêta
 									</Chip>
 								)}
--- a/site/source/pages/Simulateurs/Salarié.tsx
+++ b/site/source/pages/Simulateurs/Salarié.tsx
@ -160,7 +160,8 @@ function AidesGlimpse() {
 							displayedUnit="€"
 							unit={targetUnit}
 						/>{' '}
-						<Trans>d'aides</Trans> <Emoji emoji={aides.rawNode.icônes} />
+						<Trans>d'aides</Trans>{' '}
+						<Emoji emoji={aides.rawNode.icônes as string} />
 					</RuleLink>
 				</FromTop>
 			</StyledInfo>
--- a/site/source/pages/Simulateurs/metadata.tsx
+++ b/site/source/pages/Simulateurs/metadata.tsx
@ -5,6 +5,7 @@ import styled, { css } from 'styled-components'

 import { PlaceDesEntreprisesButton } from '@/components/PlaceDesEntreprises'
 import RuleLink from '@/components/RuleLink'
+import { Message } from '@/design-system'
 import { Emoji } from '@/design-system/emoji'
 import { Strong } from '@/design-system/typography'
 import { H2 } from '@/design-system/typography/heading'
@ -226,12 +227,17 @@ function getSimulatorsData({ t, sitePaths, language }: SimulatorsDataParams) {
 						pour l'option micro-fiscal).
 					</Body>
 					<Body>La formule de calcul complète est donc :</Body>
-					<blockquote role="presentation">
-						<strong>
-							Revenu net = Chiffres d'affaires − Dépenses professionnelles -
-							Cotisations sociales
-						</strong>
-					</blockquote>
+					<Message
+						role="presentation"
+						mini
+						border={false}
+						css={`
+							width: fit-content;
+						`}
+					>
+						Revenu net = Chiffres d'affaires − Dépenses professionnelles -
+						Cotisations sociales
+					</Message>
 					<H2>
 						Comment calculer les cotisations sociales d'une entreprise
 						individuelle ?
@ -371,12 +377,17 @@ function getSimulatorsData({ t, sitePaths, language }: SimulatorsDataParams) {
 						économiquement.
 					</Body>
 					<Body>La formule de calcul complète est donc :</Body>
-					<blockquote role="presentation">
-						<strong>
-							Revenu net = Chiffres d'affaires − Cotisations sociales − Dépenses
-							professionnelles
-						</strong>
-					</blockquote>
+					<Message
+						role="presentation"
+						mini
+						border={false}
+						css={`
+							width: fit-content;
+						`}
+					>
+						Revenu net = Chiffres d'affaires − Cotisations sociales − Dépenses
+						professionnelles
+					</Message>
 					<H2>
 						Comment calculer l'impôt sur le revenu pour un auto-entrepreneur ?
 					</H2>