Skip to content

Fixed issue #337 #342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ktan-wolf wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixed issue #337 #342

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 25 additions & 7 deletions apps/web/src/components/dashboard/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -421,7 +421,7 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
// collapsed sidebar: show icon only
<div
onClick={handleProSectionClick}
className="w-full h-[44px] flex items-center justify-center rounded-md cursor-pointer transition-colors hover:bg-dash-hover group"
className="w-full h-[44px] flex items-center justify-start pl-3 rounded-md cursor-pointer transition-colors hover:bg-dash-hover group"
role="button"
tabIndex={0}
aria-label="Opensox Pro"
Expand All @@ -444,12 +444,30 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
)}

{/* utility features */}
<SidebarItem
itemName="Request a feature"
onclick={reqFeatureHandler}
icon={<SparklesIcon className="size-5" />}
collapsed={isCollapsed}
/>
{isCollapsed ? (
<div
onClick={reqFeatureHandler}
className="w-full h-[44px] flex items-center justify-start pl-3 rounded-md cursor-pointer transition-colors hover:bg-dash-hover group"
role="button"
tabIndex={0}
aria-label="Request a feature"
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
reqFeatureHandler();
}
}}
>
<SparklesIcon className="size-5 text-text-secondary group-hover:text-text-primary transition-colors" />
</div>
) : (
<SidebarItem
itemName="Request a feature"
onclick={reqFeatureHandler}
icon={<SparklesIcon className="size-5" />}
collapsed={isCollapsed}
/>
Comment on lines +464 to +469
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find SidebarItem component
find apps/web/src/components -name "*SidebarItem*" -type f

Repository: apsinghdev/opensox

Length of output: 109

🏁 Script executed:

#!/bin/bash
# Search for tabIndex, onKeyDown, role attributes in sidebar components
rg -n "tabIndex|onKeyDown|role=" apps/web/src/components/sidebar/ -A 2 -B 2

Repository: apsinghdev/opensox

Length of output: 44

🏁 Script executed:

#!/bin/bash
# Also check the dashboard components directory for SidebarItem
find apps/web/src/components -path "*dashboard*" -name "*SidebarItem*" -type f

Repository: apsinghdev/opensox

Length of output: 44

🏁 Script executed:

#!/bin/bash
# Read the SidebarItem component
cat -n apps/web/src/components/sidebar/SidebarItem.tsx

Repository: apsinghdev/opensox

Length of output: 1363

SidebarItem component lacks keyboard accessibility

The component has only an onClick handler with no role="button", tabIndex, or onKeyDown attributes. Both the collapsed and expanded states are equally inaccessible to keyboard users, violating the guideline requiring accessibility features on all interactive elements.

Update SidebarItem.tsx to add role="button", tabIndex={0}, and an onKeyDown handler (to trigger onclick on Enter/Space keys).

Based on learnings: "Implement accessibility features on interactive elements (e.g., tabindex='0', aria-label, onClick, onKeyDown)"

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/components/dashboard/Sidebar.tsx` around lines 464 - 469, The
SidebarItem component lacks keyboard accessibility: update the SidebarItem
component (the component that receives the onclick prop) so its interactive root
element includes role="button", tabIndex={0}, and an onKeyDown handler that
invokes the existing onclick prop when the user presses Enter or Space; ensure
the handler prevents default where appropriate and that any aria-label or
accessible name is preserved for both collapsed and expanded states so keyboard
users can activate the item the same way as mouse users.

)}
</div>

{/* Bottom profile */}
Expand Down