@tanstack/react-query-devtools 4.0.11-beta.5 → 4.2.3

package/src/devtools.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useSyncExternalStore } from './useSyncExternalStore'
+import { useSyncExternalStore } from 'use-sync-external-store/shim'
 import {
   useQueryClient,
   onlineManager,
@@ -12,6 +12,7 @@ import {
 import { rankItem, compareItems } from '@tanstack/match-sorter-utils'
 import useLocalStorage from './useLocalStorage'
 import { sortFns, useIsMounted } from './utils'
+import ScreenReader from './screenreader'
 
 import {
   Panel,
@@ -368,6 +369,7 @@ export function ReactQueryDevtools({
           }}
         >
           <Logo aria-hidden />
+          <ScreenReader text="Open React Query Devtools" />
         </button>
       ) : null}
     </Container>
@@ -538,6 +540,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
               }}
             >
               <Logo aria-hidden />
+              <ScreenReader text="Close React Query Devtools" />
             </button>
             <div
               style={{
@@ -648,6 +651,13 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                           </>
                         )}
                       </svg>
+                      <ScreenReader
+                        text={
+                          isMockOffline
+                            ? 'Restore offline mock'
+                            : 'Mock offline behavior'
+                        }
+                      />
                     </Button>
                   </>
                 ) : null}

package/src/screenreader.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+export default function ScreenReader({ text }: { text: string }) {
+  return (
+    <span
+      style={{
+        position: 'absolute',
+        width: '0.1px',
+        height: '0.1px',
+        overflow: 'hidden',
+      }}
+    >
+      {text}
+    </span>
+  )
+}