Merge branch 'main' into dark-mode

Signed-off-by: Basia Baldwin <[email protected]>

.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

@@ -17,6 +17,8 @@ jobs:
               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
@@ -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_126.0.6478.126-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

.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

@@ -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)
@@ -59,6 +91,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 +101,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 +113,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 +186,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.