Fix la navigation au clavier dans les questions

betagouv · Nov 25, 2021 · c231a62 · c231a62
1 parent 342eea4
commit c231a62
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 5 deletions.
diff --git a/mon-entreprise/source/components/conversation/Conversation.tsx b/mon-entreprise/source/components/conversation/Conversation.tsx
@@ -80,6 +80,7 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
 					/>
 				</fieldset>
 				<Spacing md />
+				<button aria-hidden className="sr-only" type="submit" tabIndex={-1} />
 				<Grid container spacing={2}>
 					{previousAnswers.length > 0 && (
 						<Grid item xs={6} sm="auto">
@@ -89,7 +90,11 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
 						</Grid>
 					)}
 					<Grid item xs={6} sm="auto">
-						<Button size="XS" type="submit" light={!currentQuestionIsAnswered}>
+						<Button
+							size="XS"
+							onPress={goToNextQuestion}
+							light={!currentQuestionIsAnswered}
+						>
 							{currentQuestionIsAnswered ? (
 								<Trans>Suivant</Trans>
 							) : (

diff --git a/mon-entreprise/source/components/conversation/DateInput.tsx b/mon-entreprise/source/components/conversation/DateInput.tsx
@@ -1,6 +1,6 @@
 import { InputProps } from 'Components/conversation/RuleInput'
-import { useCallback, useMemo } from 'react'
 import { DateField } from 'DesignSystem/field'
+import { useCallback, useMemo } from 'react'
 import InputSuggestions from './InputSuggestions'
 
 export default function DateInput({
@@ -10,6 +10,7 @@ export default function DateInput({
 	title,
 	onSubmit,
 	required,
+	autoFocus,
 	value,
 }: InputProps) {
 	const dateValue = useMemo(() => {
@@ -52,6 +53,7 @@ export default function DateInput({
 				<DateField
 					label={title}
 					value={missing ? undefined : dateValue}
+					autoFocus={autoFocus}
 					isRequired={required}
 					onChange={handleDateChange}
 				/>

diff --git a/mon-entreprise/source/components/conversation/select/SelectCommune.tsx b/mon-entreprise/source/components/conversation/select/SelectCommune.tsx
@@ -77,7 +77,13 @@ async function searchCommunes(input: string): Promise<Array<Commune> | null> {
 		.slice(0, 10)
 }
 
-export default function Select({ onChange, value, id, missing }: InputProps) {
+export default function Select({
+	onChange,
+	value,
+	id,
+	missing,
+	autoFocus,
+}: InputProps) {
 	const [name, setName] = useState(
 		missing ? '' : formatCommune(value as Commune)
 	)
@@ -188,6 +194,7 @@ export default function Select({ onChange, value, id, missing }: InputProps) {
 				/* role="combobox" // FIXME: Need to use a proper combobox component here */
 				errorMessage={noResult && <Trans>Cette commune n'existe pas</Trans>}
 				id={id}
+				autoFocus={autoFocus}
 				aria-autocomplete="list"
 				onBlur={submitFocusedElem}
 				aria-readonly="true"

diff --git a/mon-entreprise/source/components/conversation/select/SelectTauxRisque.js b/mon-entreprise/source/components/conversation/select/SelectTauxRisque.js
@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import Worker from './SelectTauxRisque.worker.js'
 const worker = new Worker()
 
-function SelectComponent({ onChange, onSubmit, options }) {
+function SelectComponent({ onChange, onSubmit, options, autoFocus }) {
 	const [searchResults, setSearchResults] = useState()
 	let submitOnChange = (option) => {
 		onChange(option['Taux net'].replace(',', '.') + '%')
@@ -23,6 +23,7 @@ function SelectComponent({ onChange, onSubmit, options }) {
 			<TextField
 				type="search"
 				placeholder={t("Saisissez votre domaine d'activité")}
+				autoFocus={autoFocus}
 				errorMessage={
 					searchResults &&
 					searchResults.length === 0 && <Trans>Aucun résultat</Trans>

diff --git a/mon-entreprise/source/design-system/field/DateField.tsx b/mon-entreprise/source/design-system/field/DateField.tsx
@@ -1,5 +1,5 @@
-import TextField from './TextField'
 import { AriaTextFieldOptions } from '@react-aria/textfield'
+import TextField from './TextField'
 
 export default function DateField(props: AriaTextFieldOptions) {
 	return (

diff --git a/mon-entreprise/source/design-system/field/SearchField.tsx b/mon-entreprise/source/design-system/field/SearchField.tsx
@@ -51,6 +51,7 @@ export default function SearchField(
 			>
 				{props.isSearchStalled ? <Loader /> : <SearchIcon />}
 				<SearchInput
+					{...(props as InputHTMLAttributes<HTMLInputElement>)}
 					{...(inputProps as InputHTMLAttributes<HTMLInputElement>)}
 					placeholder={inputProps.placeholder ?? ''}
 					ref={ref}