From ea765d5b4a9283c1c5c010bd204042e372169722 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Thu, 23 Oct 2025 15:30:53 +0000
Subject: [PATCH 1/7] update devtool a11y

---
 packages/query-devtools/src/Devtools.tsx | 302 +++++++++++------------
 packages/query-devtools/src/Explorer.tsx |   1 +
 2 files changed, 150 insertions(+), 153 deletions(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 0959e1e459..c0e6f76d5e 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -1000,7 +1000,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                   'tsqd-action-open-pip',
                 )}
                 aria-label="Open in picture-in-picture mode"
-                title={`Open in picture-in-picture mode`}
+                title="Open in picture-in-picture mode"
               >
                 <PiPIcon />
               </button>
@@ -1013,6 +1013,8 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                   'tsqd-actions-btn',
                   'tsqd-action-settings',
                 )}
+                aria-label="Open settings menu"
+                title="Open settings menu"
               >
                 <Settings />
               </DropdownMenu.Trigger>
@@ -1061,62 +1063,55 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                             'tsqd-settings-submenu',
                           )}
                         >
-                          <DropdownMenu.Item
-                            onSelect={() => {
-                              setDevtoolsPosition('top')
-                            }}
-                            as="button"
-                            class={cx(
-                              styles().settingsSubButton,
-                              'tsqd-settings-menu-position-btn',
-                              'tsqd-settings-menu-position-btn-top',
-                            )}
-                          >
-                            <span>Top</span>
-                            <ArrowUp />
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            onSelect={() => {
-                              setDevtoolsPosition('bottom')
-                            }}
-                            as="button"
-                            class={cx(
-                              styles().settingsSubButton,
-                              'tsqd-settings-menu-position-btn',
-                              'tsqd-settings-menu-position-btn-bottom',
-                            )}
-                          >
-                            <span>Bottom</span>
-                            <ArrowDown />
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            onSelect={() => {
-                              setDevtoolsPosition('left')
-                            }}
-                            as="button"
-                            class={cx(
-                              styles().settingsSubButton,
-                              'tsqd-settings-menu-position-btn',
-                              'tsqd-settings-menu-position-btn-left',
-                            )}
-                          >
-                            <span>Left</span>
-                            <ArrowLeft />
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            onSelect={() => {
-                              setDevtoolsPosition('right')
-                            }}
-                            as="button"
-                            class={cx(
-                              styles().settingsSubButton,
-                              'tsqd-settings-menu-position-btn',
-                              'tsqd-settings-menu-position-btn-right',
-                            )}
-                          >
-                            <span>Right</span>
-                            <ArrowRight />
-                          </DropdownMenu.Item>
+                          <DropdownMenu.RadioGroup aria-label="Position settings" value={props.localStore.position} onChange={value => setDevtoolsPosition(value as DevtoolsPosition)}>
+                            <DropdownMenu.RadioItem
+                              value="top"
+                              role="menuitemradio"
+                              class={cx(
+                                styles().settingsSubButton,
+                                'tsqd-settings-menu-position-btn',
+                                'tsqd-settings-menu-position-btn-top',
+                              )}
+                            >
+                              <span>Top</span>
+                              <ArrowUp />
+                            </DropdownMenu.RadioItem>
+                            <DropdownMenu.RadioItem
+                              value="bottom"
+                              role="menuitemradio"
+                              class={cx(
+                                styles().settingsSubButton,
+                                'tsqd-settings-menu-position-btn',
+                                'tsqd-settings-menu-position-btn-bottom',
+                              )}
+                            >
+                              <span>Bottom</span>
+                              <ArrowDown />
+                            </DropdownMenu.RadioItem>
+                            <DropdownMenu.RadioItem
+                              value="left"
+                              role="menuitemradio"
+                              class={cx(
+                                styles().settingsSubButton,
+                                'tsqd-settings-menu-position-btn',
+                                'tsqd-settings-menu-position-btn-left',
+                              )}
+                            >
+                              <span>Left</span>
+                              <ArrowLeft />
+                            </DropdownMenu.RadioItem>
+                            <DropdownMenu.RadioItem
+                              value="right"
+                              class={cx(
+                                styles().settingsSubButton,
+                                'tsqd-settings-menu-position-btn',
+                                'tsqd-settings-menu-position-btn-right',
+                              )}
+                            >
+                              <span>Right</span>
+                              <ArrowRight />
+                            </DropdownMenu.RadioItem>
+                          </DropdownMenu.RadioGroup>
                         </DropdownMenu.SubContent>
                       </DropdownMenu.Portal>
                     </DropdownMenu.Sub>
