override icon shortcode to make the SVGs accessible

eleventy.config.js

@@ -19,6 +19,22 @@ module.exports = function(eleventyConfig) {
       { name: "solid", path: `${fontawesomePath}/solid` },
       { name: "brands", path: `${fontawesomePath}/brands` },
     ],
+    icon: {
+      shortcode: "rawIcon",
+    },
+  });
+
+  // override icon shortcode to make the SVGs accessible
+  eleventyConfig.addAsyncShortcode("icon", async function(input, attrs) {
+    if (!attrs || !("title" in attrs)) {
+      return eleventyConfig.nunjucksAsyncShortcodes.rawIcon(input, attrs);
+    }
+
+    const { title, ...newAttrs } = attrs;
+    newAttrs.role = "img";
+    const svgStr = await eleventyConfig.nunjucksAsyncShortcodes.rawIcon(input, newAttrs);
+    const match = svgStr.match(/(<svg.*?>)(.*$)/s);
+    return match[1] + "<title>" + title + "</title>" + match[2];
   });
 
   // process the logo files