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

…t-carousel

.htaccess

@@ -6,5 +6,6 @@ RewriteCond %{REQUEST_FILENAME} !-d
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteBase /enable-a11y/
 RewriteRule "^[^.]*\.php$"  "templates/main.php"
+RewriteRule "~(.+)" "enable-node-libs/$1" [L]
 
 # RewriteRule ^(.+)$ /enable-a11y/templates/main.php [QSA,L]

README.md

@@ -48,6 +48,30 @@ https://chromedriver.storage.googleapis.com/index.html
 
 https://stackoverflow.com/questions/71859550/session-not-created-this-version-of-chromedriver-only-supports-chrome-version-9
 
+## Adding An External NPM Module To The Front-End Code
+
+If you are adding examples to this repository and need support of an external NPM module for the front-end (like a JS library), then you should add the library to the `nodeFiles` array in the file `promote-node-modules-to-server.js`.  
+
+For example, when I added the `glider-js` library to Enable so I can use it in the Carousel demos, I added the files I needed for the front-end to `nodeFiles` with these two lines:
+
+<pre>
+const nodeFiles = [
+  'node_modules/indent.js/lib/indent.min.js',
+  <b>'node_modules/glider-js/glider.js',
+  'node_modules/glider-js/glider.css',</b>
+  'node_modules/text-zoom-event/dist/textZoomEvent.module.js',
+  'node_modules/dialog-polyfill/index.js',
+  'node_modules/jquery/dist/jquery.min.js',
+  'node_modules/jquery-validation/dist/jquery.validate.min.js',
+  'node_modules/accessibility-js-routines/dist/accessibility.module.js',
+  'node_modules/inert-polyfill/inert-polyfill.js',
+  'node_modules/wicg-inert/inert.min.js'
+]
+</pre>
+
+When you start the project with `npm run server`, the files in the `nodeFiles` array will be placed in the `enable-node-libs` directory in the project root.  Use this directory to load the files in your scripts, css, or HTML files.
+
+
 ## References
 
 https://www.nvaccess.org/files/nvda/documentation/userGuide.html  

bin/checkHTML

@@ -99,16 +99,20 @@ fi
 A=`lynx -dump $PROJECT_URL`
 if [ "$?" != "0" ]
 then
-	echo "You need to turn on your apache server that has ENABLE on it."
+	echo "You need to do a `npm run server` in anothe shell before you run this target."
 	exit 3
 fi
 
 
 
-URLS=`lynx -dump $PROJECT_URL | awk '/http/{print $2}' | grep -v '#' | grep $MYIP | sort -u`
+#URLS=`lynx -dump $PROJECT_URL | awk '/http/{print $2}' | grep -v '#' | grep $MYIP | sort -u`
+URLS=`bin/getPages.js $MYIP`;
 DOWNLOADED_URLS=""
 TEMP_FILES=""
 
+echo "Generating sitemap..."
+bin/generateSiteMap.sh
+
 
 #.. This is the list of files that are to be tested with aXe after a delay of 2000 ms.
 AXE_DELAYED_FILES="math.php pause-anim-control.php video-player.php"

bin/convert-modules-to-libs.sh

@@ -2,14 +2,21 @@
 
 echo "Running convert-modules-to-libs.sh";
 
+if [ "$*" = "" ]
+then
+  FILES="*.js"
+else
+  FILES="$*"
+fi
+
 cd js/modules/
 
 if [ ! -d "es4" ]
 then
   mkdir es4
 fi
 
-for i in *.js
+for i in $FILES
 do
   echo "Converting $i"
   grep -v ^import $i | grep -v ^export > es4/$i

bin/generateSiteMap.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+bin/getPages.js | awk -F"/" '{printf("https://www.useragentman.com/enable/%s\n", $4)}' > sitemap.txt

bin/getPages.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+
+const pageData = JSON.parse(fs.readFileSync('templates/data/meta-info.json', 'utf8'));
+const { argv } = process;
+if (argv.length < 2) {
+    console.error(`Usage: ${argv[1]} <server-name>`)
+}
+const myip = process.argv[2];
+
+
+for (let i in pageData) {
+    if (!pageData[i].wip) {
+        console.log(`http://${myip}:8888/${i}`);
+    }
+}

bin/promote-node-modules-to-server.js

@@ -16,7 +16,8 @@ const nodeFiles = [
   'node_modules/jquery/dist/jquery.min.js',
   'node_modules/jquery-validation/dist/jquery.validate.min.js',
   'node_modules/accessibility-js-routines/dist/accessibility.module.js',
-  'node_modules/inert-polyfill/inert-polyfill.js'
+  'node_modules/inert-polyfill/inert-polyfill.js',
+  'node_modules/wicg-inert/dist/inert.min.js'
 ]
 
 

bin/server.js

@@ -1,5 +1,6 @@
 const express = require('express');
-const path = require('path')
+const path = require('path');
+const rewrite = require('express-urlrewrite');
 const app = express();
 const port = 8888;
 const { exec } = require("child_process");
@@ -8,10 +9,10 @@ let phpCmd = 'php';
 
 // must specify options hash even if no options provided!
 var phpExpress = require('./php-express/index.js')({
-    // assumes php is in your PATH
-    binPath: phpCmd
-  });
-  
+  // assumes php is in your PATH
+  binPath: phpCmd
+});
+
 
 // set view engine to php-express
 app.set('views', '.');
@@ -27,7 +28,6 @@ app.all(/\/services\/.+\.php$/, phpExpress.router);
 app.get('/*.php', render);
 
 
-
 /* GET home page. */
 app.get('/', function(req, res) {
   res.redirect('./index.php');
@@ -51,11 +51,14 @@ function render(req, res) {
   });
 }
 
+// redirect ~ urls to enable-node-libs
+app.use(rewrite('/~*', '/enable-node-libs/$1'));
+
 // serve static files.
 app.use(express.static('.'))
 
 
-const server = app.listen(port  , function () {
+const server = app.listen(port, function() {
   const port = server.address().port
   console.log('PHP Express server listening at http://%s:%s', 'localhost', port);
 })

content/body/bookmarklets.php

@@ -0,0 +1,119 @@
+<p>
+  Not all automated tools like WAVE check for things that are easily found accessibility defects on a web page (e.g.
+  Duplicate IDs). This page will be a living document containing the bookmarklets we find the most useful.
+</p>
+
+<h2>How To Install Bookmarklets For Your Browser</h2>
+
+<p>The easiest, most straight-forward way to install any of the bookmarklets in your browser is to make your Bookmarks
+  Toolbar visible and dragging them in there.</p>
+
+<ol>
+  <li>
+
+    The best way to store bookmarklets are to put them on your browser's Bookmarks Toolbar.
+    <details class="enable-drawer">
+
+      <summary class="enable-drawer__button">
+
+        Read how you can make your browser's Bookmarks Toolbar Visible.
+
+      </summary>
+      <div class="content">
+
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">Browser</th>
+              <th scope="col">Instructions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th scope="row">Chrome for Windows and Linux</th>
+              <td>Press Control+Shift+B on your keyboard.</td>
+
+            </tr>
+            <tr>
+              <th scope="row">Safari and Chrome for Mac</th>
+              <td>
+                <p>Press ⌘+Shift+B on your keyboard</p>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">Firefox</th>
+              <td>
+                <p>Why does Mozilla make this so difficult?!?!</p>
+                <ol>
+                  <li>In the navigation toolbar, go to the rightmost icon (screen reader users will hear it being
+                    refered to
+                    as the "Firefox" button. Sighted users will see it as a hamburger menu at the right most edge of the
+                    naviation toolbar, as shown in the screenshot below:<br class="break--with-space" />
+                    <img src="images/bookmarklets/firefox-menu.png" alt="" />
+                  </li>
+                  <li>Choose the Bookmarks item, as shown in this screenshot: <br class="break--with-space" />
+                    <img src="images/bookmarklets/firefox-menu-1.png" alt="" />
+                  </li>
+                  <li>In the new menu that appears, choose <strong>Show Bookmarks Toolbar</strong>, as shown in the
+                    screenshot below: <br class="break--with-space" />
+                    <img src="images/bookmarklets/firefox-menu-2.png" alt="" />
+                  </li>
+                </ol>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+      </div>
+    </details>
+
+
+
+  </li>
+  <li>Next, drag any of the bookmarklet links below into the Bookmarks Toolbar in your web browser.</li>
+  <li>That's it! Whenever you want to use any of the bookmarklets on your webpage, just click it!</li>
+</ol>
+
+
+<h2>List of Bookmarklets</h2>
+
+<h3>Duplicate IDs</h3>
+
+<p>
+  You'd be surprised how many pages have duplicate IDs in their HTML. This is very common with pages that
+  have multiple instances of a component on a web page (e.g. A product listing page with several product tiles on it).
+  This bookmarklet can help you check in-browser if there are multiple tags with the same ID (you will need to open your
+  console to see the results). It was slighly modified from <a
+    href="https://matthewbusche.com/2015/04/13/checking-an-html-page-for-duplicate-ids-using-javascript/">the
+    bookmarklet written by Matthew Busche</a>.
+</p>
+
+<a class="bookmarklet"
+  href='javascript:(function(){var c=document.getElementsByTagName("*"),d={},e=!1,f=0;console.log("running");for(var b=0,g=c.length;b<g;++b){var a=c[b].id;a&&(void 0===d[a]?d[a]=1:(e=!0,f++,console.warn("Duplicate ID #"+a,document.querySelectorAll(`#${a}`))))}e?console.log("Number%20of%20dupes:",f):console.log("No%20duplicate%20IDs%20found")})();'>
+  Duplicate ID Bookmarklet</a>
+
+<h3>What Has Focus?</h3>
+
+<p>
+  I wrote this bookmarklet when I was testing a page that was allowing keyboard focus to be applied to visually hidden
+  elements on the page. When you use the bookmarklet, every time you tab into an interactive element, its HTML appears
+  in the console. I use it all the time and find it super useful, so I include it here.
+</p>
+
+<a class="bookmarklet"
+  href='javascript:(function()%7Blet%20lastFocused%20%3D%20null%3BsetInterval(()%20%3D%3E%20%7Bconst%20%7B%20activeElement%20%7D%20%3D%20document%3Bif%20(lastFocused%20!%3D%3D%20activeElement)%20%7Bconsole.log(activeElement)%3BlastFocused%20%3D%20activeElement%3B%7D%7D%2C%201000)%7D)()'>What
+  Currently Has Focus</a>
+
+<h2>Other Accessibility Related Bookmarklets</h2>
+
+<p>There are, of course, many other places to get a11y related bookmarklets. Here are a few we know about.</p>
+
+<ul>
+  <li><a href="https://pauljadam.com/bookmarklets/">Paul J. Adams' JavaScript Bookmarklets for Accessibility Testing</a>
+  </li>
+  <li><a href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">The Visual ARIA
+      Bookmarklet</a> allows engineers, testers, educators, and students to physically observe ARIA usage within web
+    technologies, including ARIA 1.1 structural, live region, and widget roles, proper nesting and focus management,
+    plus requisite and optional supporting attributes to aid in development.</li>
+  <li><a href="text-spacing.php">Text Spacing Bookmarklet by Steve Faulkner</a>.</li>
+</ul>