feat(a11y): ARIA labels, aria-haspopup menu, icon button labels

apps/web/src/components/layout/Sidebar.tsx

@@ -161,6 +161,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
             variant="ghost"
             size="icon"
             onClick={() => setSidebarOpen(!sidebarOpen)}
+            aria-label={sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar'}
             className={cn(
               'ml-auto text-muted-foreground hover:text-foreground hidden lg:flex hover:bg-sidebar-accent',
               !sidebarOpen && 'absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2'

apps/web/src/components/modals/CreatorModal.tsx

@@ -63,7 +63,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
               </button>
             </div>
           </div>
-          <Button variant="ghost" size="icon" onClick={onClose}>
+          <Button variant="ghost" size="icon" onClick={onClose} aria-label="Close">
             <X className="w-6 h-6" />
           </Button>
         </div>

apps/web/src/components/ui/dropdown.tsx

@@ -164,7 +164,7 @@ export function Dropdown({
         type="button"
         ref={triggerRef as unknown as React.RefObject<HTMLButtonElement>}
         onClick={() => handleOpenChange(!open)}
-        aria-haspopup="true"
+        aria-haspopup="menu"
         aria-expanded={open}
         onKeyDown={(e) => {
           if (e.key === 'ArrowDown') {

apps/web/src/features/player/components/player-bar/PlayerBarRight.tsx

@@ -52,6 +52,7 @@ export function PlayerBarRight({
           size="icon"
           className={cn(btnClass, 'text-muted-foreground hover:text-foreground')}
           onClick={onToggleMute}
+          aria-label={muted || volume === 0 ? 'Unmute' : 'Mute'}
         >
           {muted || volume === 0 ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
         </Button>
@@ -88,6 +89,7 @@ export function PlayerBarRight({
           showQueue ? 'text-primary bg-primary/10' : 'text-muted-foreground hover:text-foreground',
         )}
         onClick={onToggleQueue}
+        aria-label={showQueue ? 'Hide queue' : 'Show queue'}
       >
         <ListMusic className="w-4 h-4" />
       </Button>
@@ -95,6 +97,7 @@ export function PlayerBarRight({
         variant="ghost"
         size="icon"
         className={cn('hidden sm:flex', btnClass, 'text-muted-foreground hover:text-[var(--chart-2)] hover:bg-[var(--chart-2)]/10')}
+        aria-label="Like"
       >
         <Heart className="w-4 h-4" />
       </Button>

apps/web/src/features/tracks/components/comment-thread/CommentThreadHeader.tsx

@@ -58,6 +58,7 @@ export function CommentThreadHeader({
               variant="ghost"
               size="icon"
               className="h-6 w-6 rounded-md transition-colors duration-[var(--sumi-duration-normal)] hover:text-foreground hover:bg-muted/50"
+              aria-label="More options"
             >
               <MoreVertical className="h-4 w-4" />
             </Button>