Merge pull request #3738 from Pragadesh-45/refactor/generate-code-item

fix: enhance keyboard navigation for language selection in `GenerateCodeItem`
usebruno · Jan 6, 2025 · 36343b3 · 36343b3
2 parents 52672e6 + b5ae2b2
commit 36343b3
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/...pp/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js b/...pp/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
@@ -63,22 +63,21 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
                     tabIndex={0}
                     onClick={() => setSelectedLanguage(language)}
                     onKeyDown={(e) => {
-                      if (e.key === 'Tab') {
+                      if (e.key === 'Tab' || (e.shiftKey && e.key === 'Tab')) {
                         e.preventDefault();
                         const currentIndex = languages.findIndex((lang) => lang.name === selectedLanguage.name);
                         const nextIndex = e.shiftKey
                           ? (currentIndex - 1 + languages.length) % languages.length
                           : (currentIndex + 1) % languages.length;
                         setSelectedLanguage(languages[nextIndex]);
-                      }
 
-                      if (e.shiftKey && e.key === 'Tab') {
-                        e.preventDefault();
-                        const currentIndex = languages.findIndex((lang) => lang.name === selectedLanguage.name);
-                        const nextIndex = (currentIndex - 1 + languages.length) % languages.length;
-                        setSelectedLanguage(languages[nextIndex]);
+                        // Explicitly focus on the new active element
+                        const nextElement = document.querySelector(`[data-language="${languages[nextIndex].name}"]`);
+                        nextElement?.focus();
                       }
+
                     }}
+                    data-language={language.name}
                     aria-pressed={language.name === selectedLanguage.name}
                   >
                     <span className="capitalize">{language.name}</span>
@@ -89,6 +88,7 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
           <div className="flex-grow p-4">
             {isValidUrl(finalUrl) ? (
               <CodeView
+                tabIndex={-1}
                 language={selectedLanguage}
                 item={{
                   ...item,