Masked input test

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-env"]
+    "presets": ["@babel/preset-env"]
 }

.editorconfig

@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = space
+indent_size = 4
+max_line_length = 80

.eslintrc.json

@@ -5,11 +5,36 @@
         "es2021": true,
         "jest": true
     },
-    "extends": "eslint:recommended",
+    "extends": ["eslint:recommended", "prettier"],
     "parserOptions": {
         "sourceType": "module",
         "ecmaVersion": 12
     },
     "rules": {
-    }
+        "no-undef": "warn",
+        "no-unused-vars": "warn"
+    },
+    "ignorePatterns": [
+        "node_modules",
+        "enable-node-libs",
+        "js/enable-libs",
+        "js/modules",
+        "js/out",
+        "tmp",
+        "**.sh",
+        "**.less",
+        "**.php",
+        "js/tmp.js",
+        "js/demos/ana-tudor/**",
+        "bin/php-express/**"
+    ],
+    "plugins": ["import", "node", "promise"],
+    "overrides": [
+        {
+            "files": ["*.test.js", "test-config.js"],
+            "rules": {
+                "no-undef": "warn"
+            }
+        }
+    ]
 }

.github/workflows/push-actions.yml

@@ -0,0 +1,75 @@
+# GitHub Actions for CI/CD
+
+name: Automated Tests on Git Push
+on: push
+
+jobs:
+    # An automated check that runs the ESLint scan
+    eslint:
+        name: Run ESLint scan
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+            - name: Use Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "20.11.0"
+                  cache: "npm"
+            - name: Install X11 dependencies for robotjs (needed for unit testing on input-mask tests)
+              run: sudo apt-get install libxtst-dev libpng++-dev xvfb 
+            - name: Install npm dependencies
+              run: npm ci
+            - name: Run ESLint
+              run: npm run eslint
+
+    # An automated check that runs all of the accessibility and unit tests
+    tests:
+        name: Run Automated tests
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+            - name: Use Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "20.11.0"
+                  cache: "npm"
+            - name: Set up JDK 11 for x64
+              uses: actions/setup-java@v4
+              with:
+                  java-version: "11"
+                  distribution: "temurin"
+                  architecture: x64
+            - name: Install Lynx dependency
+              run: sudo apt install lynx
+            - name: Install PHP8.1
+              run: sudo apt install php8.1
+            - name: Install latest Chrome er.124 to match chromedriver package version
+              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_126.0.6478.126-1_amd64.deb \
+                  && sudo apt install -y /tmp/chrome.deb --allow-downgrades \
+                  && rm /tmp/chrome.deb
+            - name: Log system details
+              run: |
+                  uname &&
+                  echo $OSTYPE &&
+                  which google-chrome &&
+                  google-chrome --version
+            - name: Install X11 dependencies for robotjs (needed for unit testing on input-mask tests)
+              run: sudo apt-get install libxtst-dev libpng++-dev xvfb 
+            - name: Install npm dependencies
+              run: npm ci
+            - name: Start server and wait for localhost to be available
+              run: |
+                  npm run start &
+                  sleep 10 &&
+                  curl http://localhost:8888
+            - name: Run automation tests
+              run: |
+                  export DISPLAY=:99
+                  sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 &
+                  npm run test

.gitignore

@@ -2,6 +2,7 @@ node_modules
 .DS_Store
 api-cache
 tmp
+.vscode
 
 # auto-gen PHP files/logs
 php_errors.log

.husky/install.mjs

@@ -0,0 +1,8 @@
+// This ensure that Husky is not installed and used in our CI/CD pipeline, but is otherwise automatically installed since it is only needed on commits. The following code was recommended by the Husky docs (https://typicode.github.io/husky/how-to.html).
+
+// Skip Husky install in production and CI
+if (process.env.NODE_ENV === "production" || process.env.CI === "true") {
+    process.exit(0);
+}
+const husky = (await import("husky")).default;
+console.log(husky());

.husky/pre-commit

