Fix datepicker

site/package.json

@@ -54,6 +54,7 @@
 		"@axe-core/react": "^4.5.2",
 		"@internationalized/number": "^3.2.0",
 		"@leeoniya/ufuzzy": "^1.0.2",
+		"@popperjs/core": "^2.11.7",
 		"@publicodes/api": "^1.0.0-beta.69",
 		"@react-aria/accordion": "^3.0.0-alpha.15",
 		"@react-aria/button": "^3.7.0",
@@ -89,6 +90,7 @@
 		"publicodes": "^1.0.0-beta.69",
 		"publicodes-react": "^1.0.0-beta.69",
 		"react": "^18.2.0",
+		"react-aria": "^3.24.0",
 		"react-day-picker": "^8.7.1",
 		"react-dom": "^18.2.0",
 		"react-easy-emoji": "^1.8.1",

site/source/components/ChiffreAffairesActivitéMixte.tsx

@@ -175,11 +175,7 @@ function ActivitéMixte() {
 						Activité mixte
 					</Switch>
 				</Trans>
-				<ExplicableRule
-					dottedName={rule.dottedName}
-					light
-					aria-label={t('En savoir plus')}
-				/>
+				<ExplicableRule dottedName={rule.dottedName} light />
 			</StyledActivitéMixteContainer>
 		</div>
 	)

site/source/components/PaySlip.tsx

