refactor(console): add a11y for language editor components (#2123)

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);
+                handleSelect(languageTag);
-                setIsDropDownOpen(false);
-                setSearchInputValue('');
               }}
             >
               <div className={style.languageName}>{uiLanguageNameMapping[languageTag]}</div>

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={() => {
+      onClick={handleSelect}
-        if (isSelected) {
+      onKeyDown={onKeyDownHandler(handleSelect)}
-          return;
-        }
-        onClick();
-      }}
     >
       <div className={style.languageName}>{languages[languageTag]}</div>
       <div className={style.languageTag}>{languageTag}</div>