Allow setting of aria label text for links (#3255)

* [MWPW-157500] Aria label first demo * [MWPW-157500] Aria label allow icons for pipe oprion * [MWPW-161396] Remove obsolete solutions; streamline; add UTs * [MWPW-161396] Adapt NALA test * [MWPW-161396] Update aria label UT
adobecom · Dec 5, 2024 · 7cc4058 · 7cc4058
1 parent 023541d
commit 7cc4058
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 1 deletion.
diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -713,6 +713,17 @@ export function decorateLinks(el) {
     if (a.href.includes(copyEvent)) {
       decorateCopyLink(a, copyEvent);
     }
+    // Append aria-label
+    const pipeRegex = /\s?\|\s?/;
+    if (pipeRegex.test(a.textContent) && !/\.[a-z]+/i.test(a.textContent)) {
+      const node = [...a.childNodes].reverse()
+        .find((child) => pipeRegex.test(child.textContent));
+      const ariaLabel = node.textContent.split(pipeRegex).pop();
+      node.textContent = node.textContent
+        .replace(new RegExp(`${pipeRegex.source}${ariaLabel}`), '');
+      a.setAttribute('aria-label', ariaLabel.trim());
+    }
+
     return rdx;
   }, []);
   convertStageLinks({ anchors, config, hostname, href });

diff --git a/nala/blocks/video/video.spec.js b/nala/blocks/video/video.spec.js
@@ -56,7 +56,7 @@ module.exports = {
       path: '/drafts/nala/blocks/video/youtube-video',
       data: {
         h1Text: 'YouTube video',
-        playLabel: 'Adobe MAX Keynote 2022 | Adobe Creative Cloud',
+        playLabel: 'Adobe MAX Keynote 2022',
         source: 'https://www.youtube.com/embed/OfQKEzgPaBA?',
         videoId: 'OfQKEzgPaBA',
       },

diff --git a/test/utils/mocks/body.html b/test/utils/mocks/body.html
@@ -39,6 +39,31 @@
     <p>
       <a class="copy-action" href="https://www.adobe.com/#_evt-copy"></a>
     </p>
+    <!-- Aria labels appendment -->
+    <p>
+      <a href="https://www.adobe.com/" class="aria-label-none">Text</a>
+    </p>
+    <p>
+      <a href="https://www.adobe.com/" class="aria-label-simple">Text | Aria label</a>
+    </p>
+    <p>
+      <a href="https://www.adobe.com/" class="aria-label-piped">Text | Other text | Aria label</a>
+    </p>
+    <p>
+      <a href="https://www.adobe.com/" class="aria-label-piped--no-space">Text|Other text|Aria label</a>
+    </p>
+    <p>
+      <a href="https://www.adobe.com/" class="aria-label-icon-none">
+        <span class="icon icon-checkmark"></span>
+        Text
+      </a>
+    </p>
+    <p>
+      <a href="https://www.adobe.com/" class="aria-label-icon-simple">
+        <span class="icon icon-checkmark"></span>
+        Text | Aria label
+      </a>
+    </p>
   </div>
   <div class="quote borders contained hide-block">
     <div>

diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
@@ -212,6 +212,39 @@ describe('Utils', () => {
       });
     });
 
+    describe('Aria label appendment', () => {
+      it('appends aria label if defined', () => {
+        const theText = 'Text';
+        const theAriaLabel = 'Aria label';
+
+        const noAriaLabelElem = document.querySelector('.aria-label-none');
+        expect(noAriaLabelElem.getAttribute('aria-label')).to.be.null;
+        expect(noAriaLabelElem.innerText).to.equal(theText);
+
+        const simpleAriaLabelElem = document.querySelector('.aria-label-simple');
+        expect(simpleAriaLabelElem.getAttribute('aria-label')).to.equal(theAriaLabel);
+        expect(simpleAriaLabelElem.innerText).to.equal(theText);
+
+        const pipedAriaLabelElem = document.querySelector('.aria-label-piped');
+        expect(pipedAriaLabelElem.getAttribute('aria-label')).to.equal(theAriaLabel);
+        expect(pipedAriaLabelElem.innerText).to.equal(`${theText} | Other text`);
+
+        const noSpacePipedAriaLabelElem = document.querySelector('.aria-label-piped--no-space');
+        expect(noSpacePipedAriaLabelElem.getAttribute('aria-label')).to.equal(theAriaLabel);
+        expect(noSpacePipedAriaLabelElem.innerText).to.equal(`${theText}|Other text`);
+
+        const iconNoAriaLabelElem = document.querySelector('.aria-label-icon-none');
+        expect(iconNoAriaLabelElem.getAttribute('aria-label')).to.be.null;
+        expect(iconNoAriaLabelElem.querySelector('.icon')).to.exist;
+        expect(iconNoAriaLabelElem.innerText).to.equal(theText);
+
+        const iconAriaLabelElem = document.querySelector('.aria-label-icon-simple');
+        expect(iconAriaLabelElem.getAttribute('aria-label')).to.equal(theAriaLabel);
+        expect(iconAriaLabelElem.querySelector('.icon')).to.exist;
+        expect(iconAriaLabelElem.innerText).to.equal(theText);
+      });
+    });
+
     describe('Fragments', () => {
       it('fully unwraps a fragment', () => {
         const fragments = document.querySelectorAll('.link-block.fragment');