Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use aria-labelledby for sidebar navigation landmarks

This commit is contained in:
Helen Chong 2024-07-14 11:19:35 +08:00
parent 251a7710af
commit 5ee21f512c
3 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
eleventy.config.md.js
View File

@ -15,7 +15,7 @@ module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(pluginTOC, { eleventyConfig.addPlugin(pluginTOC, {
tags: ['h2', 'h3', 'h4', 'h5', 'h6'], tags: ['h2', 'h3', 'h4', 'h5', 'h6'],
wrapper: function (toc) { 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'] }); eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });

2
src/_includes/global/toc.njk
View File

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

4
src/_includes/main/content-nav.njk
View File

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