ToC accessibility fixes

Lucheek-IT · Oct 26, 2023 · 9c77206 · 9c77206
1 parent f65e41b
commit 9c77206
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
@@ -37,15 +37,11 @@ const { title } = Astro.props.frontmatter || Astro.props;
                 <!-- grey overlay on the content -->
                 <span class="fixed bg-gray-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
 
-                <nav
+                <div
                     id="toc-sm-nav"
                     class="flex flex-col right-0 w-96 fixed top-0 py-4 bg-white h-full overflow-auto z-40"
                     x-show="open"
                     @click.away="open=false"
-                    x-description="Table of Contents"
-                    role="menu"
-                    aria-orientation="vertical"
-                    aria-labelledby="toc-toggle"
                     x-transition:enter="transform transition-transform duration-300"
                     x-transition:enter-start="translate-x-full"
                     x-transition:enter-end="translate-x-0"
@@ -59,15 +55,20 @@ const { title } = Astro.props.frontmatter || Astro.props;
                             <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
                                 <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                             </svg>
+                            <span class="sr-only">Close</span>
                         </button>
 
                     </div>
-                    <div class="relative flex flex-wrap items-center justify-between">
-                        <ul id="side-menu" class="w-full float-none flex flex-col">
+                    <nav class="relative flex flex-wrap items-center justify-between" aria-label="Table of Contents">
+                        <ul
+                            id="side-menu"
+                            class="w-full float-none flex flex-col"
+                            x-description="Table of Contents"
+                        >
                             <TableContentsList headings={Astro.props.headings} />
                         </ul>
-                    </div>
-                </nav>
+                    </nav>
+                </div>
             </div>
         </div>
     </div>