Merge branch 'main' of ssh://ssh.github.com:443/PublicisSapient/enabl…

…e-a11y into dark-mode

.eslintrc.json

@@ -6,14 +6,16 @@
         "jest": true
     },
     "extends": ["eslint:recommended", "prettier"],
+    "globals": {
+        "Chartist": "readonly",
+        "__dirname": "readonly",
+        "page": "readonly",
+        "process": "readonly"
+    },
     "parserOptions": {
         "sourceType": "module",
         "ecmaVersion": 12
     },
-    "rules": {
-        "no-undef": "warn",
-        "no-unused-vars": "warn"
-    },
     "ignorePatterns": [
         "node_modules",
         "enable-node-libs",
@@ -26,15 +28,13 @@
         "**.php",
         "js/tmp.js",
         "js/demos/ana-tudor/**",
-        "bin/php-express/**"
+        "bin/php-express/**",
+        "content/code-fragments/**/*"
     ],
     "plugins": ["import", "node", "promise"],
     "overrides": [
         {
-            "files": ["*.test.js", "test-config.js"],
-            "rules": {
-                "no-undef": "warn"
-            }
+            "files": ["*.test.js", "test-config.js"]
         }
     ]
 }

.github/workflows/push-actions.yml

@@ -15,8 +15,10 @@ jobs:
             - name: Use Node.js
               uses: actions/setup-node@v4
               with:
-                  node-version: "20.11.0"
+                  node-version: "20.15.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
@@ -33,7 +35,7 @@ jobs:
             - name: Use Node.js
               uses: actions/setup-node@v4
               with:
-                  node-version: "20.11.0"
+                  node-version: "20.15.0"
                   cache: "npm"
             - name: Set up JDK 11 for x64
               uses: actions/setup-java@v4
@@ -45,10 +47,10 @@ jobs:
               run: sudo apt install lynx
             - name: Install PHP8.1
               run: sudo apt install php8.1
-            - name: Install Chrome ver.124 to match chromedriver package version
+            - 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_124.0.6367.201-1_amd64.deb \
+                      && wget -q -O /tmp/chrome.deb http://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_128.0.6613.119-1_amd64.deb \
                   && sudo apt install -y /tmp/chrome.deb --allow-downgrades \
                   && rm /tmp/chrome.deb
             - name: Log system details
@@ -57,6 +59,8 @@ jobs:
                   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
@@ -65,4 +69,7 @@ jobs:
                   sleep 10 &&
                   curl http://localhost:8888
             - name: Run automation tests
-              run: npm run test
+              run: |
+                  export DISPLAY=:99
+                  sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 &
+                  npm run test

.gitignore

@@ -3,6 +3,8 @@ node_modules
 api-cache
 tmp
 .vscode
+report/*
+.idea
 
 # auto-gen PHP files/logs
 php_errors.log

.husky/pre-commit

@@ -2,10 +2,10 @@
 
 . "$(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.
+# Check if NODE_ENV is set to production
+if [ "$NODE_ENV" = "production" ] || [ "$CI" = "true" ]; then
+  echo "Skipping pre-commit hook in production environment"
+  exit 0
+fi
 
-# 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 "{}"' '*.*'
-
-# 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.
+npx lint-staged

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+chromedriver_force_download=true

.nvmrc

@@ -1 +1 @@
-v20.4.0
+v20.15.0

.prettierignore

@@ -13,4 +13,11 @@ tmp
 videos
 vtt
 bin/php-express
-**.ico
+**.ico
+**/*.jpeg
+**/*.jpg
+**/*.png
+**/*.webp
+**/*.mp4
+**/*.gif
+**/*.xcf

.prettierrc

@@ -17,6 +17,12 @@
             "options": {
                 "tabWidth": 2
             }
+        },
+        {
+            "files": ["*.php"],
+            "options": {
+                "trailingComma": "none"
+            }
         }
     ]
 }

.stylelintrc.json

@@ -0,0 +1,43 @@
+{
+    "customSyntax": "postcss-less",
+    "extends": "stylelint-config-standard",
+    "ignoreFiles": ["**/*.js"],
+    "rules": {
+        "alpha-value-notation": null,
+        "at-rule-empty-line-before": null,
+        "at-rule-no-unknown": null,
+        "color-function-notation": null,
+        "color-hex-length": null,
+        "comment-empty-line-before": null,
+        "comment-whitespace-inside": null,
+        "custom-property-empty-line-before": null,
+        "custom-property-pattern": null,
+        "declaration-empty-line-before": null,
+        "declaration-block-no-duplicate-properties": null,
+        "declaration-block-no-redundant-longhand-properties": null,
+        "declaration-block-no-shorthand-property-overrides": null,
+        "font-family-name-quotes": null,
+        "font-family-no-missing-generic-family-keyword": null,
+        "function-name-case": null,
+        "function-no-unknown": null,
+        "function-url-quotes": null,
+        "import-notation": null,
+        "keyframes-name-pattern": null,
+        "length-zero-no-unit": null,
+        "media-feature-range-notation": null,
+        "media-query-no-invalid": null,
+        "no-descending-specificity": null,
+        "no-duplicate-selectors": null,
+        "property-no-unknown": null,
+        "property-no-vendor-prefix": null,
+        "rule-empty-line-before": null,
+        "selector-class-pattern": null,
+        "selector-id-pattern": null,
+        "selector-no-vendor-prefix": null,
+        "selector-pseudo-element-colon-notation": null,
+        "shorthand-property-no-redundant-values": null,
+        "string-no-newline": null,
+        "value-keyword-case": null,
+        "value-no-vendor-prefix": null
+    }
+}

