feat: set link title for linked icons to improve accessibility

merkle-open · Mar 28, 2024 · ff4dfc1 · ff4dfc1
1 parent 7eb12a0
commit ff4dfc1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
@@ -1,6 +1,6 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
-import { decorateLangSwitcher } from '../../scripts/scripts.js';
+import { decorateLangSwitcher, decorateLinkedIcons } from '../../scripts/scripts.js';
 
 /**
  * loads and decorates the footer
@@ -21,6 +21,9 @@ export default async function decorate(block) {
   // language switcher
   decorateLangSwitcher(footer.querySelector('ul'));
 
+  // set icon name as link title
+  decorateLinkedIcons(footer.querySelectorAll('a span.icon'));
+
   block.append(footer);
 
   // tag line

diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -1,6 +1,6 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
-import { decorateLangSwitcher } from '../../scripts/scripts.js';
+import { decorateLangSwitcher, decorateLinkedIcons } from '../../scripts/scripts.js';
 
 // media query match that indicates mobile/tablet width
 const isDesktop = window.matchMedia('(min-width: 900px)');
@@ -145,6 +145,9 @@ export default async function decorate(block) {
   // language switcher
   decorateLangSwitcher(nav.querySelector('.nav-tools ul'));
 
+  // set icon name as link title
+  decorateLinkedIcons(nav.querySelectorAll('a span.icon'));
+
   const navWrapper = document.createElement('div');
   navWrapper.className = 'nav-wrapper';
   navWrapper.append(nav);

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -33,6 +33,18 @@ export function decorateLangSwitcher(list) {
   }
 }
 
+export function decorateLinkedIcons(spanList) {
+  spanList.forEach((span) => {
+    const { classList, parentNode } = span;
+    const iconName = Array.from(classList)
+      .find((c) => c.startsWith('icon-'))
+      .substring(5);
+    if (parentNode.tagName === 'A') {
+      parentNode.title = iconName;
+    }
+  });
+}
+
 /**
  * Builds hero block and prepends to main in a new section.
  * @param {Element} main The container element