[MWPW-164097] Allow special chars in aria-label definition (#3362)

adobecom · Jan 2, 2025 · 29d77a6 · 29d77a6
1 parent c36fb32
commit 29d77a6
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -726,13 +726,11 @@ export function decorateLinks(el) {
       decorateCopyLink(a, copyEvent);
     }
     // Append aria-label
-    const pipeRegex = /\s?\|\s?/;
+    const pipeRegex = /\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}`), '');
+      const node = [...a.childNodes].reverse()[0];
+      const ariaLabel = node.textContent.match(pipeRegex)[1];
+      node.textContent = node.textContent.replace(pipeRegex, '');
       a.setAttribute('aria-label', ariaLabel.trim());
     }
 

diff --git a/test/utils/mocks/body.html b/test/utils/mocks/body.html
@@ -52,6 +52,9 @@
     <p>
       <a href="https://www.adobe.com/" class="aria-label-piped--no-space">Text|Other text|Aria label</a>
     </p>
+    <p></p>
+      <a href="https://www.adobe.com/" class="aria-label--special-char">Text | Aria label ~!@#$%^&*()-_=+[{/;:'",.?}] special characters</a>
+    </p>
     <p>
       <a href="https://www.adobe.com/" class="aria-label-icon-none">
         <span class="icon icon-checkmark"></span>

diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
@@ -229,6 +229,10 @@ describe('Utils', () => {
         expect(pipedAriaLabelElem.getAttribute('aria-label')).to.equal(theAriaLabel);
         expect(pipedAriaLabelElem.innerText).to.equal(`${theText} | Other text`);
 
+        const specialCharAriaLabelElem = document.querySelector('.aria-label--special-char');
+        expect(specialCharAriaLabelElem.getAttribute('aria-label')).to.equal(`${theAriaLabel} ~!@#$%^&*()-_=+[{/;:'",.?}] special characters`);
+        expect(specialCharAriaLabelElem.innerText).to.equal(theText);
+
         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`);