feat: Retire `title` des balises input et remplace par `aria-labelledby`

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>

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 />

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>}
 		/>