@tanstack/query-devtools 5.91.1 → 5.92.0

package/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(
@@ -480,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)
@@ -583,14 +590,73 @@ 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-valuemin={
+          position() === 'top' || position() === 'bottom'
+            ? convertRemToPixels(3.5)
+            : convertRemToPixels(12)
+        }
+        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 +862,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 +936,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 +950,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 +1281,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 +1478,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 +1487,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">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>
@@ -1710,6 +1783,7 @@ const QueryStatus: Component<QueryStatusProps> = (props) => {
       }}
       disabled={showLabel()}
       ref={tagRef}
+      aria-label={`${props.label}: ${props.count}`}
       class={cx(
         styles().queryStatusTag,
         !showLabel() &&
@@ -1741,6 +1815,7 @@ const QueryStatus: Component<QueryStatusProps> = (props) => {
         </div>
       </Show>
       <span
+        aria-hidden="true"
         class={cx(
           css`
             width: ${tokens.size[1.5]};
@@ -1942,7 +2017,11 @@ 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
@@ -1950,9 +2029,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>
@@ -1960,6 +2036,8 @@ const QueryDetails = () => {
             </pre>
             <span
               class={cx(styles().queryDetailsStatus, getQueryStatusColors())}
+              role="status"
+              aria-live="polite"
             >
               {statusLabel()}
             </span>
@@ -1975,7 +2053,11 @@ 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
@@ -1996,6 +2078,7 @@ const QueryDetails = () => {
             disabled={statusLabel() === 'fetching'}
           >
             <span
+              aria-hidden="true"
               class={css`
                 background-color: ${t(colors.blue[600], colors.blue[400])};
               `}
@@ -2020,6 +2103,7 @@ const QueryDetails = () => {
             disabled={queryStatus() === 'pending'}
           >
             <span
+              aria-hidden="true"
               class={css`
                 background-color: ${t(colors.yellow[600], colors.yellow[400])};
               `}
@@ -2044,6 +2128,7 @@ const QueryDetails = () => {
             disabled={queryStatus() === 'pending'}
           >
             <span
+              aria-hidden="true"
               class={css`
                 background-color: ${t(colors.gray[600], colors.gray[400])};
               `}
@@ -2069,6 +2154,7 @@ const QueryDetails = () => {
             disabled={statusLabel() === 'fetching'}
           >
             <span
+              aria-hidden="true"
               class={css`
                 background-color: ${t(colors.pink[500], colors.pink[400])};
               `}
@@ -2118,6 +2204,7 @@ const QueryDetails = () => {
             }}
           >
             <span
+              aria-hidden="true"
               class={css`
                 background-color: ${t(colors.cyan[500], colors.cyan[400])};
               `}
@@ -2147,6 +2234,7 @@ const QueryDetails = () => {
               disabled={queryStatus() === 'pending'}
             >
               <span
+                aria-hidden="true"
                 class={css`
                   background-color: ${t(colors.red[500], colors.red[400])};
                 `}
@@ -2165,6 +2253,7 @@ const QueryDetails = () => {
               )}
             >
               <span
+                aria-hidden="true"
                 class={css`
                   background-color: ${tokens.colors.red[400]};
                 `}
@@ -2172,6 +2261,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 +2281,11 @@ 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 +2329,7 @@ const QueryDetails = () => {
           >
             <textarea
               name="data"
+              aria-label="Edit query data as JSON"
               class={styles().devtoolsEditTextarea}
               onFocus={() => setDataEditError(false)}
               data-error={dataEditError()}
@@ -2271,7 +2366,11 @@ 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 +2455,11 @@ 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
@@ -2364,9 +2467,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>
@@ -2381,6 +2481,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>
@@ -2395,7 +2497,11 @@ 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 +2516,11 @@ 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 +2535,11 @@ 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 +2554,11 @@ 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 +3015,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`

package/src/contexts/PiPContext.tsx

@@ -26,6 +26,8 @@ type PiPContextType = {
   disabled: boolean
 }
 
+class PipOpenError extends Error {}
+
 const PiPContext = createContext<Accessor<PiPContextType> | undefined>(
   undefined,
 )
@@ -57,7 +59,7 @@ export const PiPProvider = (props: PiPProviderProps) => {
     )
 
     if (!pip) {
-      throw new Error(
+      throw new PipOpenError(
         'Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.',
       )
     }
@@ -134,10 +136,20 @@ export const PiPProvider = (props: PiPProviderProps) => {
   createEffect(() => {
     const pip_open = (props.localStore.pip_open ?? 'false') as 'true' | 'false'
     if (pip_open === 'true' && !props.disabled) {
-      requestPipWindow(
-        Number(window.innerWidth),
-        Number(props.localStore.height || PIP_DEFAULT_HEIGHT),
-      )
+      try {
+        requestPipWindow(
+          Number(window.innerWidth),
+          Number(props.localStore.height || PIP_DEFAULT_HEIGHT),
+        )
+      } catch (error) {
+        if (error instanceof PipOpenError) {
+          console.error(error.message)
+          props.setLocalStore('pip_open', 'false')
+          props.setLocalStore('open', 'false')
+          return
+        }
+        throw error
+      }
     }
   })