fix(devtools): improve devtools a11y (#2947)

* 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.

* 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

* 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.

Author: Andrewnt219

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}
@@ -265,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)
@@ -302,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)
@@ -449,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: `
@@ -494,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',
           }}
         >