From 640a8836b6bb3ca4a7adeda41662777b5a60ffcc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 17 Jan 2026 22:31:23 +0000
Subject: [PATCH] Improve accessibility across components

FileTree:
- Add ARIA labels to new file button
- Add role="button", tabIndex, and keyboard navigation (Enter/Space) for file/folder items
- Add aria-label for expand/collapse folder states
- Add aria-expanded attribute for folders
- Add focus ring styles (focus:ring-2 focus:ring-accent)
- Add aria-hidden to decorative icons

SearchInFilesPanel:
- Add ARIA labels to close button and search button
- Add aria-label to search input
- Add aria-live="polite" to results count badge
- Add keyboard navigation (Enter/Space) to search results
- Add focus ring styles to search results
- Add role="button" to clickable result items
- Add aria-label to case sensitive checkbox
- Add aria-hidden to decorative icons

AIChat:
- Add aria-live="polite" to chat messages area
- Add role="log" to messages container
- Add aria-label to message input textarea
- Add aria-label to send button
- Add role="note" to keyboard shortcut hint
- Add aria-hidden to decorative icons
---
 src/components/AIChat.tsx             | 14 ++++++++------
 src/components/FileTree.tsx           | 19 +++++++++++++++++--
 src/components/SearchInFilesPanel.tsx | 27 +++++++++++++++++++--------
 3 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/src/components/AIChat.tsx b/src/components/AIChat.tsx
