From b4a28178d0468b9e917c14357b757390a2808aef Mon Sep 17 00:00:00 2001
From: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
Date: Thu, 27 Aug 2026 15:10:56 -0700
Subject: [PATCH] fix(a11y): give the supported-agent icons an exposed role

aria-label on a bare span maps to the generic role, where ARIA does not
support it, so screen readers could drop the only label these icons have.
role="img" exposes it; the test now asserts it.
---
 .../components/settings/NativeChatSupportedAgents.test.tsx  | 6 ++++--
 .../src/components/settings/NativeChatSupportedAgents.tsx   | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/settings/NativeChatSupportedAgents.test.tsx b/src/renderer/src/components/settings/NativeChatSupportedAgents.test.tsx
index 5578886e887..17e05dfb18e 100644
--- a/src/renderer/src/components/settings/NativeChatSupportedAgents.test.tsx
+++ b/src/renderer/src/components/settings/NativeChatSupportedAgents.test.tsx
@@ -20,13 +20,14 @@ const EXPECTED_SUPPORTED_AGENTS = [
 ] as const satisfies readonly TuiAgent[]
 const SUPPORTED_AGENTS_LABEL_KEY = 'auto.components.settings.NativeChatSupportedAgents.label'
 
-function getRenderedChips(): { agent: string; label: string }[] {
+function getRenderedChips(): { agent: string; label: string; role: string }[] {
   const markup = renderToStaticMarkup(<NativeChatSupportedAgents />)
   const container = document.createElement('div')
   container.innerHTML = markup
   return Array.from(container.querySelectorAll('[data-agent]')).map((node) => ({
     agent: node.getAttribute('data-agent') ?? '',
-    label: node.getAttribute('aria-label') ?? ''
+    label: node.getAttribute('aria-label') ?? '',
+    role: node.getAttribute('role') ?? ''
   }))
 }
 
@@ -52,6 +53,7 @@ describe('NativeChatSupportedAgents', () => {
     for (const chip of getRenderedChips()) {
       const entry = getAgentCatalog().find((candidate) => candidate.id === chip.agent)
       expect(chip.label).toBe(entry?.label)
+      expect(chip.role).toBe('img')
     }
   })
 
diff --git a/src/renderer/src/components/settings/NativeChatSupportedAgents.tsx b/src/renderer/src/components/settings/NativeChatSupportedAgents.tsx
index d63353956c6..52001a573ca 100644
--- a/src/renderer/src/components/settings/NativeChatSupportedAgents.tsx
+++ b/src/renderer/src/components/settings/NativeChatSupportedAgents.tsx
@@ -19,7 +19,7 @@ export function NativeChatSupportedAgents(): React.JSX.Element {
           return (
             <Tooltip key={agent}>
               <TooltipTrigger asChild>
-                <span data-agent={agent} aria-label={label}>
+                <span data-agent={agent} role="img" aria-label={label}>
                   <AgentIcon agent={agent} size={13} />
                 </span>
               </TooltipTrigger>