From c97f1841ba0e350b46d31ce8b2a601c2bfc0c51c Mon Sep 17 00:00:00 2001
From: Andrew Nguyen <52666982+Andrewnt219@users.noreply.github.com>
Date: Sun, 14 Nov 2021 23:44:59 -0500
Subject: [PATCH 1/3] fix(devtools): improve devtools container a11y

default element changes to aside from footer because aside
represents a portion of a document whose content is only indirectly
related to the document's main content.
aria-label is also added to replace the text "generic" in a11y tree.
---
 src/devtools/devtools.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/devtools/devtools.tsx b/src/devtools/devtools.tsx
index af098e5978..22544eaf1c 100644
--- a/src/devtools/devtools.tsx
+++ b/src/devtools/devtools.tsx
@@ -55,7 +55,7 @@ interface DevtoolsOptions {
   /**
    * Use this to render the devtools inside a different type of container element for a11y purposes.
    * Any string which corresponds to a valid intrinsic JSX element is allowed.
-   * Defaults to 'footer'.
+   * Defaults to 'aside'.
    */
   containerElement?: string | any
 }
@@ -91,7 +91,7 @@ export function ReactQueryDevtools({
   closeButtonProps = {},
   toggleButtonProps = {},
   position = 'bottom-left',
-  containerElement: Container = 'footer',
+  containerElement: Container = 'aside',
 }: DevtoolsOptions): React.ReactElement | null {
   const rootRef = React.useRef<HTMLDivElement>(null)
   const panelRef = React.useRef<HTMLDivElement>(null)
@@ -221,7 +221,11 @@ export function ReactQueryDevtools({
   if (!isMounted()) return null
 
   return (
-    <Container ref={rootRef} className="ReactQueryDevtools">
+    <Container
+      ref={rootRef}
+      className="ReactQueryDevtools"
+      aria-label="React Query Devtools"
+    >
       <ThemeProvider theme={theme}>
         <ReactQueryDevtoolsPanel
           ref={panelRef as any}

From 43093bfef1dd5f0ac39858d9edc06e3a8def724a Mon Sep 17 00:00:00 2001
From: Andrew Nguyen <52666982+Andrewnt219@users.noreply.github.com>
Date: Mon, 15 Nov 2021 00:27:10 -0500
Subject: [PATCH 2/3] fix(devtools): add aria to devtools toggle button

aria-expanded indicates open/closed of the menu
aria-haspopup indicates this is a menu button
aria-controls to link to the menu, also added aria-label on the menu to
label it.

Read more: https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html
---
 src/devtools/devtools.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/devtools/devtools.tsx b/src/devtools/devtools.tsx
index 22544eaf1c..75961471c3 100644
--- a/src/devtools/devtools.tsx
+++ b/src/devtools/devtools.tsx
@@ -269,6 +269,9 @@ export function ReactQueryDevtools({
           <Button
             type="button"
             aria-label="Close React Query Devtools"
+            aria-controls="ReactQueryDevtoolsPanel"
+            aria-haspopup="true"
+            aria-expanded="true"
             {...(otherCloseButtonProps as unknown)}
             onClick={e => {
               setIsOpen(false)
@@ -306,6 +309,9 @@ export function ReactQueryDevtools({
           type="button"
           {...otherToggleButtonProps}
           aria-label="Open React Query Devtools"
+          aria-controls="ReactQueryDevtoolsPanel"
+          aria-haspopup="true"
+          aria-expanded="false"
           onClick={e => {
             setIsOpen(true)
             onToggleClick && onToggleClick(e)
@@ -453,7 +459,13 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
 
   return (
     <ThemeProvider theme={theme}>
-      <Panel ref={ref} className="ReactQueryDevtoolsPanel" {...panelProps}>
+      <Panel
+        ref={ref}
+        className="ReactQueryDevtoolsPanel"
+        aria-label="React Query Devtools Panel"
+        id="ReactQueryDevtoolsPanel"
+        {...panelProps}
+      >
         <style
           dangerouslySetInnerHTML={{
             __html: `

From 672aee55800258c7334e980d7bee0ba6d0fbfabd Mon Sep 17 00:00:00 2001
From: Andrew Nguyen <52666982+Andrewnt219@users.noreply.github.com>
Date: Mon, 15 Nov 2021 00:36:55 -0500
Subject: [PATCH 3/3] fix(devtools): menuitem are visible in a11y tree in
 closed devtools

This is because the element is just hidden visually, but is still inside
the DOM. The added conditional display only affects the inner container,
which means the animation of opening/closing is reserved.
---
 src/devtools/devtools.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/devtools.tsx b/src/devtools/devtools.tsx
index 75961471c3..00a226de10 100644
--- a/src/devtools/devtools.tsx
+++ b/src/devtools/devtools.tsx
@@ -510,7 +510,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
             maxHeight: '100%',
             overflow: 'auto',
             borderRight: `1px solid ${theme.grayAlt}`,
-            display: 'flex',
+            display: isOpen ? 'flex' : 'none',
             flexDirection: 'column',
           }}
         >