[Request] Add rendering option for setting the aria-current attribute to eleventyNavigationToHtml

[psm0dev0tst]

Hello,

I love this plugin and love that eleventyNavigationToHtml takes care of all rendering for me!

Having an additional rendering option to set aria-current="page" for the current page would be a great accessibility addition. When a screen reader encounters the link identified with aria-current, it will announce something like “Home, current page link”.

[peerreynders]

One possible workaround:

// file: .eleventy.js
//
const eleventyNavigationPlugin = require('@11ty/eleventy-navigation');

const dir = {
  input: 'src',
  includes: '_includes',
  output: 'dist',
};

module.exports = function(config) {
  // i.e. from src/images
  config.addPassthroughCopy(`${dir.input}/images`);
  config.addPassthroughCopy(`${dir.input}/styles`);
  config.addPlugin(eleventyNavigationPlugin);
  
  // Add filter for "patching" navigation fragment
  config.addFilter('addNavAria', addNavAria);

  return {
    dir
  };
};

function addNavAria(fragment, page) {
  const href = `href="${ page.url }"`;
  const start = fragment.indexOf(href);
  return start > -1 ? insertNavAria(fragment, start + href.length) : fragment;
}

function insertNavAria(fragment, index) {
  return fragment.slice(0, index) + ` aria-current="page"` + fragment.slice(index);
}

/*
  Meanwhile in a nunjucks template:
  
  {{
    collections.all
    | eleventyNavigation
    | eleventyNavigationToHtml({
        activeAnchorClass: 'nav__current-page',
        activeKey: eleventyNavigation.key
      })
    | addNavAria(page)
    | safe
  }}
  
*/

• All Rendering Options for eleventyNavigationToHtml
• Universal Filters
• page variable

[antgel]

Hi, thanks for this plugin. I see PR #43 is ready to solve this issue, look forward to seeing it merged!