From b58d8be4ac125b2f85dd7f892bdbe28605a51348 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Wed, 10 Dec 2025 17:46:37 +0000
Subject: [PATCH 1/7] improve a11y again

---
 packages/query-devtools/src/Devtools.tsx | 101 ++++++++++++++++++++---
 1 file changed, 88 insertions(+), 13 deletions(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 5202e97781..c1693cb661 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -417,6 +417,13 @@ const DraggablePanel: Component<DevtoolsPanelProps> = (props) => {
     return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
+  let closeBtnRef!: HTMLButtonElement
+
+  // Focus the close button when the panel opens for screen reader accessibility
+  onMount(() => {
+    closeBtnRef.focus()
+  })
+
   const [isResizing, setIsResizing] = createSignal(false)
 
   const position = createMemo(
@@ -583,14 +590,68 @@ const DraggablePanel: Component<DevtoolsPanelProps> = (props) => {
       aria-label="Tanstack query devtools"
     >
       <div
+        role="separator"
+        aria-orientation={
+          position() === 'top' || position() === 'bottom'
+            ? 'horizontal'
+            : 'vertical'
+        }
+        aria-label="Resize devtools panel"
+        aria-valuenow={
+          position() === 'top' || position() === 'bottom'
+            ? Number(props.localStore.height || DEFAULT_HEIGHT)
+            : Number(props.localStore.width || DEFAULT_WIDTH)
+        }
+        tabindex="0"
         class={cx(
           styles().dragHandle,
           styles()[`dragHandle-position-${position()}`],
           'tsqd-drag-handle',
         )}
         onMouseDown={handleDragStart}
+        onKeyDown={(e) => {
+          const step = 10
+          const minHeight = convertRemToPixels(3.5)
+          const minWidth = convertRemToPixels(12)
+          if (position() === 'top' || position() === 'bottom') {
+            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+              e.preventDefault()
+              const currentHeight = Number(
+                props.localStore.height || DEFAULT_HEIGHT,
+              )
+              const delta =
+                position() === 'bottom'
+                  ? e.key === 'ArrowUp'
+                    ? step
+                    : -step
+                  : e.key === 'ArrowDown'
+                    ? step
+                    : -step
+              const newHeight = Math.max(minHeight, currentHeight + delta)
+              props.setLocalStore('height', String(newHeight))
+            }
+          } else {
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+              e.preventDefault()
+              const currentWidth = Number(
+                props.localStore.width || DEFAULT_WIDTH,
+              )
+              const delta =
+                position() === 'right'
+                  ? e.key === 'ArrowLeft'
+                    ? step
+                    : -step
+                  : e.key === 'ArrowRight'
+                    ? step
+                    : -step
+              const newWidth = Math.max(minWidth, currentWidth + delta)
+              props.setLocalStore('width', String(newWidth))
+            }
+          }
+        }}
       ></div>
       <button
+        ref={closeBtnRef}
         aria-label="Close tanstack query devtools"
         class={cx(
           styles().closeBtn,
@@ -796,6 +857,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
             <RadioGroup.Root
               class={cx(styles().viewToggle)}
               value={selectedView()}
+              aria-label="Toggle between queries and mutations view"
               onChange={(value) => {
                 setSelectedView(value as 'queries' | 'mutations')
                 setSelectedQueryHash(null)
@@ -869,6 +931,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                 <select
                   value={sort()}
                   name="tsqd-queries-filter-sort"
+                  aria-label="Sort queries by"
                   onChange={(e) => {
                     props.setLocalStore('sort', e.currentTarget.value)
                   }}
@@ -882,6 +945,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                 <select
                   value={mutationSort()}
                   name="tsqd-mutations-filter-sort"
+                  aria-label="Sort mutations by"
                   onChange={(e) => {
                     props.setLocalStore('mutationSort', e.currentTarget.value)
                   }}
@@ -1212,10 +1276,10 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                           styles().settingsMenu,
                           'tsqd-settings-submenu',
                         )}
-                        aria-label="Hide disabled queries setting"
                       >
                         <DropdownMenu.RadioGroup
                           value={props.localStore.hideDisabledQueries}
+                          aria-label="Hide disabled queries setting"
                           onChange={(value) =>
                             props.setLocalStore('hideDisabledQueries', value)
                           }
@@ -1409,7 +1473,7 @@ const QueryRow: Component<{ query: Query }> = (props) => {
             styles().selectedQueryRow,
           'tsqd-query-row',
         )}
-        aria-label={`Query key ${props.query.queryHash}`}
+        aria-label={`Query key ${props.query.queryHash}${isDisabled() ? ', disabled' : ''}${isStatic() ? ', static' : ''}`}
       >
         <div
           class={cx(getObserverCountColorStyles(), 'tsqd-query-observer-count')}
@@ -1418,10 +1482,10 @@ const QueryRow: Component<{ query: Query }> = (props) => {
         </div>
         <code class="tsqd-query-hash">{props.query.queryHash}</code>
         <Show when={isDisabled()}>
-          <div class="tsqd-query-disabled-indicator">disabled</div>
+          <div class="tsqd-query-disabled-indicator" aria-hidden="true">disabled</div>
         </Show>
         <Show when={isStatic()}>
-          <div class="tsqd-query-static-indicator">static</div>
+          <div class="tsqd-query-static-indicator" aria-hidden="true">static</div>
         </Show>
       </button>
     </Show>
@@ -1942,7 +2006,7 @@ const QueryDetails = () => {
       <div
         class={cx(styles().detailsContainer, 'tsqd-query-details-container')}
       >
-        <div class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
           Query Details
         </div>
         <div
@@ -1975,7 +2039,7 @@ const QueryDetails = () => {
             </span>
           </div>
         </div>
-        <div class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
           Actions
         </div>
         <div
@@ -2172,6 +2236,7 @@ const QueryDetails = () => {
               Trigger Error
               <select
                 disabled={queryStatus() === 'pending'}
+                aria-label="Select error type to trigger"
                 onChange={(e) => {
                   const errorType = errorTypes().find(
                     (et) => et.name === e.currentTarget.value,
@@ -2191,7 +2256,7 @@ const QueryDetails = () => {
             </div>
           </Show>
         </div>
-        <div class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
           Data {dataMode() === 'view' ? 'Explorer' : 'Editor'}
         </div>
         <Show when={dataMode() === 'view'}>
@@ -2235,6 +2300,7 @@ const QueryDetails = () => {
           >
             <textarea
               name="data"
+              aria-label="Edit query data as JSON"
               class={styles().devtoolsEditTextarea}
               onFocus={() => setDataEditError(false)}
               data-error={dataEditError()}
@@ -2271,7 +2337,7 @@ const QueryDetails = () => {
             </div>
           </form>
         </Show>
-        <div class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
           Query Explorer
         </div>
         <div
@@ -2356,7 +2422,7 @@ const MutationDetails = () => {
       <div
         class={cx(styles().detailsContainer, 'tsqd-query-details-container')}
       >
-        <div class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
           Mutation Details
         </div>
         <div
@@ -2395,7 +2461,7 @@ const MutationDetails = () => {
             </span>
           </div>
         </div>
-        <div class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
           Variables Details
         </div>
         <div
@@ -2410,7 +2476,7 @@ const MutationDetails = () => {
             value={activeMutation()!.state.variables}
           />
         </div>
-        <div class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
           Context Details
         </div>
         <div
@@ -2425,7 +2491,7 @@ const MutationDetails = () => {
             value={activeMutation()!.state.context}
           />
         </div>
-        <div class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
           Data Explorer
         </div>
         <div
@@ -2440,7 +2506,7 @@ const MutationDetails = () => {
             value={activeMutation()!.state.data}
           />
         </div>
-        <div class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
           Mutations Explorer
         </div>
         <div
@@ -2897,6 +2963,15 @@ const stylesFactory = (
       &:hover {
         background-color: ${colors.purple[400]}${t('', alpha[90])};
       }
+      &:focus {
+        outline: none;
+        background-color: ${colors.purple[400]}${t('', alpha[90])};
+      }
+      &:focus-visible {
+        outline: 2px solid ${colors.blue[800]};
+        outline-offset: -2px;
+        background-color: ${colors.purple[400]}${t('', alpha[90])};
+      }
       z-index: 4;
     `,
     'dragHandle-position-top': css`

From 1bafbb02fcac2c5e30c57c3aaa18e7eb1cb33f9e Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 10 Dec 2025 17:48:39 +0000
Subject: [PATCH 2/7] ci: apply automated fixes

---
 packages/query-devtools/src/Devtools.tsx | 62 +++++++++++++++++++-----
 1 file changed, 51 insertions(+), 11 deletions(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index c1693cb661..f7fa598eef 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -1482,10 +1482,14 @@ const QueryRow: Component<{ query: Query }> = (props) => {
         </div>
         <code class="tsqd-query-hash">{props.query.queryHash}</code>
         <Show when={isDisabled()}>
-          <div class="tsqd-query-disabled-indicator" aria-hidden="true">disabled</div>
+          <div class="tsqd-query-disabled-indicator" aria-hidden="true">
+            disabled
+          </div>
         </Show>
         <Show when={isStatic()}>
-          <div class="tsqd-query-static-indicator" aria-hidden="true">static</div>
+          <div class="tsqd-query-static-indicator" aria-hidden="true">
+            static
+          </div>
         </Show>
       </button>
     </Show>
@@ -2006,7 +2010,11 @@ const QueryDetails = () => {
       <div
         class={cx(styles().detailsContainer, 'tsqd-query-details-container')}
       >
-        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div
+          role="heading"
+          aria-level="2"
+          class={cx(styles().detailsHeader, 'tsqd-query-details-header')}
+        >
           Query Details
         </div>
         <div
@@ -2039,7 +2047,11 @@ const QueryDetails = () => {
             </span>
           </div>
         </div>
-        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div
+          role="heading"
+          aria-level="2"
+          class={cx(styles().detailsHeader, 'tsqd-query-details-header')}
+        >
           Actions
         </div>
         <div
@@ -2256,7 +2268,11 @@ const QueryDetails = () => {
             </div>
           </Show>
         </div>
-        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div
+          role="heading"
+          aria-level="2"
+          class={cx(styles().detailsHeader, 'tsqd-query-details-header')}
+        >
           Data {dataMode() === 'view' ? 'Explorer' : 'Editor'}
         </div>
         <Show when={dataMode() === 'view'}>
@@ -2337,7 +2353,11 @@ const QueryDetails = () => {
             </div>
           </form>
         </Show>
-        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div
+          role="heading"
+          aria-level="2"
+          class={cx(styles().detailsHeader, 'tsqd-query-details-header')}
+        >
           Query Explorer
         </div>
         <div
@@ -2422,7 +2442,11 @@ const MutationDetails = () => {
       <div
         class={cx(styles().detailsContainer, 'tsqd-query-details-container')}
       >
-        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div
+          role="heading"
+          aria-level="2"
+          class={cx(styles().detailsHeader, 'tsqd-query-details-header')}
+        >
           Mutation Details
         </div>
         <div
@@ -2461,7 +2485,11 @@ const MutationDetails = () => {
             </span>
           </div>
         </div>
-        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div
+          role="heading"
+          aria-level="2"
+          class={cx(styles().detailsHeader, 'tsqd-query-details-header')}
+        >
           Variables Details
         </div>
         <div
@@ -2476,7 +2504,11 @@ const MutationDetails = () => {
             value={activeMutation()!.state.variables}
           />
         </div>
-        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div
+          role="heading"
+          aria-level="2"
+          class={cx(styles().detailsHeader, 'tsqd-query-details-header')}
+        >
           Context Details
         </div>
         <div
@@ -2491,7 +2523,11 @@ const MutationDetails = () => {
             value={activeMutation()!.state.context}
           />
         </div>
-        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div
+          role="heading"
+          aria-level="2"
+          class={cx(styles().detailsHeader, 'tsqd-query-details-header')}
+        >
           Data Explorer
         </div>
         <div
@@ -2506,7 +2542,11 @@ const MutationDetails = () => {
             value={activeMutation()!.state.data}
           />
         </div>
-        <div role="heading" aria-level="2" class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
+        <div
+          role="heading"
+          aria-level="2"
+          class={cx(styles().detailsHeader, 'tsqd-query-details-header')}
+        >
           Mutations Explorer
         </div>
         <div

From 479e8f394439900f175d8b48e723f07a06d4320e Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Wed, 10 Dec 2025 17:49:37 +0000
Subject: [PATCH 3/7] changeset

---
 .changeset/silver-peas-end.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/silver-peas-end.md

diff --git a/.changeset/silver-peas-end.md b/.changeset/silver-peas-end.md
new file mode 100644
index 0000000000..ab94ccce24
--- /dev/null
+++ b/.changeset/silver-peas-end.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/query-devtools': minor
+---
+
+improve a11y around screenreader + resizing

From a7957fbd18e6825df310ea8fb34a05cfa6efe2ad Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Wed, 10 Dec 2025 18:04:55 +0000
Subject: [PATCH 4/7] more granular read

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

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index f7fa598eef..6028c38cae 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -2022,9 +2022,6 @@ const QueryDetails = () => {
             styles().detailsBody,
             'tsqd-query-details-summary-container',
           )}
-          role="status"
-          aria-live="polite"
-          aria-atomic="true"
         >
           <div class="tsqd-query-details-summary">
             <pre>
@@ -2032,6 +2029,8 @@ const QueryDetails = () => {
             </pre>
             <span
               class={cx(styles().queryDetailsStatus, getQueryStatusColors())}
+              role="status"
+              aria-live="polite"
             >
               {statusLabel()}
             </span>
@@ -2454,9 +2453,6 @@ const MutationDetails = () => {
             styles().detailsBody,
             'tsqd-query-details-summary-container',
           )}
-          role="status"
-          aria-live="polite"
-          aria-atomic="true"
         >
           <div class="tsqd-query-details-summary">
             <pre>
@@ -2471,6 +2467,8 @@ const MutationDetails = () => {
             </pre>
             <span
               class={cx(styles().queryDetailsStatus, getQueryStatusColors())}
+              role="status"
+              aria-live="polite"
             >
               <Show when={color() === 'purple'}>pending</Show>
               <Show when={color() !== 'purple'}>{status()}</Show>

From bf4599ce821c48a69765ce0a4f704ca7766be487 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Wed, 10 Dec 2025 18:08:13 +0000
Subject: [PATCH 5/7] add valuemin

---
 packages/query-devtools/src/Devtools.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 6028c38cae..1f2e5b7b48 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -597,6 +597,11 @@ const DraggablePanel: Component<DevtoolsPanelProps> = (props) => {
             : 'vertical'
         }
         aria-label="Resize devtools panel"
+        aria-valuemin={
+          position() === 'top' || position() === 'bottom'
+            ? convertRemToPixels(3.5)
+            : convertRemToPixels(12)
+        }
         aria-valuenow={
           position() === 'top' || position() === 'bottom'
             ? Number(props.localStore.height || DEFAULT_HEIGHT)

From 1117ab8b8901da4fe429f1519650ebc9713cd8ad Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Wed, 10 Dec 2025 18:09:26 +0000
Subject: [PATCH 6/7] a few more nits

---
 packages/query-devtools/src/Devtools.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 1f2e5b7b48..e8bad7cd98 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -1783,6 +1783,7 @@ const QueryStatus: Component<QueryStatusProps> = (props) => {
       }}
       disabled={showLabel()}
       ref={tagRef}
+      aria-label={`${props.label}: ${props.count}`}
       class={cx(
         styles().queryStatusTag,
         !showLabel() &&
@@ -1814,6 +1815,7 @@ const QueryStatus: Component<QueryStatusProps> = (props) => {
         </div>
       </Show>
       <span
+        aria-hidden="true"
         class={cx(
           css`
             width: ${tokens.size[1.5]};
@@ -2076,6 +2078,7 @@ const QueryDetails = () => {
             disabled={statusLabel() === 'fetching'}
           >
             <span
+              aria-hidden="true"
               class={css`
                 background-color: ${t(colors.blue[600], colors.blue[400])};
               `}
@@ -2100,6 +2103,7 @@ const QueryDetails = () => {
             disabled={queryStatus() === 'pending'}
           >
             <span
+              aria-hidden="true"
               class={css`
                 background-color: ${t(colors.yellow[600], colors.yellow[400])};
               `}
@@ -2124,6 +2128,7 @@ const QueryDetails = () => {
             disabled={queryStatus() === 'pending'}
           >
             <span
+              aria-hidden="true"
               class={css`
                 background-color: ${t(colors.gray[600], colors.gray[400])};
               `}
@@ -2149,6 +2154,7 @@ const QueryDetails = () => {
             disabled={statusLabel() === 'fetching'}
           >
             <span
+              aria-hidden="true"
               class={css`
                 background-color: ${t(colors.pink[500], colors.pink[400])};
               `}
@@ -2198,6 +2204,7 @@ const QueryDetails = () => {
             }}
           >
             <span
+              aria-hidden="true"
               class={css`
                 background-color: ${t(colors.cyan[500], colors.cyan[400])};
               `}
@@ -2227,6 +2234,7 @@ const QueryDetails = () => {
               disabled={queryStatus() === 'pending'}
             >
               <span
+                aria-hidden="true"
                 class={css`
                   background-color: ${t(colors.red[500], colors.red[400])};
                 `}
@@ -2245,6 +2253,7 @@ const QueryDetails = () => {
               )}
             >
               <span
+                aria-hidden="true"
                 class={css`
                   background-color: ${tokens.colors.red[400]};
                 `}

From 7988ef3a95e4c1f34004f64ebfe56c37fca8ea30 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Wed, 10 Dec 2025 18:11:34 +0000
Subject: [PATCH 7/7] fix mouseUp

---
 packages/query-devtools/src/Devtools.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index e8bad7cd98..cceec7a3de 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -487,7 +487,7 @@ const DraggablePanel: Component<DevtoolsPanelProps> = (props) => {
         setIsResizing(false)
       }
       document.removeEventListener('mousemove', runDrag, false)
-      document.removeEventListener('mouseUp', unsubscribe, false)
+      document.removeEventListener('mouseup', unsubscribe, false)
     }
 
     document.addEventListener('mousemove', runDrag, false)