diff --git a/src/frontend/apps/desk/src/features/language/LanguagePicker.tsx b/src/frontend/apps/desk/src/features/language/LanguagePicker.tsx index 302704b..63ca5e4 100644 --- a/src/frontend/apps/desk/src/features/language/LanguagePicker.tsx +++ b/src/frontend/apps/desk/src/features/language/LanguagePicker.tsx @@ -1,6 +1,6 @@ import { Select } from '@openfun/cunningham-react'; import Image from 'next/image'; -import { useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; @@ -60,6 +60,21 @@ export const LanguagePicker = () => { })); }, [languages]); + useEffect(() => { + if (!document) { + return; + } + const languagePickerDom = document.querySelector( + '.c__select-language-picker', + ); + + if (!languagePickerDom?.firstChild?.firstChild) { + return; + } + + (languagePickerDom.firstChild.firstChild as HTMLElement).tabIndex = -1; + }, []); + return ( { clearable={false} hideLabel defaultValue={i18n.language} - className="c_select__no_bg" + className="c_select__no_bg c__select-language-picker" options={optionsPicker} onChange={(e) => { i18n.changeLanguage(e.target.value as string).catch((err) => { diff --git a/src/frontend/apps/e2e/__tests__/app-desk/keyboard-navigation.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/keyboard-navigation.spec.ts index fa79b0f..48eae6c 100644 --- a/src/frontend/apps/e2e/__tests__/app-desk/keyboard-navigation.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-desk/keyboard-navigation.spec.ts @@ -65,21 +65,10 @@ test.describe('Keyboard navigation', () => { ) .all(); - expect(focusableElements.length).toEqual(20); + expect(focusableElements.length).toEqual(19); for (let i = 0; i < focusableElements.length; i++) { await page.keyboard.press('Tab'); - - // check language picker language option navigation. 4th element is inner language picker arrow button - // eslint-disable-next-line playwright/no-conditional-in-test - if (i === 3) { - await page.keyboard.press('Enter'); - - // eslint-disable-next-line playwright/no-conditional-expect - await expect(focusableElements[i]).toBeFocused(); - continue; - } - await expect(focusableElements[i]).toBeFocused(); } });