@@ -1146,54 +1141,47 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                           'tsqd-settings-submenu',
                         )}
                       >
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            props.setLocalStore('theme_preference', 'light')
-                          }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            props.localStore.theme_preference === 'light' &&
-                              styles().themeSelectedButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-top',
-                          )}
-                        >
-                          <span>Light</span>
-                          <Sun />
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            props.setLocalStore('theme_preference', 'dark')
+                        <DropdownMenu.RadioGroup 
+                          value={props.localStore.theme_preference} 
+                          onChange={(value) => {
+                            props.setLocalStore('theme_preference', value)
                           }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            props.localStore.theme_preference === 'dark' &&
-                              styles().themeSelectedButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-bottom',
-                          )}
+                          aria-label="Theme preference"
                         >
-                          <span>Dark</span>
-                          <Moon />
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            props.setLocalStore('theme_preference', 'system')
-                          }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            props.localStore.theme_preference === 'system' &&
-                              styles().themeSelectedButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-left',
-                          )}
-                        >
-                          <span>System</span>
-                          <Monitor />
-                        </DropdownMenu.Item>
+                          <DropdownMenu.RadioItem
+                            value='light'
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-top',
+                            )}
+                          >
+                            <span>Light</span>
+                            <Sun />
+                          </DropdownMenu.RadioItem>
+                          <DropdownMenu.RadioItem
+                            value="dark"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-bottom',
+                            )}
+                          >
+                            <span>Dark</span>
+                            <Moon />
+                          </DropdownMenu.RadioItem>
+                          <DropdownMenu.RadioItem
+                            value="system"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-left',
+                            )}
+                          >
+                            <span>System</span>
+                            <Monitor />
+                          </DropdownMenu.RadioItem>
+                        </DropdownMenu.RadioGroup>
                       </DropdownMenu.SubContent>
                     </DropdownMenu.Portal>
                   </DropdownMenu.Sub>
@@ -1221,51 +1209,48 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                           styles().settingsMenu,
                           'tsqd-settings-submenu',
                         )}
+                        aria-label="Hide disabled queries setting"
                       >
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            props.setLocalStore('hideDisabledQueries', 'false')
-                          }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            props.localStore.hideDisabledQueries !== 'true' &&
-                              styles().themeSelectedButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-show',
-                          )}
+                        <DropdownMenu.RadioGroup
+                          value={props.localStore.hideDisabledQueries}
+                          onChange={value => props.setLocalStore('hideDisabledQueries', value) }
                         >
-                          <span>Show</span>
-                          <Show
-                            when={
-                              props.localStore.hideDisabledQueries !== 'true'
-                            }
+                          <DropdownMenu.RadioItem
+                            value="false"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-show',
+                            )}
                           >
-                            <CheckCircle />
-                          </Show>
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            props.setLocalStore('hideDisabledQueries', 'true')
-                          }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            props.localStore.hideDisabledQueries === 'true' &&
-                              styles().themeSelectedButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-hide',
-                          )}
-                        >
-                          <span>Hide</span>
-                          <Show
-                            when={
-                              props.localStore.hideDisabledQueries === 'true'
-                            }
+                            <span>Show</span>
+                            <Show
+                              when={
+                                props.localStore.hideDisabledQueries !== 'true'
+                              }
+                            >
+                              <CheckCircle />
+                            </Show>
+                          </DropdownMenu.RadioItem>
+                          <DropdownMenu.RadioItem
+                            value="true"
+                            role="menuitemradio"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-hide',
+                            )}
                           >