@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+
+. "$(dirname "$0")/_/husky.sh"
+
+# This is the code that automatically runs the Prettier formatter on all staged parts of files that are to be committed. It is run after a commit has been triggered, but before the commit is actually made. This ensures that all code that is committed is formatted correctly.
+
+# Source: https://prettier.io/docs/en/precommit.html#option-4-git-format-stagedhttpsgithubcomhallettjgit-format-staged
+
+npx git-format-staged -f 'prettier --ignore-unknown --stdin-filepath "{}"' '*.js' '*.jsx' '*.less' '*.md' '*.json' '*.html' '*.php' '*.sh'
+
+# If you have issues when running the npx command in an IDE, you should try running the command in the terminal instead. This issue is due to the PATH values not being set as expected in the IDE in order for npx to be recognized. See https://stackoverflow.com/questions/67115897/vscode-github-desktop-pre-commit-hook-npx-command-not-found for more information.

.prettierignore

@@ -0,0 +1,23 @@
+# Ignore artifacts:
+node_modules
+css
+data
+diagram-gimp-files
+enable-node-libs
+fonts
+images
+js/enable-libs
+js/modules
+js/out
+tmp
+videos
+vtt
+bin/php-express
+**.ico
+**/*.jpeg
+**/*.jpg
+**/*.png
+**/*.webp
+**/*.mp4
+**/*.gif
+**/*.xcf

.prettierrc

@@ -0,0 +1,22 @@
+{
+    "phpVersion": "8.1",
+    "plugins": ["@prettier/plugin-php"],
+    "tabWidth": 4,
+    "bracketSameLine": true,
+    "printWidth": 80,
+    "singleQuote": false,
+    "overrides": [
+        {
+            "files": ["*.js"],
+            "options": {
+                "singleQuote": true
+            }
+        },
+        {
+            "files": ["*.md", "package.json", "package-lock.json"],
+            "options": {
+                "tabWidth": 2
+            }
+        }
+    ]
+}

README.md

@@ -8,7 +8,7 @@ A place to learn and share with developers what makes web work accessible. This
 
 ### Prerequisite Installations
 
-- nvm: A Node version manager.  It allows you to install several versions of node on the same machine and change versions easily.
+- nvm: A Node version manager. It allows you to install several versions of node on the same machine and change versions easily.
   - [Here are instructions in how to install nvm](https://github.com/nvm-sh/nvm#usage)
   - After installing nvm, install a Node version >= 18 using nvm, ideally `nvm install 20.11.0`
 - npm: a Node Package Manager, usually installed alongside Node
@@ -18,14 +18,47 @@ A place to learn and share with developers what makes web work accessible. This
     - [Download from browser](https://etc.usf.edu/techease/4all/web-accessibility/the-lynx-text-web-browser/)
     - Install using homebrew: `brew install lynx`
     - Install using MacPorts: `sudo port install lynx`
+    - Install on Ubuntu: `sudo apt install lynx`
 - PHP (version > 8.1)
   - Install options:
     - [Install from browser](https://www.php.net/downloads.php)
     - Install using homebrew: `brew install php`
     - Install using MacPorts: `sudo port install php`
+    - Install on Ubuntu: `sudo apt install php8.1`
   - You can find the path to the installed PHP using `which php`. Add that path to your terminal profile's PATH environment value and/or VS Code settings.
 - Java: required in order to use the v.Nu checker during automation and unit testing
 
+  - Install options:
+
+    - Brew Install Options:
+
+      - ```bash
+        brew install java
+        ```
+      - ```bash
+        brew install openjdk
+        ```
+      - Additional tasks
+
+        - ```bash
+          java -version
+          ```
+
+          If you get "Unable to locate a Java Runtime", proceed to next step.
+
+        - Ensure your symlink is correctly mapped (these instructions will also appear after you brew install java)
+
+          - ```bash
+            sudo ln -sfn /opt/homebrew/opt/openjdk/libexec/openjdk.jdk \
+            /Library/Java/JavaVirtualMachines/openjdk.jdk
+            ```
+
+    - Manual Install Options:
+      - Mac Install <https://www.java.com/en/download/help/mac_install.html>
+      - Windows Install <https://www.java.com/en/download/help/windows_manual_download.html>
+
+> Note: Any changes to these prerequisites will need to be reflected in the GitHub Actions in order to run the CI/CD checks.
+
 #### Optional installations (since `npm run server` will run an express server)
 
 - MAMP (OSX) or Apache: <https://www.mamp.info/en/mac/>
@@ -35,26 +68,28 @@ A place to learn and share with developers what makes web work accessible. This
 
 1. Run the following commands in your Terminal or Terminal equivalent program:
 
-    ```sh
-    git clone git@github.com:PublicisSapient/enable-a11y.git
-    cd enable-a11y
-    npm clean-install
-    ```
+   ```sh
+   git clone git@github.com:PublicisSapient/enable-a11y.git
+   cd enable-a11y
+   npm clean-install
+   ```
 
-    > Note: Using `clean-install` instead of just `install` installs the exact package versions listed in the package-lock.json, and therefore has guaranteed compatibility.
+   > Note: Using `clean-install` instead of just `install` installs the exact package versions listed in the package-lock.json, and therefore has guaranteed compatibility.
 
 2. Start the local server using:
 
-    ```sh
-    npm run start
-    ```
+   ```sh
+   npm run start
+   ```
 
 3. Open <http://localhost:8888> in your browser to see the local version of the site.
 
 4. Make sure everything is installed correctly by running the automated tests using `npm run test`.
 
    > See the [Chromedriver issues](#chromedriver-issues) section if you encounter an error related to Chromedriver.
 
+   > Make sure your local server is running in another terminal before running `npm run test`.
+
 ## Tests
 
 ### Tools used for testing
@@ -75,7 +110,7 @@ Read [the Enable Code Quality article](https://www.useragentman.com/enable/code-
 - Run only the Axe tests: `npm run test-axe`
 - Run only the Pa11y tests: `npm run test-pa11y`
 
-If you are noticing that the jest tests are taking a long time, you might want to run `npm run jest-debug-memory-leak`.  If the heap size for each test group increases a lot, there is a memory leak in the tests. More information about that can be found at in the article [Your Jest Tests are Leaking Memory](https://chanind.github.io/javascript/2019/10/12/jest-tests-memory-leak.html) by [David Chanin](https://chanind.github.io/about/)
+If you are noticing that the jest tests are taking a long time, you might want to run `npm run jest-debug-memory-leak`. If the heap size for each test group increases a lot, there is a memory leak in the tests. More information about that can be found at in the article [Your Jest Tests are Leaking Memory](https://chanind.github.io/javascript/2019/10/12/jest-tests-memory-leak.html) by [David Chanin](https://chanind.github.io/about/)
 
 > Hint: Make sure the local server is running first using the `npm run start` command.
 
@@ -99,23 +134,29 @@ npm install -D chromedriver --chromedriver_filepath=/path/to/chromedriver_mac64.
 
 If you still have problems with Chromedriver, you may want to read the Stack Overflow article [Session Not Created: This version of ChromeDriver only supports Chrome version 98](https://stackoverflow.com/questions/71859550/session-not-created-this-version-of-chromedriver-only-supports-chrome-version-9).
 
-## Style Notes
+## Development
 
-1. All font-sizes are converted to rems. This is done via LESS.  If you want a font-size of 20px, then you would do the following:
+### Contributing code
 
-    ```css
-      div {
-        font-size: (20/@px);
-      }
-    ```
+If you would like to contribute to this project, please feel free to raise a Pull Request! See the documentation at [Creating a pull request from a fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork) for instructions.
 
-    The `@px` variable is set to 16rem, which is also the base font size
+### Style Notes
 
-2. If we hide custom components and use CSS to create custom facades for them, we must ensure that these facades will be discoverable to users navigating by touch. For more information about being inclusive of users navigating by touch, please read [Inclusively Hiding & Styling Checkboxes and Radio Buttons](https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/) by [Sara Soueidan](https://www.sarasoueidan.com). 
+1. All font-sizes are converted to rems. This is done via LESS. If you want a font-size of 20px, then you would do the following:
 
-## Adding An External NPM Module To The Front-End Code
+   ```css
+   div {
+     font-size: (20 / @px);
+   }
+   ```
 
-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`.  
+   The `@px` variable is set to 16rem, which is also the base font size
+
+2. If we hide custom components and use CSS to create custom facades for them, we must ensure that these facades will be discoverable to users navigating by touch. For more information about being inclusive of users navigating by touch, please read [Inclusively Hiding & Styling Checkboxes and Radio Buttons](https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/) by [Sara Soueidan](https://www.sarasoueidan.com).
+
+### 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 JavaScript 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:
 
@@ -133,11 +174,25 @@ const nodeFiles = [
 ]
 </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.
+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.
+
+### Pre-commit hook error - "npx: command not found"
+
+If you encounter an error when trying to commit some code from within an IDE (like VS Code, IntelliJ, GitHub Desktop, etc.), and the error is about the `npx` command not being found, you should try running the command in the terminal instead. This issue is due to the PATH values not being set as expected in the IDE in order for npx to be recognized. See <https://stackoverflow.com/questions/67115897/vscode-github-desktop-pre-commit-hook-npx-command-not-found> for more information.
+
+### Pull Request from fork not completing CI/CD tests
+
+If you are trying to contribute to the Enable site from a forked version of this repository, and the automatic tests in your Pull Request only ever show "Some checks haven't completed yet" and "Expected - Waiting for status to be reported" (see an example in the image below), then you may need to update the settings in your forked repository. The "Allow all actions and reusable workflows" option within the Actions section of the settings should be selected. Please go to the [Using GitHub Actions to Run the Tests in the CI/CD Pipeline](https://www.useragentman.com/enable/code-quality.php#using-github-actions-to-run-the-tests-in-the-ci-cd-pipeline--heading) section on this site for more details on how to find this option. After changing the setting, you will need to retrigger the actions by making another commit.
+
+![View of a GitHub PR with the "Some checks haven't completed yet" message](images/automated-tests-pending.png)
+
+### I Made a New Component! How do I make sure it is available on NPM
+
+You will need to update the version number that NPM broadcasts as the latest version number. Please use [np](https://github.com/sindresorhus/np) to do this (it is what we have used in the past). This should be done by development lead of the Enable project (as of this writing, this is [Zoltan Hawryluk](https://www.npmjs.com/~zoltandulac)).
 
 ## References
 
 When testing using screen readers, these resources may be of help to you:
 
-* [Desktop Screen Readers Survival Guide - Basic Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/survival-guide)
-* [NVDA Users Guide](https://www.nvaccess.org/files/nvda/documentation/userGuide.html)
+- [Desktop Screen Readers Survival Guide - Basic Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/survival-guide)
+- [NVDA Users Guide](https://www.nvaccess.org/files/nvda/documentation/userGuide.html)

_01-alert-dialog.php

@@ -5,14 +5,14 @@
 "HTML Tidy for HTML5 for Apple macOS version 5.6.0">
 
 <title>Alert Dialog Example</title>
-		<?php include("includes/common-head-tags.php"); ?>
+		<?php include "includes/common-head-tags.php"; ?>
 <link media="all" rel="stylesheet" href="css/dialog.css">
 </head>
 <body>
 <div id="a11y-modal__non-modal-content">
-<?php include("includes/documentation-header.php"); ?>
+<?php include "includes/documentation-header.php"; ?>
 <main id="main" tabindex="-1">
-    <?php include "includes/pause-anim-control.php" ?>
+    <?php include "includes/pause-anim-control.php"; ?>
 <!-- <aside class="notes">
 <h2>Notes:</h2>
 <ul>