diff --git a/src/client/components/ui/Select/Select.test.tsx b/src/client/components/ui/Select/Select.test.tsx
index 9a9c7e533b..3f15a2359b 100644
--- a/src/client/components/ui/Select/Select.test.tsx
+++ b/src/client/components/ui/Select/Select.test.tsx
@@ -3,438 +3,326 @@
  */
 import '@testing-library/jest-dom';
 
-import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 
 import { KeyBoard } from '~/client/components/keyboard.fixture';
 import { Select } from '~/client/components/ui/Select/Select';
-import { mapTypeDeContratToOffreEmploiCheckboxFiltre } from '~/client/utils/offreEmploi.mapper';
-import { Offre } from '~/server/offres/domain/offre';
 
-describe('Select', () => {
 
-	describe('Select Single', () => {
-		it('quand on clique sur le select, retourne une liste d‘options', async () => {
-			//GIVEN
-			const user = userEvent.setup();
-			render(
-				<Select
-					placeholder={'Temps de travail'}
-					name="tempsDeTravail"
-					optionList={Offre.TEMPS_DE_TRAVAIL_LIST}
-					label={'Temps de travail'}
-					value=""
-				/>,
-			);
-
-			//WHEN
-			const button = screen.getByRole('button', { name: 'Temps de travail' });
-			await user.click(button);
-			screen.getByRole('listbox');
-
-			//THEN
-			expect(screen.getByRole('radio', { name: 'Temps plein' })).toBeInTheDocument();
-			expect(screen.getByRole('radio', { name: 'Temps partiel' })).toBeInTheDocument();
-			expect(screen.getByRole('radio', { name: 'Indifférent' })).toBeInTheDocument();
-		});
+describe('<Select />', () => {
+	describe('interaction support', () => {
+		describe('quand la liste d‘options est fermée', () => {
+			it('les options sont masquées', () => {
+				const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+				render(<Select optionList={options} label={'Temps de travail'}/>);
+				expect(screen.queryByRole('option')).not.toBeInTheDocument();
+			});
+
+			it.todo('lorsque l‘utilisateur fait "fleche du bas", la liste d‘options s‘ouvre sans changer le focus ou changer de séléction');
+
+			it.todo('lorsque l‘utilisateur fait "Alt + fleche du bas", la liste d‘options s‘ouvre sans changer le focus ou changer de séléction');
+
+			it.todo('lorsque l‘utilisateur fait "fleche du haut", la liste d‘options s‘ouvre et le focus visuel est placé sur la première option');
 
-		it('quand on sélectionne une valeur, met la valeur selectionné dans l‘input', async () => {
-			//GIVEN
-			render(
-				<Select
-					name="tempsDeTravail"
-					optionList={Offre.TEMPS_DE_TRAVAIL_LIST}
-					label={'Temps de travail'}
-				/>,
-			);
-
-			//WHEN
-			const button = screen.getByRole('button', { name: 'Temps de travail' });
-			fireEvent.click(button);
-			const listbox = screen.getByRole('listbox');
-			const input = within(listbox).getByRole('radio', { name: 'Temps plein' });
-			fireEvent.click(input);
-
-			//THEN
-			await waitFor(async () => {
-				const placeholder = await screen.findByTestId('Select-Placeholder');
-				expect(placeholder.textContent).toEqual('Temps plein');
+			describe('lorsque l‘utilisateur fait "Entrer"', () => {
+				it('ouvre la liste d‘options', async () => {
+					const user = userEvent.setup();
+					const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+					render(<Select optionList={options} label={'label'}/>);
+
+					await user.tab();
+					await user.keyboard(KeyBoard.ENTER);
+
+					expect(screen.getByRole('listbox')).toBeVisible();
+				});
+
+				it.todo('ne change pas le focus et de selection');
 			});
 
-			const hiddenInput = await screen.findByTestId('Select-InputHidden');
-			expect(hiddenInput).toHaveValue('tempsPlein');
-		});
+			describe('lorsque l‘utilisateur fait "Espace"', () => {
+				it('la liste d‘options s‘ouvre', async () => {
+					const user = userEvent.setup();
+					const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+					render(<Select optionList={options} label={'label'}/>);
+
+					await user.tab();
+					await user.keyboard(KeyBoard.SPACE);
 
-		it('quand on sélectionne une valeur, on appelle la fonction onChange passée au select', async () => {
-			//GIVEN
-			const onChangeSpy = jest.fn();
-			render(
-				<Select
-					name="tempsDeTravail"
-					optionList={Offre.TEMPS_DE_TRAVAIL_LIST}
-					label={'Temps de travail'}
-					onChange={onChangeSpy}
-				/>,
-			);
-
-			//WHEN
-			const button = screen.getByRole('button', { name: 'Temps de travail' });
-			fireEvent.click(button);
-			const listbox = screen.getByRole('listbox');
-			const input = within(listbox).getByRole('radio', { name: 'Temps plein' });
-			fireEvent.click(input);
-
-			//THEN
-			expect(onChangeSpy).toHaveBeenCalledWith('tempsPlein');
+					expect(screen.getByRole('listbox')).toBeVisible();
+					expect(screen.getAllByRole('option').length).toBe(2);
+				});
+
+				it.todo('ne change pas le focus et de selection');
+			});
+
+			it.todo('lorsque l‘utilisateur fait "Home", la liste d‘options s‘ouvre et le focus visuel est placé sur la première option');
+
+			it.todo('lorsque l‘utilisateur fait "End", la liste d‘options s‘ouvre et le focus visuel est placé sur la dernière option');
+
+			describe('lorsque l‘utilisateur tape des caractères', () => {
+				it.todo('lorsque l‘utilisateur tape un seul caractère, la liste d‘options s‘ouvre et déplace le focus visuel sur la première option qui match le caractère');
+
+				it.todo('lorsque l‘utilisateur tape plusieurs caractères, la liste d‘options s‘ouvre et déplace le focus visuel sur la première option qui match les caractères');
+
+				it.todo('lorsque l‘utilisateur tape le même caractère plusieurs fois, la liste d‘options s‘ouvre et déplace le focus visuel sur la première option qui commence par ce caractère');
+			});
 		});
 
-		describe('Quand le champ est requis', () => {
-			it('n‘est pas invalide tant que l‘on ne l‘a pas touché', async () => {
-				// Given
-				render(
-					<Select
-						name="monselect"
-						required={true}
-						optionList={Offre.TEMPS_DE_TRAVAIL_LIST}
-						label="Mon Select"
-					/>,
-				);
-
-				// When
-				const input = await screen.findByTestId('Select-InputHidden');
-
-				// Then
-				expect(input).toBeRequired();
-				expect(input).toHaveAttribute('aria-invalid', 'false');
+		describe('simple select', () => {
+			it('l‘utilisateur séléctionne une option avec la souris, séléctionne l‘option et ferme la liste d‘option', async () => {
+				const user = userEvent.setup();
+				const onChange = jest.fn();
+				const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+				render(<Select optionList={options} label={'label'} onChange={onChange}/>);
+
+				await user.click(screen.getByRole('button'));
+				await user.click(screen.getByText('options 2'));
+
+				expect(screen.getByRole('textbox', { hidden: true })).toHaveValue('2');
+				expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
 			});
 
-			describe('Quand on ouvre la liste d‘option mais qu‘on perd le focus', () => {
-				it('est invalide', async () => {
-					// Given
-					render(
-						<>
-							<button>escape</button>
-							<Select
-								name="monselect"
-								required={true}
-								optionList={Offre.TEMPS_DE_TRAVAIL_LIST}
-								label="Mon Select"
-							/>
-						</>
-						,
-					);
-					// When
-					await userEvent.click(screen.getByText('Mon Select'));
-					await userEvent.click(screen.getByText('escape'));
-
-					// When
-					const input = await screen.findByTestId('Select-InputHidden');
-
-					// Then
-					expect(input).toBeInvalid();
+			describe('quand la liste d‘options est ouverte', () => {
+				it.todo('lorsque l‘utilisateur fait "Entrer", l‘option qui a le focus visuel est séléctionné et la liste d‘option se ferme');
+
+				it('lorsque l‘utilisateur fait "Espace", l‘option qui a le focus visuel est séléctionné et la liste d‘option se ferme', async () => {
+					const user = userEvent.setup();
+					const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+					render(<Select optionList={options} label={'label'}/>);
+
+					await user.tab();
+					await user.keyboard(KeyBoard.ENTER);
+					await user.keyboard(KeyBoard.ARROW_DOWN);
+					await user.keyboard(KeyBoard.SPACE);
+
+					expect(screen.getByRole('textbox', { hidden: true })).toHaveValue('2');
+					expect(screen.queryByRole('option')).not.toBeInTheDocument();
+				});
+
+				it.todo('lorsque l‘utilisateur fait "alt + fleche du haut", l‘option qui a le focus visuel est séléctionné et la liste d‘option se ferme');
+
+				it.todo('lorsque l‘utilisateur fait "Tab", l‘option qui a le focus visuel est séléctionné, la liste d‘option se ferme et le focus se déplace sur le prochain élément focusable');
+
+				it('lorsque l‘utilisateur fait "echap", ferme la liste d‘option sans séléctionner l‘option qui a le focus visuel', async () => {
+					const user = userEvent.setup();
+					const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+					render(<Select optionList={options} label={'label'}/>);
+
+					await user.tab();
+					await user.keyboard(KeyBoard.ENTER);
+					await user.keyboard(KeyBoard.ARROW_DOWN);
+					await user.keyboard(KeyBoard.ESCAPE);
+
+					expect(screen.getByRole('textbox', { hidden: true })).toHaveValue('');
+					expect(screen.queryByRole('option')).not.toBeInTheDocument();
 				});
 
-				it('a un message d‘erreur', async () => {
-					// Given
-					render(
-						<>
-							<button>escape</button>
-							<Select
-								name="monselect"
-								required={true}
-								optionList={Offre.TEMPS_DE_TRAVAIL_LIST}
-								label="Mon Select"
-							/>
-						</>
-						,
-					);
-					// When
-					await userEvent.click(screen.getByText('Mon Select'));
-					await userEvent.click(screen.getByText('escape'));
-
-					// Then
-					const input = await screen.findByTestId('Select-InputHidden');
-					expect(input).toHaveAccessibleErrorMessage('Veuillez sélectionner un choix');
+				describe('lorsque l‘utilisateur fait "fleche du bas"', () => {
+					it.todo('déplace le focus visuel sur la prochaine option');
+					it.todo('lorsqu‘il est sur la dernière option, ne déplace pas le focus visuel');
+				});
+
+				describe('lorsque l‘utilisateur fait "fleche du haut"', () => {
+					it.todo('déplace le focus visuel sur la précédente option');
+					it.todo('lorsqu‘il est sur la première option, ne déplace pas le focus visuel');
+				});
+
+				it.todo('lorsque l‘utilisateur fait "Home", déplace le focus visuel sur la première option');
+
+				it.todo('lorsque l‘utilisateur fait "End", déplace le focus visuel sur la dernière option');
+
+				describe('lorsque l‘utilisateur fait "PageUp"', () => {
+					it.todo('s‘il y a plus de 10 options précédentes, déplace le focus visuel de 10 options plus haut');
+					it.todo('s‘il y a moins de 10 options précédentes, déplace le focus visuel sur la première option');
+				});
+
+				describe('lorsque l‘utilisateur fait "PageDown"', () => {
+					it.todo('s‘il y a plus de 10 options suivantes, déplace le focus visuel de 10 options plus bas');
+					it.todo('s‘il y a moins de 10 options suivantes, déplace le focus visuel sur la dernière option');
 				});
 			});
 		});
-	});
 
-	describe('Select Multiple', () => {
-		it('quand on clique sur le select, retourne une liste d‘options', async () => {
-			//GIVEN
-			const user = userEvent.setup();
-			render(
-				<Select
-					multiple
-					placeholder={'Type de contrat'}
-					optionList={mapTypeDeContratToOffreEmploiCheckboxFiltre(Offre.TYPE_DE_CONTRAT_LIST)}
-					label={'Type de contrat'}
-				/>,
-			);
-
-			//WHEN
-			const button = screen.getByRole('button', { name: 'Type de contrat' });
-			await user.click(button);
-			screen.getByRole('listbox');
-
-			//THEN
-			expect(screen.getByRole('checkbox', { name: 'CDD' })).toBeInTheDocument();
-			expect(screen.getByRole('checkbox', { name: 'CDI' })).toBeInTheDocument();
-			expect(screen.getByRole('checkbox', { name: 'Intérim' })).toBeInTheDocument();
-			expect(screen.getByRole('checkbox', { name: 'Saisonnier' })).toBeInTheDocument();
-		});
+		describe('choix multiple select', () => {
+			it('l‘utilisateur séléctionne une option avec la souris, l‘option est ajoutée aux options séléctionnés et la liste d‘option ne se ferme pas', async () => {
+				const user = userEvent.setup();
+				const onChange = jest.fn();
+				const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+				render(<Select multiple optionList={options} label={'label'} onChange={onChange}/>);
+				const inputValue = screen.getByRole('textbox', { hidden: true });
+
+				await user.click(screen.getByRole('button'));
+				await user.click(screen.getByText('options 1'));
+				expect(inputValue).toHaveValue('1');
 
-		it('quand on sélectionne une valeur, met la valeur sélectionnée dans l‘input', async () => {
-			//GIVEN
-			render(
-				<Select
-					multiple
-					placeholder={'Type de contrat'}
-					optionList={mapTypeDeContratToOffreEmploiCheckboxFiltre(Offre.TYPE_DE_CONTRAT_LIST)}
-					label={'Type de contrat'}
-				/>,
-			);
-
-			//WHEN
-			const button = screen.getByRole('button', { name: 'Type de contrat' });
-			fireEvent.click(button);
-			const listbox = await screen.findByRole('listbox');
-			const input = within(listbox).getAllByRole('checkbox');
-			fireEvent.click(input[1]);
-
-			//THEN
-			await waitFor(async () => {
-				const placeholder = await screen.findByTestId('Select-Placeholder');
-				expect(placeholder.textContent).toEqual('1 choix sélectionné');
+				await user.click(screen.getByText('options 2'));
+				expect(inputValue).toHaveValue('1,2');
+
+				expect(screen.getAllByRole('option').length).toBe(2);
 			});
 
-			const hiddenInput = await screen.findByTestId('Select-InputHidden');
-			expect(hiddenInput).toHaveValue('CDI');
-		});
+			describe('quand la liste d‘options est ouverte', () => {
+				it.todo('lorsque l‘utilisateur fait "Entrer", l‘option qui a le focus visuel est ajoutée aux options séléctionnés et la liste d‘option se ferme');
 
-		it('quand on sélectionne une valeur, on appelle la fonction onChange passée au select', async () => {
-			// GIVEN
-			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
-			render(
-				<Select
-					multiple
-					onChange={onChangeSpy}
-					placeholder={'Type de contrat'}
-					optionList={mapTypeDeContratToOffreEmploiCheckboxFiltre(Offre.TYPE_DE_CONTRAT_LIST)}
-					label={'Type de contrat'}
-				/>,
-			);
-			const selectInput = screen.getByRole('button', { name: 'Type de contrat' });
-			await user.click(selectInput);
-			const listbox = await screen.findByRole('listbox');
-			const allOptions = within(listbox).getAllByRole('checkbox');
-
-			// WHEN
-			await user.click(allOptions[1]);
-
-			// THEN
-			const expectedContractType = Offre.TYPE_DE_CONTRAT_LIST[1].valeur;
-			expect(onChangeSpy).toHaveBeenCalledWith(expectedContractType);
+				it('lorsque l‘utilisateur fait "Espace", l‘option qui a le focus visuel est ajoutée aux options séléctionnés et la liste d‘option ne se ferme pas', async () => {
+					const user = userEvent.setup();
+					const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+					render(<Select multiple optionList={options} label={'label'} value="1"/>);
+
+					await user.tab();
+					await user.keyboard(KeyBoard.ENTER);
+					await user.keyboard(KeyBoard.ARROW_DOWN);
+					await user.keyboard(KeyBoard.SPACE);
+
+					expect(screen.getByRole('textbox', { hidden: true })).toHaveValue('1,2');
+					expect(screen.getAllByRole('option').length).toBe(2);
+				});
+
+				it.todo('lorsque l‘utilisateur fait "alt + fleche du haut", l‘option qui a le focus visuel est séléctionné et la liste d‘option se ferme');
+
+				it.todo('lorsque l‘utilisateur fait "Tab", l‘option qui a le focus visuel est séléctionné, la liste d‘option se ferme et le focus se déplace sur le prochain élément focusable');
+
+				it('lorsque l‘utilisateur fait "echap", ferme la liste d‘option sans séléctionner l‘option qui a le focus visuel', async () => {
+					const user = userEvent.setup();
+					const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+					render(<Select multiple optionList={options} label={'label'}/>);
+
+					await user.tab();
+					await user.keyboard(KeyBoard.ENTER);
+					await user.keyboard(KeyBoard.ARROW_DOWN);
+					await user.keyboard(KeyBoard.ESCAPE);
+
+					expect(screen.getByRole('textbox', { hidden: true })).toHaveValue('');
+					expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+				});
+
+				describe('lorsque l‘utilisateur fait "fleche du bas"', () => {
+					it.todo('déplace le focus visuel sur la prochaine option');
+					it.todo('lorsqu‘il est sur la dernière option, ne déplace pas le focus visuel');
+				});
+
+				describe('lorsque l‘utilisateur fait "fleche du haut"', () => {
+					it.todo('déplace le focus visuel sur la précédente option');
+					it.todo('lorsqu‘il est sur la première option, ne déplace pas le focus visuel');
+				});
+
+				it.todo('lorsque l‘utilisateur fait "Home", déplace le focus visuel sur la première option');
+
+				it.todo('lorsque l‘utilisateur fait "End", déplace le focus visuel sur la dernière option');
+
+				describe('lorsque l‘utilisateur fait "PageUp"', () => {
+					it.todo('s‘il y a plus de 10 options précédentes, déplace le focus visuel de 10 options plus haut');
+					it.todo('s‘il y a moins de 10 options précédentes, déplace le focus visuel sur la première option');
+				});
+
+				describe('lorsque l‘utilisateur fait "PageDown"', () => {
+					it.todo('s‘il y a plus de 10 options suivantes, déplace le focus visuel de 10 options plus bas');
+					it.todo('s‘il y a moins de 10 options suivantes, déplace le focus visuel sur la dernière option');
+				});
+			});
 		});
 	});
-});
 
-describe('Keyboard Select', () => {
-	describe('Select Single', () => {
-		it('ouvre les options avec la touche space', async () => {
+	describe('props', () => {
+		it('appelle onChange quand une valeur est selectionné', async () => {
 			const user = userEvent.setup();
-			render(
-				<Select
-					placeholder={'Temps de travail'}
-					name="tempsDeTravail"
-					optionList={Offre.TEMPS_DE_TRAVAIL_LIST}
-					label={'Temps de travail'}
-					value=""
-				/>,
-			);
-			const button = screen.getByRole('button', { name: 'Temps de travail' });
-			button.focus();
+			const onChange = jest.fn();
+			const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+			render(<Select optionList={options} label={'label'} onChange={onChange}/>);
+
+			await user.tab();
+			await user.keyboard(KeyBoard.ENTER);
+			await user.keyboard(KeyBoard.ARROW_DOWN);
 			await user.keyboard(KeyBoard.SPACE);
-			await screen.findByRole('listbox');
 
-			//THEN
-			expect(screen.getByRole('radio', { name: 'Temps plein' })).toBeInTheDocument();
-			expect(screen.getByRole('radio', { name: 'Temps partiel' })).toBeInTheDocument();
-			expect(screen.getByRole('radio', { name: 'Indifférent' })).toBeInTheDocument();
+			// TODO (BRUJ 24/04/2024): Ne doit pas être appelé avec la valeur selectionné mais avec l'événement de changement et la nouvelle valeur
+			expect(onChange).toHaveBeenCalledWith('2');
 		});
 
-		it('ferme les options avec la touche escape', async () => {
-			const user = userEvent.setup();
-			render(
-				<Select
-					placeholder={'Temps de travail'}
-					name="tempsDeTravail"
-					optionList={Offre.TEMPS_DE_TRAVAIL_LIST}
-					label={'Temps de travail'}
-					value=""
-				/>,
-			);
-			const button = screen.getByRole('button', { name: 'Temps de travail' });
-			button.focus();
-			await user.keyboard(KeyBoard.SPACE);
-			const optionList = await screen.findByRole('listbox');
+		it('accepte un label et le lie au select', () => {
+			const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+			render(<Select optionList={options} label={'label'}/>);
 
-			expect(screen.getByRole('radio', { name: 'Temps plein' })).toBeInTheDocument();
-			expect(screen.getByRole('radio', { name: 'Temps partiel' })).toBeInTheDocument();
-			expect(screen.getByRole('radio', { name: 'Indifférent' })).toBeInTheDocument();
+			// TODO (BRUJ 24/04/2024): devrait être un combobox
+			expect(screen.getByRole('button', { name: 'label' })).toBeVisible();
+		});
 
-			await user.keyboard(KeyBoard.ESCAPE);
+		it('accepte un complément label et le lie au select', () => {
+			const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+			render(<Select optionList={options} label={'label'} labelComplement={'complement label'}/>);
 
-			expect(optionList).not.toBeInTheDocument();
+			// TODO (BRUJ 24/04/2024): devrait être un combobox
+			expect(screen.getByRole('button', { name: 'label complement label' })).toBeVisible();
 		});
 
-		it('a le focus sur la première option quand on ouvre la liste des options', async () => {
+		it('accepte une liste d‘options', async () => {
 			const user = userEvent.setup();
-			render(
-				<Select
-					placeholder={'Temps de travail'}
-					name="tempsDeTravail"
-					optionList={Offre.TEMPS_DE_TRAVAIL_LIST}
-					label={'Temps de travail'}
-					value=""
-				/>,
-			);
-			const button = screen.getByRole('button', { name: 'Temps de travail' });
-			button.focus();
-			await user.keyboard(KeyBoard.SPACE);
-			const optionList = await screen.findByRole('listbox');
-			const firstOption = within(optionList).getAllByRole('option')[0];
-			const secondOption = within(optionList).getAllByRole('option')[1];
+			const optionsList = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+			render(<Select optionList={optionsList} label={'label'}/>);
 
-			expect(firstOption).toHaveFocus();
-			expect(secondOption).not.toHaveFocus();
-		});
+			await user.tab();
+			await user.keyboard(KeyBoard.ENTER);
 
-		it('change le focus avec les touches arrow', async () => {
-			const user = userEvent.setup();
-			render(
-				<Select
-					placeholder={'Temps de travail'}
-					name="tempsDeTravail"
-					optionList={Offre.TEMPS_DE_TRAVAIL_LIST}
-					label={'Temps de travail'}
-					value=""
-				/>,
-			);
-			const button = screen.getByRole('button', { name: 'Temps de travail' });
-			button.focus();
-			await user.keyboard(KeyBoard.SPACE);
-			const optionList = await screen.findByRole('listbox');
-			const firstOption = within(optionList).getAllByRole('option')[0];
-			const secondOption = within(optionList).getAllByRole('option')[1];
+			const options = screen.getAllByRole('option');
+			expect(options).toHaveLength(2);
+			expect(options[0]).toHaveTextContent('options 1');
+			expect(options[1]).toHaveTextContent('options 2');
+		});
 
-			expect(firstOption).toHaveFocus();
-			expect(secondOption).not.toHaveFocus();
+		describe('value', () => {
+			it('accepte une value et initialise le select avec cette value', () => {
+				const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+				render(<Select optionList={options} value={'1'} label={'label'}/>);
 
-			await user.keyboard(KeyBoard.ARROW_DOWN);
+				expect(screen.getByRole('textbox', { hidden: true })).toHaveValue('1');
+			});
 
-			expect(firstOption).not.toHaveFocus();
-			expect(secondOption).toHaveFocus();
+			it('lorsque la value change, le select prend la valeur de value mise à jour', () => {
+				const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
+				let valueThatCanChange = '1';
 
-			await user.keyboard(KeyBoard.ARROW_UP);
+				const { rerender } = render(<Select optionList={options} value={valueThatCanChange} label={'label'}/>);
 
-			expect(firstOption).toHaveFocus();
-			expect(secondOption).not.toHaveFocus();
-		});
+				valueThatCanChange = '2';
 
-		it('sélectionne une option avec la touche space ET ferme la liste des options', async () => {
-			const user = userEvent.setup();
-			render(
-				<Select
-					placeholder={'Temps de travail'}
-					name="tempsDeTravail"
-					optionList={Offre.TEMPS_DE_TRAVAIL_LIST}
-					label={'Temps de travail'}
-					value=""
-				/>,
-			);
-			const button = screen.getByRole('button', { name: 'Temps de travail' });
-			button.focus();
-			await user.keyboard(KeyBoard.SPACE); // ouverture de la liste des options
-			const optionList = await screen.findByRole('listbox');
-			const firstOption = within(optionList).getAllByRole('option')[0];
-
-			expect(firstOption).toHaveFocus();
-
-			await user.keyboard(KeyBoard.ARROW_DOWN); // focus de la deuxième option
-
-			await user.keyboard(KeyBoard.SPACE); // choix de la deuxième option
-
-			const hiddenInput = await screen.findByTestId('Select-InputHidden');
-			expect(hiddenInput).toHaveValue('tempsPartiel');
-
-			expect(optionList).not.toBeInTheDocument();
+				rerender(<Select optionList={options} value={valueThatCanChange} label={'label'}/>);
+				expect(screen.getByRole('textbox', { hidden: true })).toHaveValue('2');
+			});
 		});
 
-		it('rend le focus au button select après avoir fermé les options', async () => {
+		it('lorsque l‘on donne un name au select simple, on peut récupérer la valeur séléctionnée depuis ce nom', async () => {
 			const user = userEvent.setup();
-			render(
-				<Select
-					placeholder={'Temps de travail'}
-					name="tempsDeTravail"
-					optionList={Offre.TEMPS_DE_TRAVAIL_LIST}
-					label={'Temps de travail'}
-					value=""
-				/>,
-			);
-			const button = screen.getByRole('button', { name: 'Temps de travail' });
-			button.focus();
-			await user.keyboard(KeyBoard.SPACE);
-			const optionList = await screen.findByRole('listbox');
+			const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
 
-			expect(screen.getByRole('radio', { name: 'Temps plein' })).toBeInTheDocument();
-			expect(screen.getByRole('radio', { name: 'Temps partiel' })).toBeInTheDocument();
-			expect(screen.getByRole('radio', { name: 'Indifférent' })).toBeInTheDocument();
+			render(<form role="form">
+				<Select optionList={options} label={'label'} name={'nomSelect'}/>
+			</form>);
 
-			await user.keyboard(KeyBoard.ESCAPE);
-
-			expect(optionList).not.toBeInTheDocument();
+			await user.tab();
+			await user.keyboard(KeyBoard.ENTER);
+			await user.keyboard(KeyBoard.ARROW_DOWN);
+			await user.keyboard(KeyBoard.SPACE);
 
-			expect(button).toHaveFocus();
+			expect(screen.getByRole('form')).toHaveFormValues({ nomSelect: '2' });
 		});
-	});
 
-	describe('Select Multiple', () => {
-		it('sélectionne une option avec la touche space ET ne ferme pas la liste des options', async () => {
+		it('lorsque l‘on donne un name au select à choix multiple, on peut récupérer les valeur séléctionnées depuis ce nom', async () => {
 			const user = userEvent.setup();
-			render(
-				<Select
-					multiple
-					placeholder={'Type de contrat'}
-					optionList={mapTypeDeContratToOffreEmploiCheckboxFiltre(Offre.TYPE_DE_CONTRAT_LIST)}
-					label={'Type de contrat'}
-				/>,
-			);
-
-
-			const button = screen.getByRole('button', { name: 'Type de contrat' });
-			button.focus();
-			await user.keyboard(KeyBoard.SPACE);
-			const optionList = await screen.findByRole('listbox');
-			const firstOption = within(optionList).getAllByRole('option')[0];
-			const secondOption = within(optionList).getAllByRole('option')[1];
+			const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }];
 
-			expect(firstOption).toHaveFocus();
+			render(<form aria-label={'formulaire'}>
+				<Select multiple optionList={options} label={'label'} name={'nomSelect'}/>
+			</form>);
 
+			await user.tab();
+			await user.keyboard(KeyBoard.ENTER);
 			await user.keyboard(KeyBoard.SPACE);
-			const hiddenInput = await screen.findByTestId('Select-InputHidden');
-			expect(hiddenInput).toHaveValue('CDD');
-			expect(optionList).toBeInTheDocument();
-
 			await user.keyboard(KeyBoard.ARROW_DOWN);
-			expect(secondOption).toHaveFocus();
-
 			await user.keyboard(KeyBoard.SPACE);
-			expect(hiddenInput).toHaveValue('CDD,CDI');
-			expect(optionList).toBeInTheDocument();
+
+			expect(screen.getByRole('form', { name: 'formulaire' })).toHaveFormValues({ nomSelect: '1,2' });
 		});
 	});
 });