@@ -150,11 +150,7 @@ export default function PaySlip() {
 						<Fragment key={section.dottedName}>
 							<H5 className="payslip__cotisationTitle">
 								{section.title}
-								<ExplicableRule
-									light
-									dottedName={section.dottedName}
-									aria-label={t('En savoir plus')}
-								/>
+								<ExplicableRule light dottedName={section.dottedName} />
 							</H5>
 							{cotisations.map((cotisation) => (
 								<Cotisation key={cotisation} dottedName={cotisation} />

site/source/components/conversation/AnswerList.tsx

@@ -313,11 +313,7 @@ function AnswerElement(rule: RuleNode) {
 					<form onSubmit={onClose}>
 						<H3>
 							{evaluateQuestion(engine, engine.getRule(questionDottedName))}
-							<ExplicableRule
-								light
-								dottedName={questionDottedName}
-								aria-label={t('En savoir plus')}
-							/>
+							<ExplicableRule light dottedName={questionDottedName} />
 						</H3>
 						<RuleInput
 							dottedName={questionDottedName}

site/source/components/conversation/Conversation.tsx

@@ -94,11 +94,7 @@ export default function Conversation({
 							>
 								<H3 id="questionHeader" as="h2">
 									{evaluateQuestion(engine, engine.getRule(currentQuestion))}
-									<ExplicableRule
-										aria-label={t('En savoir plus')}
-										light
-										dottedName={currentQuestion}
-									/>
+									<ExplicableRule light dottedName={currentQuestion} />
 								</H3>
 							</div>
 							<fieldset>

site/source/design-system/field/DateField.tsx

@@ -4,6 +4,7 @@ import { format as formatDate, isValid, parse } from 'date-fns'
 import { enUS, fr } from 'date-fns/locale'
 import FocusTrap from 'focus-trap-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useId } from 'react-aria'
 import { DayPicker, useInput } from 'react-day-picker'
 import { useTranslation } from 'react-i18next'
 import { usePopper } from 'react-popper'
@@ -13,7 +14,6 @@ import { useOnClickOutside } from '@/hooks/useClickOutside'
 
 import { Button } from '../buttons'
 import { Emoji } from '../emoji'
-import { Spacing } from '../layout'
 import { Body } from '../typography/paragraphs'
 import TextField from './TextField'
 
@@ -21,7 +21,6 @@ interface DateFieldProps {
 	defaultSelected?: Date
 	inputValue?: string
 	onChange?: (value?: string) => void
-
 	placeholder?: string
 	label?: string
 	'aria-label'?: string
@@ -49,6 +48,8 @@ export default function DateField(props: DateFieldProps) {
 		null
 	)
 
+	const id = useId()
+
 	const format = 'dd/MM/y'
 	const { inputProps, dayPickerProps } = useInput({
 		defaultSelected,
@@ -124,7 +125,7 @@ export default function DateField(props: DateFieldProps) {
 	}, [defaultSelected, handleDaySelect])
 
 	return (
-		<Container ref={containerRef}>
+		<div ref={containerRef}>
 			<Wrapper ref={popperRef}>
 				<TextField
 					{...ariaProps}
@@ -149,7 +150,7 @@ export default function DateField(props: DateFieldProps) {
 						selected === undefined &&
 						t(
 							'design-system.date-picker.error.invalid-date',
-							'Format de date invalide, le format attendu est jours/mois/année'
+							'Format de date invalide, le format attendu est JJ/MM/AAAA (par exemple, 11/06/1991).'
 						)
 					}
 				/>
@@ -157,20 +158,16 @@ export default function DateField(props: DateFieldProps) {
 					ref={buttonRef}
 					onPress={handleButtonPress}
 					type="button"
+					aria-haspopup="dialog"
 					size="XXS"
+					aria-expanded={isPopperOpen}
+					aria-controls={isPopperOpen ? id : undefined}
 					aria-label={t(
-						'design-system.date-picker.choose-date',
-						'Choisir une date'
+						'design-system.date-picker.open-selector',
+						'Ouvrir le sélecteur de date'
 					)}
 				>
-					<Emoji
-						emoji="📅"
-						aria-label={t(
-							'design-system.date-picker.open-selector',
-							'Ouvrir le sélecteur de date'
-						)}
-						aria-hidden={false}
-					/>
+					<Emoji emoji="📅" aria-hidden />
 				</StyledButton>
 			</Wrapper>
 
@@ -178,26 +175,30 @@ export default function DateField(props: DateFieldProps) {
 				<FocusTrap
 					active
 					focusTrapOptions={{
-						initialFocus: false,
 						allowOutsideClick: true,
 						clickOutsideDeactivates: true,
-						fallbackFocus: buttonRef.current ?? undefined,
+						escapeDeactivates: true,
 					}}
 				>
 					<StyledBody
 						as="div"
+						id={id}
 						tabIndex={-1}
 						style={popper.styles.popper}
 						className="dialog-sheet"
 						{...popper.attributes.popper}
 						ref={setPopperElement}
 						role="dialog"
-						aria-label="DayPicker calendar"
+						onKeyDown={(e) => {
+							if (e.key === 'Escape') {
+								closePopper()
+							}
+						}}
+						aria-label="Calendrier de selection de date"
 					>
 						<DayPicker
 							{...dayPickerProps}
 							captionLayout="dropdown-buttons"
-							initialFocus={isPopperOpen}
 							mode="single"
 							defaultMonth={selected}
 							selected={selected}
@@ -206,7 +207,7 @@ export default function DateField(props: DateFieldProps) {
 					</StyledBody>
 				</FocusTrap>
 			)}
-		</Container>
+		</div>
 	)
 }
 
@@ -221,9 +222,9 @@ const StyledBody = styled(Body)`
 		theme.darkMode ? theme.elevationsDarkMode[2] : theme.elevations[2]};
 `
 
-const Container = styled.div``
-
 const Wrapper = styled.div`
+	display: flex;
+	align-items: center;
 	position: relative;
 `
 
@@ -231,7 +232,7 @@ const StyledButton = styled(Button)`
 	max-width: 55px;
 	position: absolute;
 	right: 0;
-	top: 0;
+
 	margin: 0.5rem;
 `
 

site/source/design-system/field/TextField.tsx

@@ -112,7 +112,7 @@ export const StyledDescription = styled(ExtraSmallBody)`
 	padding: ${({ theme }) => `${theme.spacings.xxs} ${theme.spacings.sm}`};
 	will-change: color;
 	transition: color 0.2s;
-	margin-top: 0;
+	margin-top: ${({ theme }) => `${theme.spacings.xs}`};
 `
 
 export const StyledErrorMessage = styled(StyledDescription)`

site/source/pages/assistants/declaration-revenu-independants/components/DéclarationRevenu.tsx

@@ -54,10 +54,7 @@ const RuleInputWithTitle = ({
 					`}
 				>
 					{title}
-					<ExplicableRule
-						dottedName={dottedName}
-						aria-label={t('En savoir plus')}
-					/>
+					<ExplicableRule dottedName={dottedName} />
 				</H3>
 			)}
 			<RuleInput