Merge branch 'main' of github.com:PublicisSapient/enable-a11y into al…

…t-carousel

content/body/dialog.php

@@ -1,11 +1,4 @@
-<!-- <aside class="notes">
-        <h2>Notes:</h2>
 
-        <ul>
-          <li>
-
-        </ul>
-      </aside> -->
 
 <p>
   Modals are pieces of stand-alone content that pop up inside of the main web page document. If that content is not
@@ -34,7 +27,7 @@
               >Creating Accessible HTML5 Modal Dialogs For Desktop and Mobile</a>
 </p>
 
-<div id="example1">
+<div id="example1" class="enable-example enable-example--no-border">
 
   <dialog id="favDialog" aria-labelledby="favDialog__label" aria-describedby="favDialog__description">
     <div role="document">

content/body/dropdown.php

@@ -238,6 +238,11 @@
     {
       "label": "Set the aria roles",
       "highlight": "role=\"group\""
+    },
+    {
+      "label": "Place an aria-label on the dropdown content",
+      "highlight": "aria-label",
+      "notes": "You can also use an aria-labelledby if that is appropriate. The label will be announced by most screen readers when the user focuses inside any of the interactive elements inside the dropdown content."
     }
   ]
 }

content/body/screen-reader-only-text.php

@@ -35,6 +35,10 @@
     <li>Text read in your screen reader's reading mode (i.e. using it to read the page, not for reading out the interactive elements that have focus), screen reader only text is guarenteed to work.  ARIA labels might not be read in your screen readers reading mode.</li>
 </ul>
 
+<p>
+  <strong>The question you really should ask yourself is: "Would the text I am hiding benefit <em>all users</em>?"</strong> If the answer is yes, don't hide the text (you'd be surprised what useful text is visually hidden by developers).  If it doesn't need to be hidden ... consider not hiding it!
+</p>
+
 <h2>Show Me The CSS That I Can Use To Make Screen Reader Only Text</h2>
 
 <p>There have been many variations of the CSS that makes up our
@@ -75,6 +79,11 @@ class="enable-example"
   <li><strong>When an accessible label is missing from a control.</strong>  For example, if you have a button that just a background image or an icon font (you could use screen reader only text for this too, but all modern screen readers can understand ARIA labels on interactive elements)</li>
 </ol>
 
+<p>
+  <strong>Be very careful putting ARIA-labels on a <code>div</code> or <code>span</code> tag.</strong>  Sometimes, screen readers like Voiceover will think that those tags with an <code>aria-label</code> imply that the items inside are a group of interactive elements.  Your mileage may vary.
+</p>
+
+
 
 <h2>Further Reading</h2>
 

css/date.css

@@ -273,6 +273,9 @@ select {
   border-left: solid 5px black;
   font-family: "Helvetica", "Arial", sans-serif;
 }
