From ff4dfc17b3db5bcaa40808b1eddc92938b2641a9 Mon Sep 17 00:00:00 2001
From: Benjamin Christiani <benjamin.christiani@emea.merkleinc.com>
Date: Thu, 28 Mar 2024 13:41:15 +0100
Subject: [PATCH] feat: set link title for linked icons to improve
 accessibility

---
 blocks/footer/footer.js |  5 ++++-
 blocks/header/header.js |  5 ++++-
 scripts/scripts.js      | 12 ++++++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
index 85baaf3..644029f 100644
--- 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
index 80e5849..0486280 100644
--- 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
index 23009d7..450d584 100644
--- 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