From 968153b01e0cde330f8685a6fbdcec944e627dbf Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 31 Oct 2026 00:27:17 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessibility?=
 =?UTF-8?q?=20attributes=20and=20copy=20feedback=20in=20DevTools?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add accessible ARIA labels to session selector, filter input, group-by-domain toggle, theme toggle, and JSON download button
- Add aria-pressed state to the group-by-domain button
- Provide temporary visual feedback ('Copied!' tooltip, checkmark icon, and screen reader label) upon clicking the JSON copy button

Co-authored-by: Xp-boss <67393766+Xp-boss@users.noreply.github.com>
---
 packages/devtools/client/src/App.tsx | 56 +++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 9 deletions(-)

diff --git a/packages/devtools/client/src/App.tsx b/packages/devtools/client/src/App.tsx
index 7869b93c3ce..241bba0a0bb 100644
--- a/packages/devtools/client/src/App.tsx
+++ b/packages/devtools/client/src/App.tsx
@@ -406,6 +406,7 @@ export default function App() {
               <select
                 value={selectedSessionId || ''}
                 onChange={(e) => setSelectedSessionId(e.target.value)}
+                aria-label="Select session"
                 style={{
                   fontSize: '11px',
                   padding: '2px 8px',
@@ -483,6 +484,7 @@ export default function App() {
               height: '24px',
               width: '32px',
             }}
+            aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
             title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
           >
             {isDark ? '🌙' : '☀️'}
@@ -1049,6 +1051,7 @@ function NetworkView({
             placeholder="Filter..."
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
+            aria-label="Filter network requests"
             style={{
               flex: 1,
               boxSizing: 'border-box',
@@ -1071,6 +1074,8 @@ function NetworkView({
               fontSize: '12px',
               padding: '0 8px',
             }}
+            aria-label="Group by domain"
+            aria-pressed={groupByDomain}
             title="Group by Domain"
           >
             📂
@@ -1433,6 +1438,7 @@ function BodyView({
   t: ThemeColors;
 }) {
   const [mode, setMode] = useState<'json' | 'raw'>('json');
+  const [copied, setCopied] = useState(false);
   const hasChunks = chunks && chunks.length > 0;
   const safeContent = hasChunks
     ? chunks.map((c) => c.data).join('')
@@ -1446,9 +1452,15 @@ function BodyView({
   };
 
   const copyJson = () => {
-    navigator.clipboard.writeText(getFormattedJson()).catch(() => {
-      // Clipboard API unavailable — silently ignore
-    });
+    navigator.clipboard
+      .writeText(getFormattedJson())
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      })
+      .catch(() => {
+        // Clipboard API unavailable — silently ignore
+      });
   };
 
   const downloadJson = () => {
@@ -1513,13 +1525,39 @@ function BodyView({
           </button>
         ))}
         <div style={{ flex: 1 }} />
-        <button onClick={copyJson} style={iconBtn} title="Copy JSON">
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25z" />
-            <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25z" />
-          </svg>
+        <button
+          onClick={copyJson}
+          style={{ ...iconBtn, color: copied ? '#81c995' : t.textSecondary }}
+          title={copied ? 'Copied!' : 'Copy JSON'}
+          aria-label={copied ? 'Copied to clipboard' : 'Copy JSON to clipboard'}
+        >
+          {copied ? (
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 16 16"
+              fill="currentColor"
+            >
+              <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" />
+            </svg>
+          ) : (
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 16 16"
+              fill="currentColor"
+            >
+              <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25z" />
+              <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25z" />
+            </svg>
+          )}
         </button>
-        <button onClick={downloadJson} style={iconBtn} title="Download JSON">
+        <button
+          onClick={downloadJson}
+          style={iconBtn}
+          title="Download JSON"
+          aria-label="Download JSON"
+        >
           <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
             <path d="M2.75 14A1.75 1.75 0 011 12.25v-2.5a.75.75 0 011.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25v-2.5a.75.75 0 011.5 0v2.5A1.75 1.75 0 0113.25 14z" />
             <path d="M7.25 7.689V2a.75.75 0 011.5 0v5.689l1.97-1.969a.749.749 0 111.06 1.06l-3.25 3.25a.749.749 0 01-1.06 0L4.22 6.78a.749.749 0 111.06-1.06z" />