From 67b59591b17c933db4e4192d3effc39c715dc5c1 Mon Sep 17 00:00:00 2001
From: Benjamin Arias <benjamin.j.arias@gmail.com>
Date: Mon, 12 Sep 2022 16:24:25 +0200
Subject: [PATCH] feat: Retire `title` des balises input et remplace par
 `aria-labelledby`

---
 .../components/conversation/ChoicesInput.tsx       | 14 ++++++++++++--
 .../components/conversation/Conversation.tsx       |  3 ++-
 site/source/components/conversation/RuleInput.tsx  |  4 ++--
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/site/source/components/conversation/ChoicesInput.tsx b/site/source/components/conversation/ChoicesInput.tsx
index 85f11c4f7..8e2d5e990 100644
--- a/site/source/components/conversation/ChoicesInput.tsx
+++ b/site/source/components/conversation/ChoicesInput.tsx
@@ -76,6 +76,7 @@ export function MultipleAnswerInput<Names extends string = DottedName>({
 	if (type === 'select') {
 		return (
 			<Select
+				aria-labelledby={props['aria-labelledby'] || undefined}
 				label={props.title}
 				onSelectionChange={handleChange}
 				defaultSelectedKey={defaultValue}
@@ -97,6 +98,7 @@ export function MultipleAnswerInput<Names extends string = DottedName>({
 			<RadioCardGroup
 				onChange={handleChange}
 				value={currentSelection ?? undefined}
+				aria-labelledby={props['aria-labelledby'] || undefined}
 			>
 				{choice.children.map((node) => (
 					<Fragment key={node.dottedName}>
@@ -122,7 +124,11 @@ export function MultipleAnswerInput<Names extends string = DottedName>({
 	const Component = type === 'radio' ? RadioGroup : ToggleGroup
 
 	return (
-		<Component onChange={handleChange} value={currentSelection ?? undefined}>
+		<Component
+			onChange={handleChange}
+			value={currentSelection ?? undefined}
+			aria-labelledby={props['aria-labelledby'] || undefined}
+		>
 			<RadioChoice
 				autoFocus={props.autoFocus ? defaultValue : undefined}
 				choice={choice}
@@ -228,7 +234,11 @@ export function OuiNonInput<Names extends string = DottedName>(
 	const { handleChange, defaultValue, currentSelection } = useSelection(props)
 
 	return (
-		<ToggleGroup onChange={handleChange} value={currentSelection ?? undefined}>
+		<ToggleGroup
+			onChange={handleChange}
+			value={currentSelection ?? undefined}
+			aria-labelledby={props['aria-labelledby'] || undefined}
+		>
 			<Radio value="oui" autoFocus={props.autoFocus && defaultValue === 'oui'}>
 				<Trans>Oui</Trans>
 			</Radio>
diff --git a/site/source/components/conversation/Conversation.tsx b/site/source/components/conversation/Conversation.tsx
index 6ca45d3e9..f29baedc3 100644
--- a/site/source/components/conversation/Conversation.tsx
+++ b/site/source/components/conversation/Conversation.tsx
@@ -99,7 +99,7 @@ export default function Conversation({
 									align-items: baseline;
 								`}
 							>
-								<H3>
+								<H3 id="questionHeader">
 									{evaluateQuestion(engine, engine.getRule(currentQuestion))}
 									<ExplicableRule light dottedName={currentQuestion} />
 								</H3>
@@ -110,6 +110,7 @@ export default function Conversation({
 									onChange={onChange}
 									key={currentQuestion}
 									onSubmit={goToNextQuestion}
+									aria-labelledby="questionHeader"
 								/>
 							</fieldset>
 							<Spacing md />
diff --git a/site/source/components/conversation/RuleInput.tsx b/site/source/components/conversation/RuleInput.tsx
index 2a7be68ee..f28489930 100644
--- a/site/source/components/conversation/RuleInput.tsx
+++ b/site/source/components/conversation/RuleInput.tsx
@@ -52,7 +52,7 @@ export type InputProps<Name extends string = string> = Omit<
 	Props<Name>,
 	'onChange'
 > &
-	Pick<RuleNode, 'title' | 'suggestions'> & {
+	Pick<RuleNode, 'suggestions'> & {
 		question: RuleNode['rawNode']['question']
 		description: RuleNode['rawNode']['description']
 		value: EvaluatedNode['nodeValue']
@@ -102,7 +102,6 @@ export default function RuleInput<Names extends string = DottedName>({
 			(!showDefaultDateValue && dottedName in evaluation.missingVariables),
 		onChange: (value: PublicodesExpression | undefined) =>
 			onChange(value, dottedName),
-		title: rule.title,
 		onSubmit,
 		description: rule.rawNode.description,
 		id: props.id ?? dottedName,
@@ -172,6 +171,7 @@ export default function RuleInput<Names extends string = DottedName>({
 	return (
 		<NumberInput
 			{...commonProps}
+			title=""
 			unit={evaluation.unit}
 			value={value as Evaluation<number>}
 		/>