From 1b1a2557b40efc66910ee4abcee873be16e9ee1d Mon Sep 17 00:00:00 2001
From: billlzzz10 <208072329+billlzzz10@users.noreply.github.com>
Date: Sun, 5 Jul 2026 16:54:48 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessibility?=
 =?UTF-8?q?=20to=20MCP=20server=20popup=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added `aria-pressed`, `aria-expanded`, `aria-hidden`, and `aria-label` attributes to various elements in `McpServerPopup` for screen readers.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 src/components/mcp/mcp-server-popup.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/mcp/mcp-server-popup.tsx b/src/components/mcp/mcp-server-popup.tsx
index 4fbfa350..a3e668ef 100644
--- a/src/components/mcp/mcp-server-popup.tsx
+++ b/src/components/mcp/mcp-server-popup.tsx
@@ -44,6 +44,7 @@ export function McpServerPopup({
   showOfficialBranding = false,
 }: McpServerPopupProps) {
   const t = useTranslations("mcp");
+  const tCommon = useTranslations("common");
   const { data: session } = useSession();
   const [isOpen, setIsOpen] = useState(false);
   const [filtersOpen, setFiltersOpen] = useState(false);
@@ -148,6 +149,7 @@ export function McpServerPopup({
             <div className="flex gap-0.5">
               <button
                 onClick={() => setMcpMode("remote")}
+                aria-pressed={mcpMode === "remote"}
                 className={cn(
                   "rounded px-2 py-1 text-[11px] font-medium transition-colors",
                   mcpMode === "remote"
@@ -159,6 +161,7 @@ export function McpServerPopup({
               </button>
               <button
                 onClick={() => setMcpMode("local")}
+                aria-pressed={mcpMode === "local"}
                 className={cn(
                   "rounded px-2 py-1 text-[11px] font-medium transition-colors",
                   mcpMode === "local"
@@ -199,10 +202,12 @@ export function McpServerPopup({
           <div className="border-t pt-2">
             <button
               onClick={() => setFiltersOpen(!filtersOpen)}
+              aria-expanded={filtersOpen}
               className="text-muted-foreground hover:text-foreground flex w-full items-center justify-between text-[11px] transition-colors"
             >
               <span>{t("customizeFilters")}</span>
               <ChevronDown
+                aria-hidden="true"
                 className={cn("h-3 w-3 transition-transform", filtersOpen && "rotate-180")}
               />
             </button>
@@ -235,9 +240,10 @@ export function McpServerPopup({
                           @{user}
                           <button
                             onClick={() => removeUser(user)}
+                            aria-label={`${tCommon("delete")} @${user}`}
                             className="hover:text-destructive"
                           >
-                            <X className="h-2.5 w-2.5" />
+                            <X aria-hidden="true" className="h-2.5 w-2.5" />
                           </button>
                         </Badge>
                       ))}
@@ -276,9 +282,10 @@ export function McpServerPopup({
                           {cat}
                           <button
                             onClick={() => removeCategory(cat)}
+                            aria-label={`${tCommon("delete")} ${cat}`}
                             className="hover:text-destructive"
                           >
-                            <X className="h-2.5 w-2.5" />
+                            <X aria-hidden="true" className="h-2.5 w-2.5" />
                           </button>
                         </Badge>
                       ))}
@@ -310,8 +317,12 @@ export function McpServerPopup({
                           className="h-5 gap-0.5 pr-0.5 text-[10px]"
                         >
                           {tag}
-                          <button onClick={() => removeTag(tag)} className="hover:text-destructive">
-                            <X className="h-2.5 w-2.5" />
+                          <button
+                            onClick={() => removeTag(tag)}
+                            aria-label={`${tCommon("delete")} ${tag}`}
+                            className="hover:text-destructive"
+                          >
+                            <X aria-hidden="true" className="h-2.5 w-2.5" />
                           </button>
                         </Badge>
                       ))}