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
diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 0959e1e459..5202e97781 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,58 @@ 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',
-                            )}
+                          <DropdownMenu.RadioGroup
+                            aria-label="Position settings"
+                            value={props.localStore.position}
+                            onChange={(value) =>
+                              setDevtoolsPosition(value as DevtoolsPosition)
+                            }
                           >
-                            <span>Right</span>
-                            <ArrowRight />
-                          </DropdownMenu.Item>
+                            <DropdownMenu.RadioItem
+                              value="top"
+                              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"
+                              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"
+                              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 +1144,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 +1212,49 @@ 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"
+                            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 +1950,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,6 +2364,9 @@ const MutationDetails = () => {
             styles().detailsBody,
             'tsqd-query-details-summary-container',
           )}
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
         >
           <div class="tsqd-query-details-summary">
             <pre>
@@ -3521,15 +3516,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..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 } 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 +333,8 @@ export default function Explorer(props: ExplorerProps) {
 
   const currentDataPath = props.dataPath ?? []
 
+  const inputId = createUniqueId()
+
   return (
     <div class={styles().entry}>
       <Show when={subEntryPages().length}>
@@ -332,6 +342,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}>
@@ -446,7 +457,9 @@ 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 &&
@@ -467,6 +480,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}