From e7aebfe59e8b7edc50e5d96026c9fbbc677eadb7 Mon Sep 17 00:00:00 2001
From: daproclaima <sebastien@devedanos.com>
Date: Fri, 6 Sep 2024 02:01:16 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20keyboard=20navigation?=
 =?UTF-8?q?=20language=20picker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- add temporary fix to language picker to
ignore select on keyboard navigation. Needs
to be fixed directly in Cunningham Select
- update related e2e test
---
 .../src/features/language/LanguagePicker.tsx  | 19 +++++++++++++++++--
 .../app-desk/keyboard-navigation.spec.ts      | 13 +------------
 2 files changed, 18 insertions(+), 14 deletions(-)

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