change anchor rendering for better screen-reader compat

.eleventy.js

@@ -5,7 +5,7 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginNavigation = require("@11ty/eleventy-navigation");
 const markdownIt = require("markdown-it");
-const markdownItAnchor = require("markdown-it-anchor");
+const markdownItAccessibleAnchor = require("./_includes/markdown-it-accessible-anchor.js");
 
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(pluginRss);
@@ -60,11 +60,8 @@ module.exports = function(eleventyConfig) {
     html: true,
     breaks: true,
     linkify: true
-  }).use(markdownItAnchor, {
-    permalink: true,
-    permalinkClass: "direct-link",
-    permalinkSymbol: "#"
-  }).use(require('markdown-it-footnote'));
+  }).use(markdownItAccessibleAnchor, {
+  }) .use(require('markdown-it-footnote'));
   eleventyConfig.setLibrary("md", markdownLibrary);
 
   // Browsersync Overrides

README.md

@@ -10,12 +10,11 @@ Render with `gulp` or check the list of exports in `gulpfile.js` for individual
 
 ## TODO:
 - Specific/soon:
-  - [ ] update git hook for more granular gulp execution (most notably, don't run `deps` if no changes to `package.json`
-  - [ ] better text contrast (accessibility concern)
+  - [X] update git hook for more granular gulp execution (most notably, don't run `deps` if no changes to `package.json`
   - [ ] post more haha
     - [ ] december birding trip
 - General/someday:
   - [ ] consider automated deploy via gitea?
   - [ ] better thumbnail generation via ML thumbnail package?
   - [ ] improve webmention support?
-  - [ ] [improve anchor-link accessibility](https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/)
+  - [X] [improve anchor-link accessibility](https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/)

_includes/markdown-it-accessible-anchor.js

@@ -0,0 +1,56 @@
+/*
+ * original from Amber Wilson - no license information available.
+ * original file: https://github.com/ambrwlsn/website/blob/da2056c316fa45fa58b443b07be1ac4c5080912e/helpers/markdown-anchor-wat.js#L1
+ * more info: https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
+ * file has been modified!!
+ */
+
+const slugify = (s) =>
+  encodeURIComponent(
+    String(s)
+      .trim()
+      .toLowerCase()
+      .replace(/\s+/g, '-')
+  );
+
+const defaultOptions = {
+  divClass: 'heading-wrapper',
+  anchorClass: 'anchor-link',
+  linkIcon: '#',
+};
+
+const targets = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+const anchor = (md, options) => {
+  options = Object.assign({}, defaultOptions, options);
+
+  md.renderer.rules.heading_open = function(tokens, index) {
+    const contentToken = tokens[index + 1];
+    const slug = slugify(contentToken.content);
+
+    if (targets.indexOf(tokens[index].tag) > -1) {
+      return `
+      <div class="${options.divClass}">
+        <${tokens[index].tag} id="${slug}">`;
+    }
+    return `<${tokens[index].tag}>`;
+  };
+
+  md.renderer.rules.heading_close = function(tokens, index) {
+    const contentToken = tokens[index - 1];
+    const slug = slugify(contentToken.content);
+
+    if (targets.indexOf(tokens[index].tag) > -1 ) {
+      return `
+      </${tokens[index].tag}>
+        <a class="${options.anchorClass}" href="#${slug}">
+          <span aria-hidden="true">${options.linkIcon}</span>
+          <span class="hidden">Section titled ${contentToken.content}</span>
+        </a>
+      </div>`;
+    }
+    return `</${tokens[index].tag}>`;
+  };
+};
+
+module.exports = anchor;