-                            <CheckCircle />
-                          </Show>
-                        </DropdownMenu.Item>
+                            <span>Hide</span>
+                            <Show
+                              when={
+                                props.localStore.hideDisabledQueries === 'true'
+                              }
+                            >
+                              <CheckCircle />
+                            </Show>
+                          </DropdownMenu.RadioItem>
+                        </DropdownMenu.RadioGroup>
                       </DropdownMenu.SubContent>
                     </DropdownMenu.Portal>
                   </DropdownMenu.Sub>
@@ -1961,6 +1946,9 @@ const QueryDetails = () => {
             styles().detailsBody,
             'tsqd-query-details-summary-container',
           )}
+          role="status"  
+          aria-live="polite"
+          aria-atomic="true"
         >
           <div class="tsqd-query-details-summary">
             <pre>
@@ -2372,8 +2360,16 @@ const MutationDetails = () => {
             styles().detailsBody,
             'tsqd-query-details-summary-container',
           )}
+          role="status"  
+          aria-live="polite"
+          aria-atomic="true"
         >
-          <div class="tsqd-query-details-summary">
+          <div 
+            class="tsqd-query-details-summary" 
+            role="status"  
+            aria-live="polite"
+            aria-atomic="true"
+          >
             <pre>
               <code>
                 <Show
@@ -3521,15 +3517,15 @@ const stylesFactory = (
         outline-offset: 2px;
         outline: 2px solid ${colors.blue[800]};
       }
-    `,
-    themeSelectedButton: css`
-      background-color: ${t(colors.purple[100], colors.purple[900])};
-      color: ${t(colors.purple[700], colors.purple[300])};
-      & svg {
-        color: ${t(colors.purple[700], colors.purple[300])};
-      }
-      &:hover {
+      &[data-checked] {
         background-color: ${t(colors.purple[100], colors.purple[900])};
+        color: ${t(colors.purple[700], colors.purple[300])};
+        & svg {
+          color: ${t(colors.purple[700], colors.purple[300])};
+        }
+        &:hover {
+          background-color: ${t(colors.purple[100], colors.purple[900])};
+        }
       }
     `,
     viewToggle: css`
diff --git a/packages/query-devtools/src/Explorer.tsx b/packages/query-devtools/src/Explorer.tsx
index 8bf42fe4e4..6e1e0c6810 100644
--- a/packages/query-devtools/src/Explorer.tsx
+++ b/packages/query-devtools/src/Explorer.tsx
@@ -332,6 +332,7 @@ export default function Explorer(props: ExplorerProps) {
           <button
             class={styles().expanderButton}
             onClick={() => toggleExpanded()}
+            aria-expanded={expanded() ? 'true' : 'false'}
           >
             <Expander expanded={expanded()} /> <span>{props.label}</span>{' '}
             <span class={styles().info}>

From 22c2ae3fa8459b81e29b8d75855754478f9df063 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Thu, 23 Oct 2025 15:34:58 +0000
Subject: [PATCH 2/7] changeset

---
 .changeset/slick-clubs-lay.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/slick-clubs-lay.md

diff --git a/.changeset/slick-clubs-lay.md b/.changeset/slick-clubs-lay.md
new file mode 100644
index 0000000000..aaf5fda7c4
--- /dev/null
+++ b/.changeset/slick-clubs-lay.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/query-devtools': patch
+---
+
+improves accessibility of devtools

From 0f98da774f47b9cec6f8c3f740ca84a88997b8b9 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 23 Oct 2025 15:36:14 +0000
Subject: [PATCH 3/7] ci: apply automated fixes

---
 packages/query-devtools/src/Devtools.tsx | 28 +++++++++++++++---------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index c0e6f76d5e..729a8eb64a 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -1063,7 +1063,13 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                             'tsqd-settings-submenu',
                           )}
                         >
