Use aria-labelledby for sidebar navigation landmarks

eleventy.config.md.js

@@ -15,7 +15,7 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(pluginTOC, {
         tags: ['h2', 'h3', 'h4', 'h5', 'h6'],
         wrapper: function (toc) {
-            return `<nav class="toc" aria-label="Table of contents">${toc}</nav>`;
+            return `<nav class="toc" aria-labelledby="toc-heading">${toc}</nav>`;
         },
     });
     eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });

src/_includes/global/toc.njk

@@ -1,7 +1,7 @@
 <aside class="left-sidebar" aria-label="Left sidebar">
     <details-utils force-open="(min-width: 60rem)" force-restore>
         <details class="toc__wrapper sidebar--sticky">
-            <summary class="toc__heading">
+            <summary class="toc__heading" id="toc-heading">
                 Table of Contents
             </summary>
             {{ content | toc | safe }}

src/_includes/main/content-nav.njk

@@ -1,6 +1,6 @@
 <aside class="right-sidebar" aria-label="Right sidebar">
-    <nav class="content__nav sidebar--sticky" aria-label="Sidebar">
-        <h2 class="content__nav--title">My Contents</h2>
+    <nav class="content__nav sidebar--sticky" aria-labelledby="my-contents">
+        <h2 class="content__nav--title" id="my-contents">My Contents</h2>
         <ul class="content__nav--links">
             {% for archive in collections.archive %}
                 <li><a href="{{ archive.url }}">{{ archive.data.title }}</a></li>