index 5c59965..cada2d1 100644
--- a/src/components/AIChat.tsx
+++ b/src/components/AIChat.tsx
@@ -73,12 +73,12 @@ export function AIChat({ currentCode }: AIChatProps) {
   return (
     <div className="flex flex-col h-full bg-card border-l border-border min-w-[260px] max-w-[340px]">
       <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card/80">
-        <Sparkle className="text-accent" weight="fill" />
+        <Sparkle className="text-accent" weight="fill" aria-hidden="true" />
         <h2 className="font-semibold text-xs tracking-wide uppercase text-muted-foreground">AI Assistant</h2>
       </div>
 
-      <ScrollArea className="flex-1 px-2 py-2">
-        <div className="space-y-2">
+      <ScrollArea className="flex-1 px-2 py-2" aria-live="polite" aria-label="Chat messages">
+        <div className="space-y-2" role="log">
           {messages.map((message, index) => (
             <div
               key={index}
@@ -122,18 +122,20 @@ export function AIChat({ currentCode }: AIChatProps) {
             placeholder="Ask about your code..."
             className="resize-none min-h-[36px] max-h-24 bg-background text-xs px-2 py-1"
             disabled={isLoading}
+            aria-label="Chat message input"
           />
           <Button
             onClick={handleSend}
             disabled={!input.trim() || isLoading}
             className="bg-accent text-accent-foreground hover:bg-accent/90 btn-accent-hover self-end h-8 w-8 p-0"
             tabIndex={-1}
-            title="Send"
+            title="Send message"
+            aria-label="Send message"
           >
-            <PaperPlaneRight weight="fill" size={16} />
+            <PaperPlaneRight weight="fill" size={16} aria-hidden="true" />
           </Button>
         </div>
-        <p className="text-[10px] text-muted-foreground mt-1">
+        <p className="text-[10px] text-muted-foreground mt-1" role="note">
           Press Enter to send, Shift+Enter for new line
         </p>
       </div>
diff --git a/src/components/FileTree.tsx b/src/components/FileTree.tsx
index 3627a6f..2d96d8f 100644
--- a/src/components/FileTree.tsx
+++ b/src/components/FileTree.tsx
@@ -147,13 +147,27 @@ export function FileTree({
     return (
       <div key={node.id}>
         <div
+          role={node.type === 'folder' ? 'button' : 'button'}
+          tabIndex={0}
+          aria-label={node.type === 'folder' ? `${isExpanded ? 'Collapse' : 'Expand'} folder ${node.name}` : `Open file ${node.name}`}
+          aria-expanded={node.type === 'folder' ? isExpanded : undefined}
           draggable={!isEditing}
           onDragStart={(e) => handleDragStart(e, node)}
           onDragOver={(e) => handleDragOver(e, node)}
           onDragLeave={handleDragLeave}
           onDrop={(e) => handleDrop(e, node)}
           onDragEnd={handleDragEnd}
-          className={`flex items-center gap-1 px-2 py-1.5 md:py-1 hover:bg-muted/60 cursor-pointer group rounded-sm transition-colors touch-manipulation ${
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              if (node.type === 'folder') {
+                toggleFolder(node.id);
+              } else {
+                onFileSelect(node);
+              }
+            }
+          }}
+          className={`flex items-center gap-1 px-2 py-1.5 md:py-1 hover:bg-muted/60 cursor-pointer group rounded-sm transition-colors touch-manipulation focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-1 ${
             isSelected ? 'bg-accent/30 text-accent font-semibold' : 'text-foreground'
           } ${isDragging ? 'opacity-50' : ''} ${isDropTarget && node.type === 'folder' ? 'bg-blue-500/20 border-2 border-blue-500 border-dashed' : ''}`}
           style={{ paddingLeft: `${depth * 10 + 8}px` }}
@@ -234,6 +248,7 @@ export function FileTree({
           size="icon"
           className="h-6 w-6"
           title="New File"
+          aria-label="Create new file"
           onClick={() => {
             const name = prompt('Enter file name:');
             if (name) {
@@ -241,7 +256,7 @@ export function FileTree({
             }
           }}
         >
-          <Plus size={14} />
+          <Plus size={14} aria-hidden="true" />
         </Button>
       </div>
       <ScrollArea className="flex-1">
diff --git a/src/components/SearchInFilesPanel.tsx b/src/components/SearchInFilesPanel.tsx
index 6558aac..c1244bb 100644
--- a/src/components/SearchInFilesPanel.tsx
+++ b/src/components/SearchInFilesPanel.tsx
@@ -119,16 +119,16 @@ export function SearchInFilesPanel({
     <div className="h-[300px] md:h-[400px] bg-card border-t border-border flex flex-col">
       <div className="flex items-center justify-between px-4 py-2 border-b border-border">
         <div className="flex items-center gap-2">
-          <MagnifyingGlass size={18} weight="bold" />
+          <MagnifyingGlass size={18} weight="bold" aria-hidden="true" />
           <span className="text-sm font-semibold">Search in Files</span>
           {results.length > 0 && (
-            <Badge variant="secondary" className="text-xs">
-              {results.length} results
+            <Badge variant="secondary" className="text-xs" aria-live="polite">
+              {results.length} result{results.length !== 1 ? 's' : ''}
             </Badge>
           )}
         </div>
-        <Button variant="ghost" size="icon" onClick={onClose} className="h-6 w-6">
-          <X size={16} />
+        <Button variant="ghost" size="icon" onClick={onClose} className="h-6 w-6" aria-label="Close search panel">
+          <X size={16} aria-hidden="true" />
         </Button>
       </div>
 
@@ -142,9 +142,10 @@ export function SearchInFilesPanel({
               if (e.key === 'Enter') handleSearch();
             }}
             className="flex-1"
+            aria-label="Search query"
           />
-          <Button onClick={handleSearch} disabled={isSearching || !searchQuery.trim()}>
-            <MagnifyingGlass size={16} className="mr-1" />
+          <Button onClick={handleSearch} disabled={isSearching || !searchQuery.trim()} aria-label="Search in files">
+            <MagnifyingGlass size={16} className="mr-1" aria-hidden="true" />
             Search
           </Button>
         </div>
@@ -156,6 +157,7 @@ export function SearchInFilesPanel({
               checked={caseSensitive}
               onChange={(e) => setCaseSensitive(e.target.checked)}
               className="rounded"
+              aria-label="Case sensitive search"
             />
             <span>Case sensitive</span>
           </label>
@@ -179,8 +181,17 @@ export function SearchInFilesPanel({
           {results.map((result, index) => (
             <div
               key={`${result.fileId}-${result.line}-${index}`}
+              role="button"
+              tabIndex={0}
               onClick={() => handleResultClick(result)}
-              className="p-2 rounded hover:bg-muted/60 cursor-pointer group transition-colors border border-transparent hover:border-accent/30"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  handleResultClick(result);
+                }
+              }}
+              aria-label={`Open ${result.fileName} at line ${result.line}`}
+              className="p-2 rounded hover:bg-muted/60 cursor-pointer group transition-colors border border-transparent hover:border-accent/30 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-1"
             >
               <div className="flex items-center gap-2 mb-1">
                 <FileText size={14} className="text-muted-foreground flex-shrink-0" />