-                          <DropdownMenu.RadioGroup aria-label="Position settings" value={props.localStore.position} onChange={value => setDevtoolsPosition(value as DevtoolsPosition)}>
+                          <DropdownMenu.RadioGroup
+                            aria-label="Position settings"
+                            value={props.localStore.position}
+                            onChange={(value) =>
+                              setDevtoolsPosition(value as DevtoolsPosition)
+                            }
+                          >
                             <DropdownMenu.RadioItem
                               value="top"
                               role="menuitemradio"
@@ -1141,15 +1147,15 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                           'tsqd-settings-submenu',
                         )}
                       >
-                        <DropdownMenu.RadioGroup 
-                          value={props.localStore.theme_preference} 
+                        <DropdownMenu.RadioGroup
+                          value={props.localStore.theme_preference}
                           onChange={(value) => {
                             props.setLocalStore('theme_preference', value)
                           }}
                           aria-label="Theme preference"
                         >
                           <DropdownMenu.RadioItem
-                            value='light'
+                            value="light"
                             class={cx(
                               styles().settingsSubButton,
                               'tsqd-settings-menu-position-btn',
@@ -1213,7 +1219,9 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                       >
                         <DropdownMenu.RadioGroup
                           value={props.localStore.hideDisabledQueries}
-                          onChange={value => props.setLocalStore('hideDisabledQueries', value) }
+                          onChange={(value) =>
+                            props.setLocalStore('hideDisabledQueries', value)
+                          }
                         >
                           <DropdownMenu.RadioItem
                             value="false"
@@ -1946,7 +1954,7 @@ const QueryDetails = () => {
             styles().detailsBody,
             'tsqd-query-details-summary-container',
           )}
-          role="status"  
+          role="status"
           aria-live="polite"
           aria-atomic="true"
         >
@@ -2360,13 +2368,13 @@ const MutationDetails = () => {
             styles().detailsBody,
             'tsqd-query-details-summary-container',
           )}
-          role="status"  
+          role="status"
           aria-live="polite"
           aria-atomic="true"
         >
-          <div 
-            class="tsqd-query-details-summary" 
-            role="status"  
+          <div
+            class="tsqd-query-details-summary"
+            role="status"
             aria-live="polite"
             aria-atomic="true"
           >

From 03bbee52ca3e14f8e911a6f0aa8a178e28706ae0 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Thu, 23 Oct 2025 11:44:54 -0400
Subject: [PATCH 4/7] Update packages/query-devtools/src/Devtools.tsx

