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 <[email protected]>
GovTechSG · Oct 19, 2023 · f07d712 · f07d712
1 parent b8c5368
commit f07d712
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>