🤖 feat: add aria-labels to ProjectSidebar and fix path text cutoff (#524)

Added aria-labels to ProjectSidebar components for better screen reader
support and fixed vertical text clipping in path displays.

## Changes

**Accessibility improvements:**
- Added `aria-label` to project expand/collapse buttons
- Added `role="region"` with descriptive labels to workspace list
containers
- Added `aria-label` to workspace selection buttons
- Added `aria-label` to sidebar collapse/expand button

**Text rendering fix:**
Changed `leading-none` to `leading-tight` in path displays (both drag
preview and sidebar). The `leading-none` style set line-height to 1,
which caused vertical text clipping with certain characters,
particularly those with descenders or accents.

_Generated with `cmux`_

Author: ammar-agent

src/components/ProjectSidebar.tsx

@@ -37,6 +37,7 @@ type DraggableProjectItemProps = React.PropsWithChildren<{
   tabIndex?: number;
   "aria-expanded"?: boolean;
   "aria-controls"?: string;
+  "aria-label"?: string;
   "data-project-path"?: string;
 }>;
 
@@ -140,7 +141,7 @@ const ProjectDragLayer: React.FC = () => {
           <span className="text-dim mr-1.5 text-xs">⠿</span>
           <span className="text-muted mr-2 text-xs">▶</span>
           <div className="min-w-0 flex-1">
-            <div className="text-muted-dark font-monospace truncate text-sm leading-none">
+            <div className="text-muted-dark font-monospace truncate text-sm leading-tight">
               <span>{dirPath}</span>
               <span className="text-foreground font-medium">{basename}</span>
             </div>
@@ -475,6 +476,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                           tabIndex={0}
                           aria-expanded={isExpanded}
                           aria-controls={workspaceListId}
+                          aria-label={`${isExpanded ? "Collapse" : "Expand"} project ${projectName}`}
                           data-project-path={projectPath}
                         >
                           <span
@@ -494,7 +496,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                           </span>
                           <div className="flex min-w-0 flex-1 items-center pr-2">
                             <TooltipWrapper inline>
-                              <div className="text-muted-dark font-monospace truncate text-sm leading-none">
+                              <div className="text-muted-dark font-monospace truncate text-sm leading-tight">
                                 {(() => {
                                   const abbrevPath = abbreviatePath(projectPath);
                                   const { dirPath, basename } = splitAbbreviatedPath(abbrevPath);
@@ -549,7 +551,11 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                         </DraggableProjectItem>
 
                         {isExpanded && (
-                          <div id={workspaceListId}>
+                          <div
+                            id={workspaceListId}
+                            role="region"
+                            aria-label={`Workspaces for ${projectName}`}
+                          >
                             <div className="border-hover border-b px-3 py-2 pl-[22px]">
                               <button
                                 onClick={() => onAddWorkspace(projectPath)}
@@ -635,6 +641,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
           <TooltipWrapper inline>
             <button
               onClick={onToggleCollapsed}
+              aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
               className="text-muted border-dark hover:bg-hover hover:text-foreground mt-auto flex h-9 w-full cursor-pointer items-center justify-center border-t border-none bg-transparent p-0 text-sm transition-all duration-200"
             >
               {collapsed ? "»" : "«"}

src/components/WorkspaceListItem.tsx

@@ -124,6 +124,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
         role="button"
         tabIndex={0}
         aria-current={isSelected ? "true" : undefined}
+        aria-label={`Select workspace ${displayName}`}
         data-workspace-path={namedWorkspacePath}
         data-workspace-id={workspaceId}
       >