🎨 Palette: Accessibility improvements for UniversalPreviewPanel

src/components/preview/UniversalPreviewPanel.tsx

@@ -286,11 +286,25 @@ export function UniversalPreviewPanel({
             )}
 
             {/* Zoom controls */}
-            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleZoomOut}>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={handleZoomOut}
+              aria-label="Diminuir zoom"
+              title="Diminuir zoom"
+            >
               <ZoomOut className="h-4 w-4" />
             </Button>
             <span className="text-xs text-muted-foreground w-12 text-center">{zoom}%</span>
-            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleZoomIn}>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={handleZoomIn}
+              aria-label="Aumentar zoom"
+              title="Aumentar zoom"
+            >
               <ZoomIn className="h-4 w-4" />
             </Button>
 
@@ -306,33 +320,70 @@ export function UniversalPreviewPanel({
                     className="h-8 w-8"
                     onClick={handleSave}
                     disabled={isSaving || !hasChanges}
+                    aria-label="Salvar alterações"
+                    title="Salvar alterações"
                   >
                     <Save className={cn("h-4 w-4", hasChanges && "text-green-400")} />
                   </Button>
                 ) : (
-                  <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleEdit}>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={handleEdit}
+                    aria-label="Editar arquivo"
+                    title="Editar arquivo"
+                  >
                     <Edit3 className="h-4 w-4" />
                   </Button>
                 )}
               </>
             )}
 
             {onRefresh && (
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onRefresh}>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={onRefresh}
+                aria-label="Atualizar"
+                title="Atualizar"
+              >
                 <RefreshCw className="h-4 w-4" />
               </Button>
             )}
 
-            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleDownload}>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={handleDownload}
+              aria-label="Baixar arquivo"
+              title="Baixar arquivo"
+            >
               <Download className="h-4 w-4" />
             </Button>
 
-            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={toggleFullscreen}>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={toggleFullscreen}
+              aria-label={isFullscreen ? "Sair da tela cheia" : "Tela cheia"}
+              title={isFullscreen ? "Sair da tela cheia" : "Tela cheia"}
+            >
               {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
             </Button>
 
             {onClose && (
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onClose}>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={onClose}
+                aria-label="Fechar preview"
+                title="Fechar preview"
+              >
                 <X className="h-4 w-4" />
               </Button>
             )}

src/tests/components/UniversalPreviewPanel.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import UniversalPreviewPanel from '@/components/preview/UniversalPreviewPanel';
+
+describe('UniversalPreviewPanel', () => {
+  const mockFile = {
+    id: '1',
+    name: 'test.txt',
+    url: 'http://example.com/test.txt',
+    format: 'text' as const,
+    content: 'Hello World',
+    size: 1024,
+  };
+
+  it('renders correctly and has accessible buttons', () => {
+    render(
+      <UniversalPreviewPanel
+        file={mockFile}
+        onClose={vi.fn()}
+        onRefresh={vi.fn()}
+        enableEdit={true}
+      />
+    );
+
+    // Check if filename is displayed
+    expect(screen.getByText('test.txt')).toBeInTheDocument();
+
+    // Verify accessible buttons
+    expect(screen.getByRole('button', { name: /Diminuir zoom/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Aumentar zoom/i })).toBeInTheDocument();
+    // Edit button should be visible since enableEdit=true and format is text (editable)
+    expect(screen.getByRole('button', { name: /Editar arquivo/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Atualizar/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Baixar arquivo/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Tela cheia/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Fechar preview/i })).toBeInTheDocument();
+  });
+});