Accessibilité : fix 11.9

site/source/components/company/SearchDetails.tsx

@@ -27,14 +27,6 @@ export default function CompanySearchDetails({
 		[i18n.language]
 	)
 
-	// if (company === null) {
-	// 	return (
-	// 		<SmallBody>
-	// 			{siren}
-	// 			<Trans>est un SIREN non diffusible</Trans>
-	// 		</SmallBody>
-	// 	)
-	// }
 	return (
 		<CompanyContainer>
 			<H4

site/source/components/company/SearchField.tsx

@@ -12,6 +12,7 @@ import { Message } from '@/design-system'
 import { Card } from '@/design-system/card'
 import { SearchField } from '@/design-system/field'
 import { FocusStyle } from '@/design-system/global-style'
+import { ChevronIcon } from '@/design-system/icons'
 import { Grid } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { StyledLink } from '@/design-system/typography/link'
@@ -109,7 +110,6 @@ function Results({
 	onSubmit?: (établissement: FabriqueSocialEntreprise) => void
 }) {
 	const { t } = useTranslation()
-	console.log(results)
 
 	return !results.length ? (
 		<FromTop>
@@ -154,21 +154,32 @@ function Results({
 		</FromTop>
 	) : (
 		<FromTop>
-			<Ul noMarker data-test-id="company-search-results">
-				{results.map((etablissement) => (
-					<Li key={etablissement.siren}>
-						<StyledCard
-							role="button"
-							onPress={() => onSubmit?.(etablissement)}
-							compact
-							aria-label={etablissement.label}
-							tabIndex={0}
-						>
-							<CompanySearchDetails entreprise={etablissement} />
-						</StyledCard>
-					</Li>
-				))}
-			</Ul>
+			<ForceThemeProvider>
+				<Ul noMarker data-test-id="company-search-results">
+					{results.map((etablissement) => (
+						<Li key={etablissement.siren}>
+							<StyledCard
+								onPress={() => onSubmit?.(etablissement)}
+								onClick={() => onSubmit?.(etablissement)}
+								compact
+								bodyAs="div"
+								aria-label={`${etablissement.label}, Selectionner cette entreprise`}
+								ctaLabel={
+									<ChevronIcon
+										css={`
+											height: 20px;
+											margin-top: 5px;
+										`}
+										aria-hidden
+									/>
+								}
+							>
+								<CompanySearchDetails entreprise={etablissement} />
+							</StyledCard>
+						</Li>
+					))}
+				</Ul>
+			</ForceThemeProvider>
 		</FromTop>
 	)
 }

site/source/components/conversation/Explicable.tsx

@@ -45,6 +45,7 @@ export function ExplicableRule<Names extends string = DottedName>({
 			bigPopover={bigPopover}
 			className="print-hidden"
 			aria-haspopup="dialog"
+			aria-label={`Plus d'info sur, ${rule.title}`}
 			{...props}
 		>
 			<Markdown>{rule.rawNode.description}</Markdown>

site/source/components/layout/Footer/Footer.tsx

@@ -133,8 +133,8 @@ export default function Footer() {
 										)}
 										{altHref && (
 											<StyledLi key={altLang}>
-												<Grid container spacing={2}>
-													<Grid item>
+												<Grid container spacing={2} role="list">
+													<Grid item role="listitem">
 														<StyledButton
 															openInSameWindow
 															href={altHref}
@@ -156,7 +156,7 @@ export default function Footer() {
 															FR <Emoji emoji="🇫🇷" />
 														</StyledButton>
 													</Grid>
-													<Grid item>
+													<Grid item role="listitem">
 														<StyledButton
 															href={altHref}
 															openInSameWindow

site/source/design-system/card/Card.tsx

@@ -27,28 +27,26 @@ export type GenericCardProps = {
 } & GenericButtonOrLinkProps
 
 type CardProps = GenericCardProps & {
-	ctaLabel?: React.ReactNode
-	children: React.ReactNode
-	compact?: boolean
 	bodyAs?: React.ComponentProps<typeof Body>['as']
+	children: React.ReactNode
+	className?: string
+	compact?: boolean
+	ctaLabel?: React.ReactNode
 	role?: string
 	tabIndex?: number
-	onClick?: () => void
-	className?: string
 }
 
 export function Card(props: CardProps) {
 	const {
-		title,
-		icon,
-		children,
-		ctaLabel,
-		compact = false,
 		bodyAs,
+		children,
+		className,
+		compact = false,
+		ctaLabel,
+		icon,
 		role,
 		tabIndex,
-		onClick,
-		className,
+		title,
 		...ariaButtonProps
 	} = props
 	const ref = useRef<HTMLAnchorElement | HTMLButtonElement>(null)
@@ -133,6 +131,7 @@ const CardButton = styled(StyledButton)`
 		width: initial;
 	}
 
+	/* Hack to transmit state (hover, focused) to card */
 	&::before {
 		content: '';
 		inset: 0;
@@ -151,10 +150,12 @@ export const CardContainer = styled.div<{
 	$compact?: boolean
 	$inert?: boolean
 }>`
-	display: flex;
+	/* Hack to get state from link/button */
 	width: 100%;
 	height: 100%;
 	position: relative;
+
+	display: flex;
 	text-decoration: none;
 	flex-direction: column;
 	align-items: center;

site/source/pages/assistants/components/Fields.tsx

@@ -126,10 +126,7 @@ export function SimpleField(props: SimpleFieldProps) {
 			{displayedQuestion ? (
 				<StyledQuestion id={labelId}>
 					<Markdown components={{ p: Intro }}>{displayedQuestion}</Markdown>
-					<ExplicableRule
-						dottedName={dottedName}
-						aria-label={t('En savoir plus')}
-					/>
+					<ExplicableRule dottedName={dottedName} />
 				</StyledQuestion>
 			) : (
 				<Spacing sm />

site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx

@@ -81,11 +81,9 @@ export default function AideDéclarationIndépendant() {
 							Cet outil vous concerne si vous êtes dans le cas suivant :
 						</Strong>
 					</Body>
-					<Ul>
-						<Li>
-							Vous cotisez au régime général des travailleurs indépendants
-						</Li>
-					</Ul>
+					<Body>
+						Vous cotisez au régime général des travailleurs indépendants
+					</Body>
 					<Body>
 						<Strong>
 							Il ne vous concerne pas si vous êtes dans un des cas suivants :

site/source/pages/assistants/index.tsx

@@ -18,7 +18,10 @@ export default function Gérer() {
 	const simulateurs = useSimulatorsData()
 
 	const back = (
-		<Link noUnderline to={absoluteSitePaths.assistants.index}>
+		<Link
+			noUnderline
+			to={absoluteSitePaths.assistants['pour-mon-entreprise'].index}
+		>
 			<span aria-hidden>←</span> <Trans>Retour à mon activité</Trans>
 		</Link>
 	)
@@ -70,7 +73,6 @@ export default function Gérer() {
 							}
 							element={
 								<>
-									{back}
 									<PageData />
 								</>
 							}

site/source/pages/simulateurs/index.tsx

@@ -55,7 +55,10 @@ export default function Simulateurs() {
 
 			{pathname !== absoluteSitePaths.simulateurs.index &&
 				(lastState?.fromGérer ? (
-					<Link to={absoluteSitePaths.assistants.index} noUnderline>
+					<Link
+						to={absoluteSitePaths.assistants['pour-mon-entreprise'].index}
+						noUnderline
+					>
 						<span aria-hidden>←</span> <Trans>Retour à mon activité</Trans>
 					</Link>
 				) : lastState?.fromCréer ? (

site/source/pages/statistiques/DemandesUtilisateurs.tsx

@@ -1,8 +1,9 @@
-import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { useLocation } from 'react-router-dom'
+import styled, { css } from 'styled-components'
 
 import { Chip } from '@/design-system'
+import { Button } from '@/design-system/buttons'
 import { Emoji } from '@/design-system/emoji'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
@@ -34,10 +35,16 @@ export default function DemandeUtilisateurs() {
 			</Body>
 
 			<H3>En attente d'implémentation</H3>
-			<Pagination items={stats?.retoursUtilisateurs.open ?? []} />
+			<Pagination
+				items={stats?.retoursUtilisateurs.open ?? []}
+				title="Liste des demandes utilisateurs en attente d'implémentation"
+			/>
 
 			<H3>Réalisées</H3>
-			<Pagination items={stats?.retoursUtilisateurs.closed ?? []} />
+			<Pagination
+				items={stats?.retoursUtilisateurs.closed ?? []}
+				title="Liste des demandes utilisateurs réalisées"
+			/>
 		</section>
 	)
 }
@@ -51,13 +58,15 @@ type IssueProps = {
 
 type PaginationProps = {
 	items: Array<IssueProps>
+	title: string
 }
 
-function Pagination({ items }: PaginationProps) {
-	const [currentPage, setCurrentPage] = useState(0)
+function Pagination({ title, items }: PaginationProps) {
+	const state: Record<string, number> = useLocation().state ?? {}
+	const currentPage = state[title] ?? 0
 
 	return (
-		<>
+		<nav aria-label={`${title} : menu de navigation paginée`}>
 			<Ol>
 				{items.slice(currentPage * 10, (currentPage + 1) * 10).map((item) => (
 					<Issue key={`issue-${item.number}`} {...item} />
@@ -67,7 +76,12 @@ function Pagination({ items }: PaginationProps) {
 				{[...Array(Math.ceil(items.length / 10)).keys()].map((i) => (
 					<li key={i}>
 						<PagerButton
-							onClick={() => setCurrentPage(i)}
+							light
+							size="XXS"
+							replace
+							to=""
+							state={{ ...state, [title]: i }}
+							aria-label={`${title}, Page numéro ${i + 1}`}
 							currentPage={currentPage === i}
 							aria-selected={currentPage === i ? true : undefined}
 							aria-current={currentPage === i ? 'page' : undefined}
@@ -77,13 +91,19 @@ function Pagination({ items }: PaginationProps) {
 					</li>
 				))}
 			</Pager>
-		</>
+		</nav>
 	)
 }
 
 function Issue({ title, number, count, closedAt }: IssueProps) {
 	const { t } = useTranslation()
 
+	// Remove emojis from title string
+	title = title.replace(
+		/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
+		''
+	)
+
 	return (
 		<StyledLi>
 			{count > 1 && <Chip>{count} demandes</Chip>}{' '}
@@ -128,24 +148,22 @@ type PagerButtonProps = {
 	currentPage: boolean
 }
 
-const PagerButton = styled.button<PagerButtonProps>`
-	font-family: ${({ theme }) => theme.fonts.main};
-	padding: 0.375rem 0.5rem;
+const PagerButton = styled(Button)<PagerButtonProps>`
 	border: ${({ theme, currentPage }) =>
 		currentPage
-			? `2px solid ${theme.colors.bases.primary[500]}`
-			: `1px solid ${theme.colors.extended.grey[300]}`};
+			? `2px solid ${theme.colors.bases.primary[600]}`
+			: `2px solid ${theme.colors.extended.grey[400]}`};
 	background-color: ${({ theme, currentPage }) =>
-		currentPage
-			? theme.colors.bases.primary[100]
-			: theme.colors.extended.grey[100]};
-
+		currentPage &&
+		css`
+			${theme.colors.bases.primary[100]}
+		`};
 	&:hover {
 		background-color: ${({ theme }) => theme.colors.bases.primary[100]};
 	}
 `
 
-const Pager = styled.ul`
+const Pager = styled.ol`
 	font-family: ${({ theme }) => theme.fonts.main};
 	text-align: center;
 	margin: auto;