---
 packages/query-devtools/src/Devtools.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 729a8eb64a..5f513bc7dd 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -2372,12 +2372,7 @@ const MutationDetails = () => {
           aria-live="polite"
           aria-atomic="true"
         >
-          <div
-            class="tsqd-query-details-summary"
-            role="status"
-            aria-live="polite"
-            aria-atomic="true"
-          >
+          <div class="tsqd-query-details-summary">
             <pre>
               <code>
                 <Show

From 9f75531337ba6ab7a8de567f3f9583e374180f6b Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Thu, 23 Oct 2025 16:02:26 +0000
Subject: [PATCH 5/7] unnecessary role

---
 packages/query-devtools/src/Devtools.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 5f513bc7dd..5202e97781 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -1072,7 +1072,6 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                           >
                             <DropdownMenu.RadioItem
                               value="top"
-                              role="menuitemradio"
                               class={cx(
                                 styles().settingsSubButton,
                                 'tsqd-settings-menu-position-btn',
@@ -1084,7 +1083,6 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                             </DropdownMenu.RadioItem>
                             <DropdownMenu.RadioItem
                               value="bottom"
-                              role="menuitemradio"
                               class={cx(
                                 styles().settingsSubButton,
                                 'tsqd-settings-menu-position-btn',
@@ -1096,7 +1094,6 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                             </DropdownMenu.RadioItem>
                             <DropdownMenu.RadioItem
                               value="left"
-                              role="menuitemradio"
                               class={cx(
                                 styles().settingsSubButton,
                                 'tsqd-settings-menu-position-btn',
@@ -1242,7 +1239,6 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                           </DropdownMenu.RadioItem>
                           <DropdownMenu.RadioItem
                             value="true"
-                            role="menuitemradio"
                             class={cx(
                               styles().settingsSubButton,
                               'tsqd-settings-menu-position-btn',

From f1aff04ad4b1e6b546239859bb411e6cfb9327e0 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Thu, 23 Oct 2025 18:25:20 +0000
Subject: [PATCH 6/7] label -> input

---
 packages/query-devtools/src/Explorer.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/query-devtools/src/Explorer.tsx b/packages/query-devtools/src/Explorer.tsx
index 6e1e0c6810..1a815de363 100644
--- a/packages/query-devtools/src/Explorer.tsx
+++ b/packages/query-devtools/src/Explorer.tsx
@@ -1,6 +1,6 @@
 import { serialize, stringify } from 'superjson'
 import { clsx as cx } from 'clsx'
-import { Index, Match, Show, Switch, createMemo, createSignal } from 'solid-js'
+import { Index, Match, Show, Switch, createMemo, createSignal, createUniqueId} from 'solid-js'
 import { Key } from '@solid-primitives/keyed'
 import * as goober from 'goober'
 import { tokens } from './theme'
@@ -325,6 +325,8 @@ export default function Explorer(props: ExplorerProps) {
 
   const currentDataPath = props.dataPath ?? []
 
+  const inputId = createUniqueId()
+  
   return (
     <div class={styles().entry}>
       <Show when={subEntryPages().length}>
@@ -447,7 +449,7 @@ export default function Explorer(props: ExplorerProps) {
       </Show>
       <Show when={subEntryPages().length === 0}>
         <div class={styles().row}>
-          <span class={styles().label}>{props.label}:</span>
+          <label for={inputId} class={styles().label}>{props.label}:</label>
           <Show
             when={
               props.editable &&
@@ -468,6 +470,7 @@ export default function Explorer(props: ExplorerProps) {
               }
             >
               <input
+                id={inputId}
                 type={type() === 'number' ? 'number' : 'text'}
                 class={cx(styles().value, styles().editableInput)}
                 value={props.value as string | number}

From caa1bafcab20e5ad40c3ed5d7ff87606ddd5ba61 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 23 Oct 2025 18:26:31 +0000
Subject: [PATCH 7/7] ci: apply automated fixes

---
 packages/query-devtools/src/Explorer.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/query-devtools/src/Explorer.tsx b/packages/query-devtools/src/Explorer.tsx
index 1a815de363..3f3debcada 100644
--- a/packages/query-devtools/src/Explorer.tsx
+++ b/packages/query-devtools/src/Explorer.tsx
@@ -1,6 +1,14 @@
 import { serialize, stringify } from 'superjson'
 import { clsx as cx } from 'clsx'
-import { Index, Match, Show, Switch, createMemo, createSignal, createUniqueId} from 'solid-js'
+import {
+  Index,
+  Match,
+  Show,
+  Switch,
+  createMemo,
+  createSignal,
+  createUniqueId,
+} from 'solid-js'
 import { Key } from '@solid-primitives/keyed'
 import * as goober from 'goober'
 import { tokens } from './theme'
@@ -326,7 +334,7 @@ export default function Explorer(props: ExplorerProps) {
   const currentDataPath = props.dataPath ?? []
 
   const inputId = createUniqueId()
-  
+
   return (
     <div class={styles().entry}>
       <Show when={subEntryPages().length}>
@@ -449,7 +457,9 @@ export default function Explorer(props: ExplorerProps) {
       </Show>
       <Show when={subEntryPages().length === 0}>
         <div class={styles().row}>
-          <label for={inputId} class={styles().label}>{props.label}:</label>
+          <label for={inputId} class={styles().label}>
+            {props.label}:
+          </label>
           <Show
             when={
               props.editable &&