[MWPW-161396] Remove obsolete solutions; streamline; add UTs

adobecom · Nov 25, 2024 · e563717 · e563717
1 parent 4326ab1
commit e563717
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 39 deletions.
diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -712,45 +712,15 @@ export function decorateLinks(el) {
     if (a.href.includes(copyEvent)) {
       decorateCopyLink(a, copyEvent);
     }
-
-    // Pattern: "Link Text | Aria Label"
-    // If an icon is defined just before the pipe, there is no space before the pipe
-    const pipeRegex = /\|\s/;
-    if (pipeRegex.test(a.textContent)) {
-      // the anchor may already have elements inside, fetching the matching child nodes
-      const nodes = [...a.childNodes].filter((node) => pipeRegex.test(node.textContent));
-      // get the last matching text node with pipe character(s)
-      const node = nodes[nodes.length - 1];
-      // get its text content
-      const ogContent = node.textContent;
-      // get the last occurrence of the pipe character
-      const split = ogContent.split(pipeRegex);
-      const ariaLabel = split[split.length - 1];
-      // Delete the aria label value from the original text
-      const text = ogContent.replace(new RegExp(`\\s?\\|\\s?${ariaLabel}`), '');
-      node.textContent = text;
-      // Set the aria label
-      a.setAttribute('aria-label', ariaLabel);
-    }
-
-    // Pattern: "Link Text <Aria Label>"
-    if (/<.+>/.test(a.textContent)) {
-      const ogContent = a.textContent;
-      const text = ogContent.replace(/<.+>/, '');
-      const ariaLabel = ogContent.match(/<.+>/)[0].replace(/[<>]/g, '');
-      a.textContent = text;
-      a.setAttribute('aria-label', ariaLabel);
-    }
-
-    // Pattern: "Link Text <code>Aria Label</code>"
-    const codeInAnchor = a.querySelector('code');
-    if (codeInAnchor) {
-      const ogContent = a.textContent;
-      const ariaLabel = codeInAnchor.textContent;
-      codeInAnchor.remove();
-      const text = ogContent.replace(ariaLabel, '');
-      a.textContent = text.trim();
-      a.setAttribute('aria-label', ariaLabel);
+    // 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;

diff --git a/test/utils/mocks/body.html b/test/utils/mocks/body.html
@@ -39,6 +39,28 @@
     <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-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
@@ -192,6 +192,35 @@ 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 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');