From 9c41c6ba1ef0ce5a7372e03d8580f1b7416d8ed8 Mon Sep 17 00:00:00 2001
From: Dusan Radosavljevic <radosavljevicdusan98@gmail.com>
Date: Thu, 16 Jul 2026 21:24:33 +0200
Subject: [PATCH] fix(shell): add aria-label to theme toggle button

Every other icon-only button in the app (ArtifactDrawer, ChatView,
PendingView) exposes an accessible name via aria-label; the theme
toggle relied on title alone, which isn't reliably announced by
screen readers.
---
 src/components/Shell.test.tsx | 1 +
 src/components/Shell.tsx      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/Shell.test.tsx b/src/components/Shell.test.tsx
index d4d34ba..47ad165 100644
--- a/src/components/Shell.test.tsx
+++ b/src/components/Shell.test.tsx
@@ -44,4 +44,5 @@ test('shows nav, endpoint pill, and outlet content when connected', async () =>
   expect(screen.getByText('home content')).toBeInTheDocument()
   await waitFor(() => expect(screen.getByText('127.0.0.1:8731')).toBeInTheDocument())
   expect(screen.queryByText(/connect to your knowledge base/i)).not.toBeInTheDocument()
+  expect(screen.getByRole('button', { name: /toggle theme/i })).toBeInTheDocument()
 })
diff --git a/src/components/Shell.tsx b/src/components/Shell.tsx
index 205c6c0..cfd5817 100644
--- a/src/components/Shell.tsx
+++ b/src/components/Shell.tsx
@@ -118,6 +118,7 @@ export function Shell() {
             <button
               onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
               title="Toggle theme"
+              aria-label="Toggle theme"
               className="rounded-lg p-2 text-sepia transition hover:bg-paper-3 hover:text-ink"
             >
               <SunMoon size={16} />