From f07d712e3fdbb1918a2749b895f7e0079a3b9ffb Mon Sep 17 00:00:00 2001
From: jodichoo <77408309+jodichoo@users.noreply.github.com>
Date: Thu, 19 Oct 2023 17:45:13 +0800
Subject: [PATCH] Accessibility fixes for report.html and dismiss tooltip when
 clicked (#200)

* Remove unneeded attributes, fix bug where tooltip cannot be dismissed when clicked

* Fix regex expression for safari browser

---------

Co-authored-by: jodichoo <jodichoo@users.noreply.github.com>
---
 static/ejs/partials/scripts/ruleOffcanvas.ejs | 6 +-----
 static/ejs/partials/scripts/utils.ejs         | 9 +++------
 static/ejs/report.ejs                         | 4 +++-
 static/ejs/summary.ejs                        | 4 +++-
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/static/ejs/partials/scripts/ruleOffcanvas.ejs b/static/ejs/partials/scripts/ruleOffcanvas.ejs
index 3779acc2..831e976a 100644
--- a/static/ejs/partials/scripts/ruleOffcanvas.ejs
+++ b/static/ejs/partials/scripts/ruleOffcanvas.ejs
@@ -71,11 +71,7 @@ category summary is clicked %>
     document.getElementById('expandedRuleConformance').replaceChildren(
       createElementFromString(`
       <div class="d-flex align-items-center">
-        <div role="group" ${
-          selectedRule.conformance[0] === 'best-practice'
-            ? 'aria-hidden="true"'
-            : `aria-label="${conformanceLevels[selectedRule.conformance[0]]}"`
-        } class="conformance-bubble ${selectedRule.conformance[0]}"></div>
+        <div aria-hidden="true" class="conformance-bubble ${selectedRule.conformance[0]}"></div>
         ${
           selectedRule.conformance[0] === 'best-practice'
             ? `<span>Best practice</span>`
diff --git a/static/ejs/partials/scripts/utils.ejs b/static/ejs/partials/scripts/utils.ejs
index eb51120f..f46402d2 100644
--- a/static/ejs/partials/scripts/utils.ejs
+++ b/static/ejs/partials/scripts/utils.ejs
@@ -9,9 +9,7 @@
   const purpleAiHtmlETL = <%- purpleAi.htmlETL %>;
   const purpleAiRules = <%- JSON.stringify(purpleAi.rules) %>;
 
-  const htmlTagAndAttributeRegex = new RegExp(
-    /((?<=[<])\s*([a-zA-Z][^\s>/]*)\b)|([\w-]+)\s*(?==\s*["']([^"']*)["'])/g,
-  );
+  const htmlTagAndAttributeRegex = new RegExp(/([a-zA-Z][^\s/>]*\b)|([\w-]+)\s*=\s*["']([^"']*)["']/g);
 
   const rulesUsingRoles = [
     'aria-allowed-attr',
@@ -23,9 +21,8 @@
   ];
 
   const createLabelForRuleWithRole = html => {
-    const htmlTagAndRoleAttributeRegex = new RegExp(
-      /(?<=<)\s*([a-zA-Z][^\s>/]*\b)|role="([^"]*)"/g,
-    );
+    const htmlTagAndRoleAttributeRegex = new RegExp(/<\s*([a-zA-Z][^\s/>]*\b)|role="([^"]*)"/g);
+
     const htmlLabel = html.match(htmlTagAndRoleAttributeRegex).toString().replaceAll(',', '_');
 
     return htmlLabel || '';
diff --git a/static/ejs/report.ejs b/static/ejs/report.ejs
index ffa6a69e..6bf167d3 100644
--- a/static/ejs/report.ejs
+++ b/static/ejs/report.ejs
@@ -38,7 +38,9 @@
         document.querySelectorAll('[data-bs-toggle="tooltip"]'),
       );
       tooltipTriggerList.map((tooltipTriggerEl) => {
-        return new bootstrap.Tooltip(tooltipTriggerEl);
+        const tooltip = new bootstrap.Tooltip(tooltipTriggerEl);
+        tooltipTriggerEl.addEventListener('mouseleave', () => tooltip.hide());
+        return tooltip;
       });
     };
     document.addEventListener('DOMContentLoaded', initTooltips);
diff --git a/static/ejs/summary.ejs b/static/ejs/summary.ejs
index 879fa58d..b63906bd 100644
--- a/static/ejs/summary.ejs
+++ b/static/ejs/summary.ejs
@@ -40,7 +40,9 @@
           document.querySelectorAll('[data-bs-toggle="tooltip"]'),
         );
         var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-          return new bootstrap.Tooltip(tooltipTriggerEl);
+          const tooltip = new bootstrap.Tooltip(tooltipTriggerEl);
+          tooltipTriggerEl.addEventListener('mouseleave', () => tooltip.hide());
+          return tooltip;
         });
       });
     </script>