🐛(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:
committed by
Sebastien Nobour
parent
bd6cd59df6
commit
e7aebfe59e
@@ -1,6 +1,6 @@
|
|||||||
import { Select } from '@openfun/cunningham-react';
|
import { Select } from '@openfun/cunningham-react';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { useMemo } from 'react';
|
import { useEffect, useMemo } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
@@ -60,6 +60,21 @@ export const LanguagePicker = () => {
|
|||||||
}));
|
}));
|
||||||
}, [languages]);
|
}, [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 (
|
return (
|
||||||
<SelectStyled
|
<SelectStyled
|
||||||
label={t('Language')}
|
label={t('Language')}
|
||||||
@@ -67,7 +82,7 @@ export const LanguagePicker = () => {
|
|||||||
clearable={false}
|
clearable={false}
|
||||||
hideLabel
|
hideLabel
|
||||||
defaultValue={i18n.language}
|
defaultValue={i18n.language}
|
||||||
className="c_select__no_bg"
|
className="c_select__no_bg c__select-language-picker"
|
||||||
options={optionsPicker}
|
options={optionsPicker}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
i18n.changeLanguage(e.target.value as string).catch((err) => {
|
i18n.changeLanguage(e.target.value as string).catch((err) => {
|
||||||
|
|||||||
@@ -65,21 +65,10 @@ test.describe('Keyboard navigation', () => {
|
|||||||
)
|
)
|
||||||
.all();
|
.all();
|
||||||
|
|
||||||
expect(focusableElements.length).toEqual(20);
|
expect(focusableElements.length).toEqual(19);
|
||||||
|
|
||||||
for (let i = 0; i < focusableElements.length; i++) {
|
for (let i = 0; i < focusableElements.length; i++) {
|
||||||
await page.keyboard.press('Tab');
|
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();
|
await expect(focusableElements[i]).toBeFocused();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user