From 5b6172e5ac64d6744a9d564e48d9cb68cb15da80 Mon Sep 17 00:00:00 2001 From: Pragadesh-45 Date: Tue, 3 Dec 2024 17:59:48 +0530 Subject: [PATCH] feat: enhance keyboard navigation for language selection in GenerateCodeItem --- .../CollectionItem/GenerateCodeItem/index.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js index f7ce85023..ef5143551 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js @@ -63,9 +63,20 @@ const GenerateCodeItem = ({ collection, item, onClose }) => { tabIndex={0} onClick={() => setSelectedLanguage(language)} onKeyDown={(e) => { - if (e.key === 'Enter' || e.key === ' ') { - setSelectedLanguage(language); + if (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]); } }} aria-pressed={language.name === selectedLanguage.name}