feat: Correction d'aria-label

site/source/components/PeriodSwitch.tsx

@@ -28,6 +28,7 @@ export default function PeriodSwitch() {
 				onChange={(unit: string) => dispatch(updateUnit(unit))}
 				mode="tab"
 				hideRadio
+				aria-label={t("Mode d'affichage")}
 			>
 				{periods.map(({ label, unit }) => (
 					<span

site/source/components/company/SearchField.tsx

@@ -11,6 +11,7 @@ import {
 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 { Grid } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { StyledLink } from '@/design-system/typography/link'
@@ -22,6 +23,13 @@ import CompanySearchDetails from './SearchDetails'
 
 const StyledCard = styled(Card)`
 	flex-direction: row; // for Safari <= 13
+	cursor: pointer;
+	&:hover {
+		background-color: ${({ theme }) => theme.colors.extended.dark[700]};
+	}
+	&:focus-visible {
+		${FocusStyle}
+	}
 `
 
 export function CompanySearchField(props: {
@@ -99,6 +107,7 @@ function Results({
 	onSubmit?: (établissement: FabriqueSocialEntreprise) => void
 }) {
 	const { t } = useTranslation()
+	console.log(results)
 
 	return !results.length ? (
 		<FromTop>
@@ -147,9 +156,11 @@ function Results({
 				{results.map((etablissement) => (
 					<Grid key={etablissement.siren} item xs={12}>
 						<StyledCard
-							bodyAs="div"
-							onPress={() => onSubmit?.(etablissement)}
+							role="button"
+							onClick={() => onSubmit?.(etablissement)}
 							compact
+							aria-label={etablissement.label}
+							tabIndex={0}
 						>
 							<CompanySearchDetails entreprise={etablissement} />
 						</StyledCard>

site/source/components/conversation/AnswerList.tsx

@@ -255,7 +255,9 @@ function StepsTable({
 						<Grid item xs>
 							{rule.title}
 							<ExplicableRule
-								aria-label={t('En savoir plus')}
+								aria-label={t(`Plus d'info sur, {{ title }}`, {
+									title: rule.title,
+								})}
 								light
 								dottedName={rule.dottedName}
 							/>

site/source/components/conversation/ChoicesInput.tsx

@@ -218,7 +218,9 @@ function RadioChoice<Names extends string = DottedName>({
 								<ExplicableRule
 									light
 									dottedName={node.dottedName as DottedName}
-									aria-label={`En savoir plus sur ${node.title}`}
+									aria-label={t("Plus d'infos sur, {{ tile }}", {
+										title: node.title,
+									})}
 								/>
 							)}
 						</span>

site/source/components/conversation/MulipleChoicesInput.tsx

@@ -1,6 +1,7 @@
 import { DottedName } from 'modele-social'
 import Engine, { PublicodesExpression, RuleNode } from 'publicodes'
 import { Fragment } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import { Checkbox } from '@/design-system'
 import { Emoji } from '@/design-system/emoji'
@@ -47,6 +48,7 @@ type CheckBoxRuleProps = {
 }
 function CheckBoxRule({ node, engine, onChange }: CheckBoxRuleProps) {
 	const evaluation = engine.evaluate(node)
+	const { t } = useTranslation()
 	if (evaluation.nodeValue === null) {
 		return null
 	}
@@ -63,7 +65,9 @@ function CheckBoxRule({ node, engine, onChange }: CheckBoxRuleProps) {
 			<ExplicableRule
 				light
 				dottedName={node.dottedName as DottedName}
-				aria-label={`En savoir plus sur ${node.title}`}
+				aria-label={t("Plus d'infos sur, {{ tile }}", {
+					title: node.title,
+				})}
 			/>
 			<br />
 		</>

site/source/components/layout/Header.tsx

@@ -35,7 +35,7 @@ export default function Header() {
 				<StyledHeader>
 					<Link
 						to={absoluteSitePaths.index}
-						aria-label={t("Logo mon entreprise, accéder à la page d'accueil")}
+						aria-label={t("URSSAF Mon entreprise, accéder à la page d'accueil")}
 					>
 						<StyledLogo>
 							<Logo />

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

@@ -32,18 +32,25 @@ type CardProps = GenericCardProps & {
 	compact?: boolean
 	bodyAs?: React.ComponentProps<typeof Body>['as']
 	role?: string
+	tabIndex?: number
+	onClick?: () => void
+	className?: string
 }
 
-export function Card({
-	title,
-	icon,
-	children,
-	ctaLabel,
-	compact = false,
-	bodyAs,
-	role,
-	...ariaButtonProps
-}: CardProps) {
+export function Card(props: CardProps) {
+	const {
+		title,
+		icon,
+		children,
+		ctaLabel,
+		compact = false,
+		bodyAs,
+		role,
+		tabIndex,
+		onClick,
+		className,
+		...ariaButtonProps
+	} = props
 	const ref = useRef<HTMLAnchorElement | HTMLButtonElement>(null)
 	const titleProps = getTitleProps(title, 'h3')
 	const linkProps = useExternalLinkProps(ariaButtonProps)
@@ -53,7 +60,13 @@ export function Card({
 	delete buttonOrLinkProps.title
 
 	return (
-		<CardContainer $compact={compact}>
+		<CardContainer
+			$compact={compact}
+			tabIndex={tabIndex}
+			onClick={onClick}
+			className={className}
+			aria-label={props?.['aria-label']}
+		>
 			{icon && <IconContainer>{icon}</IconContainer>}
 			{title &&
 				(compact ? (

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

@@ -73,15 +73,17 @@ type SimpleFieldProps = {
 	question?: RuleNode['rawNode']['question']
 	showSuggestions?: boolean
 	label?: string
+	['aria-label']?: string
 }
 
-export function SimpleField({
-	dottedName,
-	question,
-	summary,
-	showSuggestions = false,
-	label,
-}: SimpleFieldProps) {
+export function SimpleField(props: SimpleFieldProps) {
+	const {
+		dottedName,
+		question,
+		summary,
+		showSuggestions = false,
+		label,
+	} = props
 	const dispatch = useDispatch()
 	const engine = useContext(EngineContext)
 	const evaluation = engine.evaluate(dottedName)
@@ -149,6 +151,7 @@ export function SimpleField({
 				}
 				onChange={dispatchValue}
 				showSuggestions={showSuggestions}
+				aria-label={props?.['aria-label']}
 			/>
 			<Spacing sm />
 		</FadeIn>

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

@@ -209,7 +209,10 @@ function ImpositionSection() {
 
 	return (
 		<>
-			<SimpleField dottedName="entreprise . imposition" />
+			<SimpleField
+				aria-label={t("Régime d'imposition")}
+				dottedName="entreprise . imposition"
+			/>
 
 			<WhenAlreadyDefined dottedName="entreprise . imposition">
 				<SimpleField dottedName="déclaration charge sociales . comptabilité" />

site/source/pages/simulateurs/dividendes/Dividendes.tsx

@@ -51,7 +51,7 @@ function OptionBarèmeSwitch() {
 	const engineOptionPFU = engine.evaluate(dottedName).nodeValue as string
 
 	const [currentOptionPFU, setCurrentOptionPFU] = useState(engineOptionPFU)
-
+	const { t } = useTranslation()
 	useEffect(() => {
 		if (currentOptionPFU !== engineOptionPFU) {
 			setCurrentOptionPFU(engineOptionPFU)
@@ -65,6 +65,7 @@ function OptionBarèmeSwitch() {
 				setCurrentOptionPFU(value)
 				dispatch(updateSituation(dottedName, `'${value}'`))
 			}}
+			aria-label={t("Régime d'imposition")}
 		>
 			<Radio value="PFU">
 				<Trans>

site/source/pages/simulateurs/salarié/Salarié.tsx

@@ -151,7 +151,12 @@ export const SeoExplanations = () => {
 			</Body>
 			<Body>
 				Il existe des{' '}
-				<RuleLink dottedName="salarié . coût total employeur . aides">
+				<RuleLink
+					aria-label={t(
+						'aides différées, voir le détail du calcul pour aides différées'
+					)}
+					dottedName="salarié . coût total employeur . aides"
+				>
 					aides différées
 				</RuleLink>{' '}
 				à l'embauche qui ne sont pas toutes prises en compte par notre

site/source/pages/statistiques/DemandesUtilisateurs.tsx

@@ -6,7 +6,7 @@ import { Chip } from '@/design-system'
 import { Emoji } from '@/design-system/emoji'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
-import { Li, Ul } from '@/design-system/typography/list'
+import { Li, Ol, Ul } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'
 import { useFetchData } from '@/hooks/useFetchData'
 
@@ -58,11 +58,47 @@ function Pagination({ items }: PaginationProps) {
 
 	return (
 		<>
-			<Ul>
-				{items.slice(currentPage * 10, (currentPage + 1) * 10).map((item) => (
-					<Issue key={`issue-${item.number}`} {...item} />
-				))}
-			</Ul>
+			<Ol>
+				{[
+					{
+						title:
+							'mon-entreprise: bug scrolling de la popup Answers (desktop et mobile)',
+						closedAt: '2021-01-12T16:22:52Z',
+						number: 1326,
+						count: 1,
+					},
+					{
+						title: 'Question vide avec le lien direct "impot"',
+						closedAt: '2021-01-05T16:18:10Z',
+						number: 1311,
+						count: 2,
+					},
+					{
+						title:
+							'Abattament fiscal de 10% seulement sur les traitements et salaires',
+						closedAt: '2021-01-05T14:02:59Z',
+						number: 1306,
+						count: 2,
+					},
+					{
+						title: 'Franchise de TVA pour les professions libérales',
+						closedAt: '2021-01-04T11:35:22Z',
+						number: 1216,
+						count: 1,
+					},
+					{
+						title:
+							"Simulateur Auto-Entrepreneur : chiffre d'affaire affiché à 100 000 000 €/an",
+						closedAt: '2020-12-10T11:10:13Z',
+						number: 1246,
+						count: 1,
+					},
+				]
+					.slice(currentPage * 10, (currentPage + 1) * 10)
+					.map((item) => (
+						<Issue key={`issue-${item.number}`} {...item} />
+					))}
+			</Ol>
 			<Pager>
 				{[...Array(Math.ceil(items.length / 10)).keys()].map((i) => (
 					<li key={i}>
@@ -70,6 +106,7 @@ function Pagination({ items }: PaginationProps) {
 							onClick={() => setCurrentPage(i)}
 							currentPage={currentPage === i}
 							aria-selected={currentPage === i ? true : undefined}
+							aria-current={currentPage === i ? 'page' : undefined}
 						>
 							{i + 1}
 						</PagerButton>
@@ -89,7 +126,8 @@ function Issue({ title, number, count, closedAt }: IssueProps) {
 			<Link
 				href={`https://github.com/betagouv/mon-entreprise/issues/${number}`}
 				aria-label={t(
-					'{{title}}, voir la demande sur github.com, nouvelle fenêtre'
+					'{{title}}, voir la demande sur github.com, nouvelle fenêtre',
+					{ title }
 				)}
 			>
 				{title}

site/source/pages/statistiques/SatisfactionChart.tsx

@@ -81,6 +81,7 @@ export default function SatisfactionChart({ data }: SatisfactionChartProps) {
 			<ToggleGroup
 				onChange={(val) => setDataType(val as DataType)}
 				defaultValue={dataType}
+				aria-label={t("Mode d'affichage")}
 			>
 				<Radio value="nombres">
 					<Trans>nombres</Trans>