rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-06-23 12:45:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: enhance keyboard navigation for language selection in GenerateCodeItem

Browse Source
This commit is contained in:
Pragadesh-45
2025-01-06 16:33:17 +05:30
parent 704977f20f
commit b5ae2b2b45
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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,