README.md

@@ -10,7 +10,7 @@ A place to learn and share with developers what makes web work accessible. This
 
 - 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`
+  - After installing nvm, install a Node version >= 20.15.0 using nvm, ideally `nvm install 20.15.0`
 - npm: a Node Package Manager, usually installed alongside Node
   - More info: [Downloading and installing Node.js and NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
 - Lynx: A text-only browser used for testing for how a website will work without graphics turned on.
@@ -19,6 +19,9 @@ A place to learn and share with developers what makes web work accessible. This
     - Install using homebrew: `brew install lynx`
     - Install using MacPorts: `sudo port install lynx`
     - Install on Ubuntu: `sudo apt install lynx`
+    - Install on WIndows:
+      - It is recommended to visit the [Cygwin](https://cygwin.com/) and choose the Install or update the link. Use the install program to install Cygwin's version of lynx.
+      - To ensure lynx can be found when installing and using [git bash](https://git-scm.com/downloads), developers should edit the `.bash_profile` and add `export PATH="$PATH:/c/cygwin64/bin/"` and the end of the file (assuming cygwin is installed in the `C:\cygwin64\bin\` directory).
 - PHP (version > 8.1)
   - Install options:
     - [Install from browser](https://www.php.net/downloads.php)
@@ -28,6 +31,35 @@ A place to learn and share with developers what makes web work accessible. This
   - 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)
@@ -42,6 +74,17 @@ A place to learn and share with developers what makes web work accessible. This
    ```sh
    git clone git@github.com:PublicisSapient/enable-a11y.git
    cd enable-a11y
+   ```
+
+   ```sh
+   nvm use
+   ```
+
+   This instructs nvm to use the Node version specified in the `.nvmrc` file located in the project root directory.
+
+   > Note: If the specified version has not been installed yet, nvm will advise to install it after running the command above.
+
+   ```sh
    npm clean-install
    ```
 
@@ -59,6 +102,8 @@ A place to learn and share with developers what makes web work accessible. This
 
    > 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
@@ -67,6 +112,7 @@ A place to learn and share with developers what makes web work accessible. This
 - Axe CLI: Uses a browser webdriver to open pages and run accessibility tests on it.
 - pa11y CLI: Uses Puppeteer to run its own headless Chrome browser to run accessibility tests.
 - Jest + Puppeteer: Used to run and validate code in unit tests.
+- Lighthouse CLI: Uses a browser webdriver to open and run accessibility audits on each page and then provides reports and a summary.
 
 Read [the Enable Code Quality article](https://www.useragentman.com/enable/code-quality.php) for the full details behind the testing tools being used and how.
 
@@ -78,6 +124,8 @@ Read [the Enable Code Quality article](https://www.useragentman.com/enable/code-
 - Run only the v.Nu tests: `npm run test-vnu`
 - Run only the Axe tests: `npm run test-axe`
 - Run only the Pa11y tests: `npm run test-pa11y`
+- Run only the Lighthouse tests on all URL's: `npm run test-lighthouse`
+- Run only the Lighthouse tests on a single URL: `npm run test-lighthouse-url {Valid URL}`
 
 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/)
 
@@ -149,6 +197,10 @@ When you start the project with `npm run server`, the files in the `nodeFiles` a
 
 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.
 
+### VNU validation error
+
+If your build is failing due to an invalid error with VNU (i.e. a false positive), you can update 'data/vnu-filters' with the corresponding error message. This will ignore these invalid errors and allow your build to complete.
+
 ### 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.
@@ -159,6 +211,44 @@ If you are trying to contribute to the Enable site from a forked version of this
 
 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)).
 
+### Strcutured Data Markup
+
+Structured Data Markup is a way to label or tag the content on your website so that search engines and other platforms can better understand it.
+
+The Article and HowTo tags are two types of structured data markup that help search engines understand specific kinds of content.
+
+#### Article Tag:
+
+This is used to mark up articles, blog posts, or other written content. By using the Article tag, we help search engines identify the main parts of your article, like the headline. This can make your article show up better in search results, sometimes with extra features like the headline or image preview.
+
+#### HowTo Tag:
+
+This is used for content that gives step-by-step instructions on how to do something. When you use the HowTo tag, search engines can display your instructions in a more detailed way, often showing each step directly in the search results.
+
+Example of checkbox in the meta-info.json, where the mainEntity can be an array of 'Article' and 'HowTo' objects extracted from page:
+
+```json
+"checkbox.php": {
+    "title": "How to Create Accessible Checkboxes",
+    "desc": "Here is a step-by-step guide to creating accessible checkboxes",
+    "url": "https://www.useragentman.com/enable/checkbox.php",
+    "mainEntity":[
+      {
+      "type": "Article",
+      "title": "A real styled HTML5 checkbox",
+      "desc": "You can style an HTML5 checkbox using CSS easily.",
+      "url": "https://www.useragentman.com/enable/checkbox.php#a-real-styled-html5-checkbox--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Step-by-Step to make the styled checkboxe accessible",
+      "desc": "See the dropdown to highlight each of the individual steps that make the styled checkboxe accessible",
+      "url": "https://www.useragentman.com/enable/checkbox.php#developer-walkthrough-1"
+      },
+  ]
+}
+```
+
 ## References
 
 When testing using screen readers, these resources may be of help to you: