Adding updated copy to tooltip page. Also refactored the label for th…

.github/workflows/push-actions.yml

@@ -52,7 +52,7 @@ jobs:
               # https://mirror.cs.uchicago.edu/google-chrome/pool/main/g/google-chrome-stable/
               run: |
                   apt search '^google-chrome.*' \
-                      && wget -q -O /tmp/chrome.deb http://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_130.0.6723.58-1_amd64.deb \
+                      && wget -q -O /tmp/chrome.deb https://mirror.cs.uchicago.edu/google-chrome/pool/main/g/google-chrome-stable/google-chrome-stable_132.0.6834.110-1_amd64.deb \
                   && sudo apt install -y /tmp/chrome.deb --allow-downgrades \
                   && rm /tmp/chrome.deb
             - name: Log system details

bin/checkHTML.sh

@@ -86,6 +86,12 @@ If that does not work, you may need to do a global update of @axe-core/cli:
 
 sudo npm update -g @axe-core/cli
 
+********************************************************************************
+* NOTE: If you are seeing this message in GitHub Automated Tests, you need to 
+* update push-actions.yml to ensure the version of Chrome being downloaded there
+* matches the one in your package.json
+******************************************************************************** 
+
 
 ' 1>&2
 	exit 1;

content/body/tooltip.php

@@ -22,8 +22,6 @@
   This solution can be styled exactly as wanted and uses the maximum value of a z-index in the document.
   We show different types of tooltips below, based on how they are triggered.
   It will disappear when keyboard users press the Escape key.
-  <strong>It doesn't work in mobile,</strong> which while consistent with other tooltip solutions,
-  is something that we are still looking to fix.  If anyone has any ideas, please feel free to <a href="https://twitter.com/zoltandulac">reach out to me on Twitter</a>.
 </p>
 
 <h3> Clickable tooltip </h3>
@@ -39,21 +37,21 @@
       <legend>Vehicle Inspection Form</legend>
       <div class="enable-form-example__fieldset-inner-container">
           <div class="field-block">
-            <label for="clickable_example_1" class="form-label">
+            <label id="vin-label" for="vin" class="form-label">
               <span>VIN</span>
             </label>
-            <input id="clickable_example_1" size="25" type="text">
-            <button id="tooltip_button_1" type="button" class="tooltip__text-button" aria-label="Clickable tooltip information" 
+            <input id="vin" size="25" type="text">
+            <button id="tooltip_button_1" type="button" class="tooltip__text-button" aria-describedby="vin-label"
                 data-tooltip="VIN (Vehicle Identification Number) is a 17 character (digits/capital letters) unique identifier for a vehicle.">
-                <span>What's this?</span>
+                <span>More info</span>
               </button>
           </div>
           <div class="field-block">
-            <label for="clickable_example_2" class="form-label">
+            <label id="body-style-label" for="body-style" class="form-label">
               <span>Body style</span>
             </label>
-            <input id="clickable_example_2" size="25" type="text">
-            <button id="tooltip_button_2" type="button" class="tooltip__icon-button" aria-label="Clickable tooltip information" 
+            <input id="body-style" size="25" type="text">
+            <button id="tooltip_button_2" type="button" class="tooltip__icon-button" aria-label="More Information" aria-describedby="body-style-label" 
                 data-tooltip="Categorization of a car based on its shape, style, and space. Examples include sedan, SUV, convertible, etc.">
                 <span class="icon" aria-hidden="true">i</span>
               </button>
