From e4c2831dced03698e28e685b08923a0c4bd28df8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 5 Feb 2026 17:30:17 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20ARIA=20labels?=
 =?UTF-8?q?=20to=20UniversalPreviewPanel=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added localized `aria-label` and `title` attributes to all icon-only buttons in `UniversalPreviewPanel.tsx` (Zoom, Edit, Save, Refresh, Download, Fullscreen, Close).
- Added `src/tests/components/UniversalPreviewPanel.test.tsx` to verify accessible names.
- Ensured labels match the existing Portuguese UI strings for consistency.

Co-authored-by: criptogus <128640021+criptogus@users.noreply.github.com>
---
 .../preview/UniversalPreviewPanel.tsx         | 65 +++++++++++++++++--
 .../components/UniversalPreviewPanel.test.tsx | 38 +++++++++++
 2 files changed, 96 insertions(+), 7 deletions(-)
 create mode 100644 src/tests/components/UniversalPreviewPanel.test.tsx

diff --git a/src/components/preview/UniversalPreviewPanel.tsx b/src/components/preview/UniversalPreviewPanel.tsx
index 511e1b727..984ba15f7 100644
--- a/src/components/preview/UniversalPreviewPanel.tsx
+++ b/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,11 +320,20 @@ 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>
                 )}
@@ -318,21 +341,49 @@ export function UniversalPreviewPanel({
             )}
 
             {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>
             )}
diff --git a/src/tests/components/UniversalPreviewPanel.test.tsx b/src/tests/components/UniversalPreviewPanel.test.tsx
new file mode 100644
index 000000000..0fdb7fac7
--- /dev/null
+++ b/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();
+  });
+});