From 44772ba2e1b4cea323fd393df54197fba845c3c9 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Tue, 11 Oct 2022 20:25:08 +0800
Subject: [PATCH] refactor(console): add a11y for language editor components
 (#2123)

---
 .../LanguageEditor/AddLanguageSelector.tsx    | 18 ++++++++++-----
 .../LanguageEditor/LanguageItem.tsx           | 22 ++++++++++++-------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/packages/console/src/pages/SignInExperience/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx b/packages/console/src/pages/SignInExperience/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx
index e52434ed1..3513c7386 100644
--- a/packages/console/src/pages/SignInExperience/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx
+++ b/packages/console/src/pages/SignInExperience/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx
@@ -7,6 +7,7 @@ import Plus from '@/assets/images/plus.svg';
 import SearchIcon from '@/assets/images/search.svg';
 import Button from '@/components/Button';
 import TextInput from '@/components/TextInput';
+import { onKeyDownHandler } from '@/utilities/a11y';
 
 import * as style from './AddLanguageSelector.module.scss';
 
@@ -54,6 +55,12 @@ const AddLanguageSelector = ({ options, onSelect }: Props) => {
     };
   }, [isDropDownOpen, searchInputRef]);
 
+  const handleSelect = (languageTag: LanguageTag) => {
+    onSelect(languageTag);
+    setIsDropDownOpen(false);
+    setSearchInputValue('');
+  };
+
   return (
     <div ref={selectorRef} className={style.languageSelector}>
       <div className={style.input}>
@@ -81,15 +88,16 @@ const AddLanguageSelector = ({ options, onSelect }: Props) => {
       {isDropDownOpen && filteredOptions.length > 0 && (
         <ul className={style.dropDown}>
           {filteredOptions.map((languageTag) => (
-            // TODO: @yijun
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
             <li
               key={languageTag}
+              role="tab"
+              tabIndex={0}
               className={style.dropDownItem}
+              onKeyDown={onKeyDownHandler(() => {
+                handleSelect(languageTag);
+              })}
               onClick={() => {
-                onSelect(languageTag);
-                setIsDropDownOpen(false);
-                setSearchInputValue('');
+                handleSelect(languageTag);
               }}
             >
               <div className={style.languageName}>{uiLanguageNameMapping[languageTag]}</div>
diff --git a/packages/console/src/pages/SignInExperience/components/ManageLanguage/LanguageEditor/LanguageItem.tsx b/packages/console/src/pages/SignInExperience/components/ManageLanguage/LanguageEditor/LanguageItem.tsx
index eae93ea38..cf1a8461b 100644
--- a/packages/console/src/pages/SignInExperience/components/ManageLanguage/LanguageEditor/LanguageItem.tsx
+++ b/packages/console/src/pages/SignInExperience/components/ManageLanguage/LanguageEditor/LanguageItem.tsx
@@ -2,6 +2,8 @@ import { languages, LanguageTag } from '@logto/language-kit';
 import classNames from 'classnames';
 import { useEffect, useRef } from 'react';
 
+import { onKeyDownHandler } from '@/utilities/a11y';
+
 import * as style from './LanguageItem.module.scss';
 
 type Props = {
@@ -19,18 +21,22 @@ const LanguageItem = ({ languageTag, isSelected, onClick }: Props) => {
     }
   }, [isSelected]);
 
+  const handleSelect = () => {
+    if (isSelected) {
+      return;
+    }
+    onClick();
+  };
+
   return (
-    // TODO: @yijun
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       ref={itemRef}
+      role="tab"
+      tabIndex={0}
+      aria-selected={isSelected}
       className={classNames(style.languageItem, isSelected && style.selected)}
-      onClick={() => {
-        if (isSelected) {
-          return;
-        }
-        onClick();
-      }}
+      onClick={handleSelect}
+      onKeyDown={onKeyDownHandler(handleSelect)}
     >
       <div className={style.languageName}>{languages[languageTag]}</div>
       <div className={style.languageTag}>{languageTag}</div>