🐛(frontend) keyboard navigation language picker

- add temporary fix to language picker to
ignore select on keyboard navigation. Needs
to be fixed directly in Cunningham Select
- update related e2e test
This commit is contained in:
daproclaima
2024-09-06 02:01:16 +02:00
committed by Sebastien Nobour
parent bd6cd59df6
commit e7aebfe59e
2 changed files with 18 additions and 14 deletions

View File

@@ -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 (
<SelectStyled
label={t('Language')}
@@ -67,7 +82,7 @@ export const LanguagePicker = () => {
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) => {

View File

@@ -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();
}
});