Fixed keyboard navigation bug

psychlone77 · psychlone77 · commit 9a892b432132 · 2025-02-06T11:44:25.000+05:30
diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
@@ -152,10 +152,10 @@ const LanguageSelector = () => {
 
   useEffect(() => {
     if (isOpen && focusedIndex >= 0) {
-      const element = document.querySelector(
-        `.selector__item:nth-child(${focusedIndex + 1})`
-      ) as HTMLElement;
-      element?.focus();
+      const elements = Array.from(document.querySelectorAll('.selector__item')) as HTMLElement[];
+      const focusableElements = elements.filter(el => el.getAttribute('tabIndex') !== '-1');
+      const element = focusableElements[focusedIndex];
+      element?.focus();   
     }
   }, [isOpen, focusedIndex]);
 
@@ -190,7 +190,7 @@ const LanguageSelector = () => {
         className={`selector__dropdown ${isOpen ? "" : " hidden"}`}
         role="listbox"
         onKeyDown={handleKeyDown}
-        tabIndex={-1}
+        tabIndex={0}
       >
         {fetchedLanguages.map((lang, index) =>
           lang.subLanguages.length > 0 ? (
@@ -206,7 +206,7 @@ const LanguageSelector = () => {
             <li
               key={lang.name}
               role="option"
-              tabIndex={-1}
+              tabIndex={0}
               onClick={() => handleSelect(lang)}
               className={`selector__item ${
                 language.name === lang.name ? "selected" : ""
diff --git a/src/components/SubLanguageSelector.tsx b/src/components/SubLanguageSelector.tsx
@@ -47,7 +47,7 @@ const SubLanguageSelector = ({
     <>
       <li
         role="option"
-        tabIndex={-1}
+        tabIndex={0}
         className={`selector__item ${
           subLanguage === defaultSlugifiedSubLanguageName &&
           language.name === parentLanguage.name
@@ -82,7 +82,8 @@ const SubLanguageSelector = ({
         <li
           key={sl.name}
           role="option"
-          tabIndex={-1}
+          tabIndex={opened ? 0 : -1}
+          aria-disabled={!opened}
           className={`selector__item sublanguage__item ${opened ? "" : "hidden"} ${
             slugify(subLanguage) === slugify(sl.name) ? "selected" : ""
           }`}