@@ -69,24 +67,35 @@
 <script type="application/json" id="example1-props">
 {
   "replaceHtmlRules": {},
-  "steps": [{
-      "label": "Create markup",
-      "highlight": "data-tooltip",
+  "steps": [
+    {
+      "label": "Create markup for the button that opens the tooltip",
+      "highlight": "[\\s]*data-tooltip",
       "notes": "Our script uses the <code>data-tooltip</code> attribute instead of the <code>title</code> attribute, since <strong>title</strong> is rendered by user agents by default and cannot be styled."
     },
+    {
+      "label": "Give button context on what it is giving information on",
+      "highlight": "aria-describedby",
+      "notes": "When screen reader users tab into this control, they will not just hear the label of the button that opens the tooptip (e.g. \"More Info\"), but also the context of what the context of the what information will be given when clicking the button via the <code>aria-describedby</code> (e.g. \"VIN\")"
+    },
+    {
+      "label": "Create HTML for the tooltip",
+      "highlight": "%OUTERHTML%tooltip ||| role=\"tooltip ||| aria-live=\"assertive\"",
+      "notes": "Note the role of tooltip.  It is an aria-live region so that the content is announced by screen readers.  The content is dynamically changed in JS when any of the buttons that open up the tooltip are pressed."
+    },
     {
       "label": "Create JavaScript events for tooltip script",
-      "highlight": "%JS% tooltip.create; tooltip.init",
+      "highlight": "%JS% tooltip.create; tooltip.init ||| (this.create|this.init)[^=]*=",
       "notes": "When the page is loaded, create the tooltip DOM object and initialize the mouse and keyboard events that will display the tooltips. <strong>Note the role of tooltip being added to the tooltip DOM object</strong>."
     },
     {
       "label": "Create the show and hide methods for the tooltip",
-      "highlight": "%JS% tooltip.show; tooltip.hide",
+      "highlight": "%JS% tooltip.show; tooltip.hide ||| (this.hide|this.show)\\s=\\s",
       "notes": "We make sure the element that triggered the tooltip's <code>show</code> method will be connected to it with the aria-describedby attribute, which points to the tooltip.  This ensures screen readers announce the tooltip on focus."
     },
     {
       "label": "Ensure tooltip disappears when Escape key is pressed",
-      "highlight": "%JS% tooltip.onKeyup",
+      "highlight": "%JS% tooltip.onKeyup ||| (this.onKeyup)\\s=\\s",
       "notes": "This is to ensure keyboard users can make the tooltip disappear without tabbing out of the component."
     },
     {
@@ -101,7 +110,7 @@
 <h3> Focusable tooltip </h3>
 <p> This type of tooltip can be triggered when the user either clicks on it or navigates to it by keyboard.</p>
 <p>
-  The form example below demonstrates a tooltip that can be triggered via input field click.
+  The form example below demonstrates a tooltip that can be triggered via input field click. 
 </p>
 <div id="example2" class="enable-example">
   <form class="enable-form-example">
@@ -130,12 +139,12 @@
   "replaceHtmlRules": {},
   "steps": [{
       "label": "Create markup",
-      "highlight": "data-tooltip",
+      "highlight": "[\\s]*data-tooltip",
       "notes": "Our script uses the <code>data-tooltip</code> attribute instead of the <code>title</code> attribute, since <strong>title</strong> is rendered by user agents by default and cannot be styled."
     },
     {
       "label": "Create JavaScript events for tooltip script",
-      "highlight": "%JS% tooltip.create; tooltip.init",
+      "highlight": "%JS% tooltip.create; tooltip.init ||| (this.create|this.init)[^=]*=",
       "notes": "When the page is loaded, create the tooltip DOM object and initialize the mouse and keyboard events that will display the tooltips. <strong>Note the role of tooltip being added to the tooltip DOM object</strong>."
     },
     {

js/modules/es4/tooltip.js

@@ -3,7 +3,7 @@
 /*******************************************************************************
 * tooltip.js - Accessible Tooltip Module
 * 
-* Written by Zoltan Hawryluk <[email protected]>
+* Written by Zoltan Hawryluk <[email protected]> and Jessie Cai.
 * Part of the Enable accessible component library.
 * Version 1.0 released Dec. 27, 2021
 *
@@ -20,8 +20,6 @@ const tooltip = new (function() {
     const tooltipStyle = tooltipEl.style;
     const escapeKey = 'Escape';
     const tabKey = 'Tab';
-    const buttonName = 'BUTTON';
-    const inputName = 'INPUT';
     let tooltipTarget = null;
     let isTooltipVisible = false;
     let tooltipBelongsTo = null;
@@ -67,7 +65,7 @@ const tooltip = new (function() {
         tooltipEl.id = 'tooltip';
         tooltipEl.setAttribute('role', 'tooltip');
         tooltipEl.classList.add('tooltip--hidden');
-        tooltipEl.innerHTML = '<div class="tooltip__content">Loading ...</div>';
+        tooltipEl.innerHTML = '<div class="tooltip__content">Loading…</div>';
         tooltipEl.setAttribute('aria-live', 'assertive');
         body.appendChild(tooltipEl);
     }
@@ -94,7 +92,7 @@ const tooltip = new (function() {
         tooltipTarget = e.target;
 
         //Hide tooltip on initial focus if tabbed in 
-        if (tooltipTarget.tagName === buttonName && tabbedIn) {
+        if (tooltipTarget.tagName === 'BUTTON' && tabbedIn) {
             if (tooltipBelongsTo !== tooltipTarget){
                 return;
             }
@@ -106,8 +104,10 @@ const tooltip = new (function() {
     this.show = (e) => {
         tooltipTarget = e.target;
 
-        if (tooltipTarget.tagName === 'SPAN'){
-            tooltipTarget = e.target.parentNode;
+        const closestTooltipEl = tooltipTarget.closest('[data-tooltip]');
+
+        if (closestTooltipEl !== null) {
+            tooltipTarget = closestTooltipEl;
         }
 
         const text = tooltipTarget.dataset.tooltip;
@@ -116,15 +116,16 @@ const tooltip = new (function() {
         }
 
         //Set aria attribute only for onFocus (input) elements
-        if (tooltipTarget.tagName === inputName){
+        if (tooltipTarget.tagName === 'INPUT'){
             tooltipTarget.setAttribute('aria-describedby', 'tooltip');
         }
 
         const tooltipTargetRect = tooltipTarget.getBoundingClientRect();
-        tooltipEl.innerHTML = text;
         tooltipEl.classList.remove('tooltip--hidden');
+
+        tooltipEl.innerHTML = text;
         tooltipStyle.top = `calc(${tooltipTargetRect.bottom + window.scrollY}px + 1em)`
-        tooltipStyle.left = `${tooltipTargetRect.left + window.pageXOffset}px`;
+        tooltipStyle.left = `${tooltipTargetRect.left + window.scrollX}px`;
         tooltipEl.classList.remove('tooltip--bottom');
         tooltipEl.classList.add('tooltip--top');
 
@@ -140,9 +141,6 @@ const tooltip = new (function() {
             tooltipStyle.top = `calc(${tooltipTargetRect.top + window.scrollY - tooltipHeight}px - 1em)`
         }
 
-        tooltipTarget.addEventListener('mouseleave', this.hide);
-        tooltipEl.addEventListener('mouseleave', this.hide);
-
         tooltipEl.dispatchEvent(
             new CustomEvent('enable-show', { bubbles: true })
         );
@@ -151,7 +149,7 @@ const tooltip = new (function() {
     this.handleClick = (e) => {
         tooltipTarget = e.target;
 
-        if (tooltipTarget.tagName === buttonName && tabbedIn) {
+        if (tooltipTarget.tagName === 'BUTTON' && tabbedIn) {
             if (!isTooltipVisible) {
                 this.show(e);
             } else {
@@ -175,9 +173,7 @@ const tooltip = new (function() {
         }
 
         if (tooltipTarget) {
-            tooltipTarget.removeEventListener('mouseleave', this.hide);
-            tooltipEl.removeEventListener('mouseleave', this.hide);
-            if (tooltipTarget.tagName === inputName){
+            if (tooltipTarget.tagName === 'INPUT'){
                 tooltipTarget.removeAttribute('aria-describedby');
             }
             tooltipTarget = null;