A11y tests - Handle dynamic aria labels generated by chakra UI (#2864)

* Handle dynamic aria labels generated by chakra UI

* improve sanitization

---------

Co-authored-by: Alex Vuong <alex.vuong@salesforce.com>

Author: shethj

e2e/scripts/utils.js

@@ -42,10 +42,11 @@ const getCreditCardExpiry = (yearsFromNow = 5) => {
  */
 function simplifyViolations(violations) {
     return violations.map((violation) => ({
-        id: violation.id, // Rule ID
-        impact: violation.impact, // Impact (critical, serious, moderate, minor)
-        description: violation.description, // Description of the rule
-        help: violation.help, // Short description
+        id: violation.id,
+        // Severity of violation (critical, serious, moderate, minor)
+        impact: violation.impact,
+        description: violation.description,
+        help: violation.help,
         helpUrl: violation.helpUrl,
         nodes: violation.nodes.map((node) => ({
             // Simplify the HTML to make it more stable for snapshots
@@ -54,7 +55,13 @@ function simplifyViolations(violations) {
             failureSummary: node.failureSummary,
             // Simplify target selectors for stability
             // #app-header[data-v-12345] > .navigation[data-testid="main-nav"] => #app-header > .navigation
-            target: node.target.map((t) => t.split(/\[.*?\]/).join(''))
+            // Also handle Chakra UI dynamic selectors like #popover-trigger-:r5l4v:
+            target: node.target.map((t) =>
+                t
+                    .split(/\[.*?\]/).join('') // Remove data attributes
+                    .replace(/#([^-\s]+(?:-[^:]*)?):([^"\s]*)/g, '#$1-...') // Remove Chakra UI dynamic IDs
+                    .replace(/\.css-[a-zA-Z0-9]+/g, '.css-...') // Simplify Chakra UI CSS classes
+            )
         }))
     }))
 }
@@ -77,6 +84,10 @@ function sanitizeHtml(html) {
             .replace(/style="[^"]*"/g, '')
             // Remove content of script tags
             .replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, '<script>...</script>')
+            // Dynamic values - keep stable part:
+            // Before: aria-controls="popover-content-:rn:"
+            // After:  aria-controls="popover-content-..."
+            .replace(/(aria-(?:controls|describedby|labelledby|owns))="([^:]*?)(?::[^"]*)?"/g, '$1="$2..."')
             // Trim whitespace
             .trim()
     )

e2e/tests/a11y/desktop/__snapshots__/guest/cart-a11y-violations.json

@@ -7,10 +7,10 @@
     "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=playwright",
     "nodes": [
       {
-        "html": "<form id=\"...\" aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"popover-content-:rh:\">",
+        "html": "<form id=\"...\" aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"popover-content-...\">",
         "failureSummary": "Fix all of the following:\n  ARIA attribute is not allowed: aria-expanded=\"false\"",
         "target": [
-          "#popover-trigger-\\:rh\\:"
+          "#popover-trigger-\\-..."
         ]
       }
     ]

e2e/tests/a11y/desktop/__snapshots__/guest/checkout-a11y-violations-step-0.json

@@ -26,7 +26,7 @@
         "html": "<a class=\"...\" aria-label=\"Back to cart, number of items: 2\" href=\"/cart\">",
         "failureSummary": "Fix any of the following:\n  Some page content is not contained by landmarks",
         "target": [
-          ".css-1k2aozt"
+          ".css-..."
         ]
       }
     ]

e2e/tests/a11y/desktop/__snapshots__/guest/checkout-a11y-violations-step-1.json

@@ -26,7 +26,7 @@
         "html": "<a class=\"...\" aria-label=\"Back to cart, number of items: 2\" href=\"/cart\">",
         "failureSummary": "Fix any of the following:\n  Some page content is not contained by landmarks",
         "target": [
-          ".css-1k2aozt"
+          ".css-..."
         ]
       }
     ]

e2e/tests/a11y/desktop/__snapshots__/guest/checkout-a11y-violations-step-2.json

@@ -26,7 +26,7 @@
         "html": "<a class=\"...\" aria-label=\"Back to cart, number of items: 2\" href=\"/cart\">",
         "failureSummary": "Fix any of the following:\n  Some page content is not contained by landmarks",
         "target": [
-          ".css-1k2aozt"
+          ".css-..."
         ]
       }
     ]

e2e/tests/a11y/desktop/__snapshots__/guest/checkout-a11y-violations-step-3.json

@@ -26,7 +26,7 @@
         "html": "<a class=\"...\" aria-label=\"Back to cart, number of items: 2\" href=\"/cart\">",
         "failureSummary": "Fix any of the following:\n  Some page content is not contained by landmarks",
         "target": [
-          ".css-1k2aozt"
+          ".css-..."
         ]
       }
     ]

e2e/tests/a11y/desktop/__snapshots__/guest/checkout-a11y-violations-step-4-order-confirmation.json

@@ -26,7 +26,7 @@
         "html": "<a class=\"...\" aria-label=\"Back to cart, number of items: 2\" href=\"/cart\">",
         "failureSummary": "Fix any of the following:\n  Some page content is not contained by landmarks",
         "target": [
-          ".css-1k2aozt"
+          ".css-..."
         ]
       }
     ]

e2e/tests/a11y/desktop/__snapshots__/guest/homepage-a11y-violations.json

@@ -7,10 +7,10 @@
     "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=playwright",
     "nodes": [
       {
-        "html": "<form id=\"...\" aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"popover-content-:rh:\">",
+        "html": "<form id=\"...\" aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"popover-content-...\">",
         "failureSummary": "Fix all of the following:\n  ARIA attribute is not allowed: aria-expanded=\"false\"",
         "target": [
-          "#popover-trigger-\\:rh\\:"
+          "#popover-trigger-\\-..."
         ]
       }
     ]

e2e/tests/a11y/desktop/__snapshots__/guest/pdp-a11y-violations.json

@@ -7,10 +7,10 @@
     "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=playwright",
     "nodes": [
       {
-        "html": "<form id=\"...\" aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"popover-content-:rh:\">",
+        "html": "<form id=\"...\" aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"popover-content-...\">",
         "failureSummary": "Fix all of the following:\n  ARIA attribute is not allowed: aria-expanded=\"false\"",
         "target": [
-          "#popover-trigger-\\:rh\\:"
+          "#popover-trigger-\\-..."
         ]
       }
     ]

e2e/tests/a11y/desktop/__snapshots__/guest/plp-a11y-violations.json

@@ -7,10 +7,10 @@
     "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=playwright",
     "nodes": [
       {
-        "html": "<form id=\"...\" aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"popover-content-:rh:\">",
+        "html": "<form id=\"...\" aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-controls=\"popover-content-...\">",
         "failureSummary": "Fix all of the following:\n  ARIA attribute is not allowed: aria-expanded=\"false\"",
         "target": [
-          "#popover-trigger-\\:rh\\:"
+          "#popover-trigger-\\-..."
         ]
       }
     ]