Refactor/ Implement Focusable Buttons in the Generate Code Modal (#3310)

* refactor: GenerateCodeItem component to fix width issue

* feat: tab switch for languages

* style: add logic to handle different screen sizes

* feat: enhance keyboard navigation for language selection in GenerateCodeItem

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js

@@ -35,6 +35,28 @@ const StyledWrapper = styled.div`
       background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
     }
   }
+
+  .flexible-container {
+    width: 100%;
+  }
+
+  @media (max-width: 600px) {
+    .flexible-container {
+      width: 500px;
+    }
+  }
+
+  @media (min-width: 601px) and (max-width: 1200px) {
+    .flexible-container {
+      width: 800px;
+    }
+  }
+
+  @media (min-width: 1201px) {
+    .flexible-container {
+      width: 900px;
+    }
+  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js

@@ -48,7 +48,7 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
   return (
     <Modal size="lg" title="Generate Code" handleCancel={onClose} hideFooter={true}>
       <StyledWrapper>
-        <div className="flex w-full">
+        <div className="flex w-full flexible-container">
           <div>
             <div className="generate-code-sidebar">
               {languages &&
@@ -59,7 +59,27 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
                     className={
                       language.name === selectedLanguage.name ? 'generate-code-item active' : 'generate-code-item'
                     }
+                    role="button"
+                    tabIndex={0}
                     onClick={() => setSelectedLanguage(language)}
+                    onKeyDown={(e) => {
+                      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}
                   >
                     <span className="capitalize">{language.name}</span>
                   </div>