From d301b57f5033ba9c29220399f166eae0577780f9 Mon Sep 17 00:00:00 2001
From: "devsy-app[bot]" <277138668+devsy-app[bot]@users.noreply.github.com>
Date: Sun, 9 Aug 2026 13:24:18 +0000
Subject: [PATCH] fix(ui): add sr-only labels to log buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

In `pages/WorkspaceDetailPage.svelte`, three icon-only buttons in the workspace Logs section — "Copy output", "Copy log", and "Delete log" — had only a hover `Tooltip` for labeling and no accessible name. Screen-reader users heard only an unnamed "button", since a tooltip is not an accessible name and these icons carry no text. Other icon-only buttons in the same file already follow the convention of adding `<span class="sr-only">…</span>`.

## Change

Add a `<span class="sr-only">` label to each of the three icon-only buttons (Copy output, Copy log, Delete log) in the log-files/output area, matching the existing pattern used elsewhere in the file (e.g. the rename, copy SSH, and more-actions buttons). Purely additive markup — no logic, styling, or behavior changes.

## Why it's safe / reviewable in <15 min

- One file, three added lines (`+3`).
- No JS/TS, store, routing, IPC, or CSS changes.
- `sr-only` is visually hidden (existing utility), so the rendered UI is unchanged.
- Uses the exact same idiom already established in this file.

## Verification

- `npm install --ignore-scripts` — succeeded.
- `npm run check` (svelte-check / type check) — **0 errors, 0 warnings**.
- `npx vitest run` — **48/48 tests passed**. (32 unrelated "errors" are a pre-existing jsdom/undici `markAsUncloneable is not a function` incompatibility with the local Node v20 runtime; the repo targets Node 24 per CI. These occur at environment setup, not in test execution, and are not affected by markup changes.)
- `task cli:format` — clean.
- `task cli:lint:ci` — **0 issues**.
- `npx biome check` on the edited file could not complete in this environment (hangs under Node v20, same toolchain incompatibility as the vitest environment errors); svelte-check covers the Svelte/a11y validation.

This PR was created by an AI agent as part of an automated daily UI polish job.
---
 desktop/src/renderer/src/pages/WorkspaceDetailPage.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/desktop/src/renderer/src/pages/WorkspaceDetailPage.svelte b/desktop/src/renderer/src/pages/WorkspaceDetailPage.svelte
index 8bc44f6f2a..bedf4256a3 100644
--- a/desktop/src/renderer/src/pages/WorkspaceDetailPage.svelte
+++ b/desktop/src/renderer/src/pages/WorkspaceDetailPage.svelte
@@ -933,6 +933,7 @@ async function handleRenameConfirmed() {
                         {#snippet child({ props })}
                           <Button variant="ghost" size="icon-sm" {...props} onclick={() => copyToClipboard(outputLines.map(stripAnsi).join("\n"))}>
                             <ClipboardCopy class="h-4 w-4" />
+                            <span class="sr-only">Copy output</span>
                           </Button>
                         {/snippet}
                       </Tooltip.Trigger>
@@ -991,6 +992,7 @@ async function handleRenameConfirmed() {
                                       onclick={() => copyToClipboard(logContent)}
                                     >
                                       <ClipboardCopy class="h-3.5 w-3.5" />
+                                      <span class="sr-only">Copy log</span>
                                     </button>
                                   {/snippet}
                                 </Tooltip.Trigger>
@@ -1007,6 +1009,7 @@ async function handleRenameConfirmed() {
                                     onclick={() => deleteLog(entry)}
                                   >
                                     <Trash2 class="h-3.5 w-3.5" />
+                                    <span class="sr-only">Delete log</span>
                                   </button>
                                 {/snippet}
                               </Tooltip.Trigger>