+.enable-example--no-border {
+  border: none;
+}
 .clearfix:after {
   content: "";
   display: table;

css/shared/all.css

@@ -273,6 +273,9 @@ select {
   border-left: solid 5px black;
   font-family: "Helvetica", "Arial", sans-serif;
 }
+.enable-example--no-border {
+  border: none;
+}
 .clearfix:after {
   content: "";
   display: table;

css/shared/defaults.css

@@ -135,6 +135,9 @@ select {
   border-left: solid 5px black;
   font-family: "Helvetica", "Arial", sans-serif;
 }
+.enable-example--no-border {
+  border: none;
+}
 .clearfix:after {
   content: "";
   display: table;

css/shared/landmarks.css

@@ -273,6 +273,9 @@ select {
   border-left: solid 5px black;
   font-family: "Helvetica", "Arial", sans-serif;
 }
+.enable-example--no-border {
+  border: none;
+}
 .clearfix:after {
   content: "";
   display: table;

css/treeLinks.css

@@ -273,6 +273,9 @@ select {
   border-left: solid 5px black;
   font-family: "Helvetica", "Arial", sans-serif;
 }
+.enable-example--no-border {
+  border: none;
+}
 .clearfix:after {
   content: "";
   display: table;

js/global.js

@@ -28,32 +28,35 @@ function initEnable() {
   // So screen reader users, like VoiceOver users, can navigate via heading and have focus
   // applied to the heading.
   let headingIndex = 0;
-  document.querySelectorAll('h1, h2, h3, h4, h5, h6, [role="heading"]').forEach((el) => {
-
-    // Only do this if the heading doesn't have an ID, and if it is not part of an example.
-    if (el.closest('.enable-example') === null) {
-      if (!el.id) {
-        const innerTextId = el.innerText.toLowerCase().replace(/[^a-zA-Z0-9]+/g, '-') + "--heading";
-
-        //console.log(innerTextId, document.querySelectorAll(`#${innerTextId}`).length);
-        if (document.querySelectorAll(`#${innerTextId}`).length >= 1) {
-          headingIndex++;
-          el.id = `${innerTextId}-${headingIndex}`;
-        } else {
-          el.id = `${innerTextId}`;
+
+  if (location.href.indexOf('index.php') === -1) {
+    document.querySelectorAll('h1, h2, h3, h4, h5, h6, [role="heading"]').forEach((el) => {
+
+      // Only do this if the heading doesn't have an ID, and if it is not part of an example.
+      if (el.closest('.enable-example') === null) {
+        if (!el.id) {
+          const innerTextId = el.innerText.toLowerCase().replace(/[^a-zA-Z0-9]+/g, '-') + "--heading";
+
+          //console.log(innerTextId, document.querySelectorAll(`#${innerTextId}`).length);
+          if (document.querySelectorAll(`#${innerTextId}`).length >= 1) {
+            headingIndex++;
+            el.id = `${innerTextId}-${headingIndex}`;
+          } else {
+            el.id = `${innerTextId}`;
+          }
         }
-      }
 
-      if (el.getAttribute('tabIndex') === null) {
-        el.setAttribute('tabIndex', '-1');
-      }
+        if (el.getAttribute('tabIndex') === null) {
+          el.setAttribute('tabIndex', '-1');
+        }
 
-      // now, let's put a link tag inside the heading so we can deeplink to it easily
-      if (el.nodeName !== 'H1' && el.getAttribute('role') !== 'heading') {
-        el.innerHTML = `<a class="heading__deeplink" href="#${el.id}" title="Permalink to ${el.innerText}" aria-label="Permalink to ${el.innerText}">${el.innerHTML}</a>`
+        // now, let's put a link tag inside the heading so we can deeplink to it easily
+        if (el.nodeName !== 'H1' && el.getAttribute('role') !== 'heading') {
+          el.innerHTML = `<a class="heading__deeplink" href="#${el.id}" title="Permalink to ${el.innerText}" aria-label="Permalink to ${el.innerText}">${el.innerHTML}</a>`
+        }
       }
-    }
-  })
+    })
+  }
 
 }
 

js/test/visibleFocusStates.test.js

@@ -96,14 +96,12 @@ describe('Test Focus States on all pages on Enable', () => {
 
   for (let i=0; i<fileList.length; i++) {
     const file = fileList[i];
-    if ( file !== 'askip-link.php') {
-      it(`Desktop Breakpoint: Test focus states on ${fileList[i]}`, async () => {
-        await testPage(fileList[i], desktopPage);
-      });
-      it(`Mobile Breakpoint: Test focus states on ${fileList[i]}`, async () => {
-        await testPage(fileList[i], mobilePage);
-      });
-    }
+    it(`Desktop Breakpoint: Test focus states on ${fileList[i]}`, async () => {
+      await testPage(fileList[i], desktopPage);
+    });
+    it(`Mobile Breakpoint: Test focus states on ${fileList[i]}`, async () => {
+      await testPage(fileList[i], mobilePage);
+    });
   }
 
 });

less/shared/defaults.less

@@ -169,6 +169,10 @@ select {
   margin: 3em 0;
   border-left: solid 5px black;
   font-family: "Helvetica", "Arial", sans-serif;
+
+  &--no-border {
+    border: none;
+  }
 }
 
 .clearfix:after {

package.json

@@ -36,7 +36,7 @@
     "jest": "jest",
     "test": "bin/checkHTML && jest",
     "lint": "bin/checkHTML",
-    "server": "node bin/promote-node-modules-to-server.js && bin/convert-modules-to-libs.sh && concurrently --kill-others \"less-watch-compiler\" \"node bin/server.js\""
+    "server": "node bin/promote-node-modules-to-server.js && bash bin/convert-modules-to-libs.sh && concurrently --kill-others \"less-watch-compiler\" \"node bin/server.js\""
   },
   "jest": {
     "verbose": true,