fix(a11y): aria-controls and role fixes

quartz/components/Explorer.tsx

@@ -55,11 +55,14 @@ export type FolderState = {
   collapsed: boolean
 }
 
+let numExplorers = 0
 export default ((userOpts?: Partial<Options>) => {
   const opts: Options = { ...defaultOptions, ...userOpts }
   const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory()
 
   const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => {
+    const id = `explorer-${numExplorers++}`
+
     return (
       <div
         class={classNames(displayClass, "explorer")}
@@ -77,7 +80,7 @@ export default ((userOpts?: Partial<Options>) => {
           type="button"
           class="explorer-toggle mobile-explorer hide-until-loaded"
           data-mobile={true}
-          aria-controls="explorer-content"
+          aria-controls={id}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -116,7 +119,7 @@ export default ((userOpts?: Partial<Options>) => {
             <polyline points="6 9 12 15 18 9"></polyline>
           </svg>
         </button>
-        <div class="explorer-content" aria-expanded={false}>
+        <div id={id} class="explorer-content" aria-expanded={false} role="group">
           <OverflowList class="explorer-ul" />
         </div>
         <template id="template-file">