Merge branch 'main' into accessible-load-more

.github/workflows/push-actions.yml

@@ -15,7 +15,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: Install X11 dependencies for robotjs (needed for unit testing on input-mask tests)
               run: sudo apt-get install libxtst-dev libpng++-dev xvfb
@@ -35,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
@@ -50,7 +50,7 @@ jobs:
             - 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 \
+                      && 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

.husky/pre-commit

@@ -2,13 +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 "{}"' '*.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.
-
-# Run eslint
-npm run eslint && npm run stylelint
+npx lint-staged

.npmrc

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

.nvmrc

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

.stylelintrc.json

@@ -1,7 +1,12 @@
 {
     "customSyntax": "postcss-less",
     "extends": "stylelint-config-standard",
-    "ignoreFiles": ["**/*.js"],
+    "ignoreFiles": [
+        "**/*.js",
+        "enable-node-libs/**/*.css",
+        "js/out/**/*.css",
+        "js/enable-libs/**/*.css"
+    ],
     "rules": {
         "alpha-value-notation": null,
         "at-rule-empty-line-before": null,
@@ -16,18 +21,26 @@
         "declaration-block-no-duplicate-properties": null,
         "declaration-block-no-redundant-longhand-properties": null,
         "declaration-block-no-shorthand-property-overrides": null,
+        "declaration-block-single-line-max-declarations": null,
+        "declaration-property-unit-allowed-list": {
+            "font-size": ["em", "rem", "vmin", "vmax", "vw", "vh"]
+        },
         "font-family-name-quotes": null,
         "font-family-no-missing-generic-family-keyword": null,
+        "function-calc-no-unspaced-operator": null,
         "function-name-case": null,
         "function-no-unknown": null,
         "function-url-quotes": null,
+        "hue-degree-notation": null,
         "import-notation": null,
         "keyframes-name-pattern": null,
         "length-zero-no-unit": null,
         "media-feature-range-notation": null,
         "media-query-no-invalid": null,
+        "no-empty-source": null,
         "no-descending-specificity": null,
         "no-duplicate-selectors": null,
+        "number-max-precision": null,
         "property-no-unknown": null,
         "property-no-vendor-prefix": null,
         "rule-empty-line-before": 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.
@@ -74,6 +74,17 @@ A place to learn and share with developers what makes web work accessible. This
    ```sh
    git clone [email protected]: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
    ```
 
@@ -200,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:

bin/enforceRemFontSize.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+i=`find css -name '*.css' -print`
+
+# echo $i
+OUTPUT=`grep -n 'font-size:[^\s\S]*[^@]px;' $i`
+# grep -b 'line-height:[^\s\S]*[^0-9];' $i
+RET="$?"
+
+if [ "$RET" = "0" ]
+then
+    echo "The following CSS files must be changed so they don't use px units."
+    echo "Please ensure you change the corresponding LESS files to use the @px mixin."
+    echo "(e.g. instead of using 'font-size: 12px;', use 'font-size: 12 / @px;')."
+    echo
+    echo "$OUTPUT"
+    echo
+    exit 1;
+fi
+
+exit 0

bin/validate-node-version.mjs

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+import chalk from 'chalk';
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+
+async function getRunningVersion() {
+    const terminalCmd = 'node --version';
+
+    try {
+        return  execSync(terminalCmd).toString().trim();
+    } catch (e) {
+        console.log(chalk.red(`Node version validation failed while running ${terminalCmd}`), e);
+    }
+}
+
+async function validateVersion() {
+    const directory = path.resolve();
+    let runningVersion;
+
+    try {
+        const filePath = path.resolve(directory, '.nvmrc');
+        const fileMetadata = await fs.promises.stat(filePath);
+        const fileContent = fs.readFileSync(filePath, "utf8");
+        let specVersion;
+
+        if (fileMetadata) {
+            specVersion = fileContent.startsWith("v") ? fileContent : `v${fileContent};`
+            runningVersion = (await getRunningVersion()).trim();
+
+            if (runningVersion.trim() !== specVersion.trim()) {
+                console.log(chalk.red(`Your Node version ${runningVersion} does not match the specified version ${specVersion} \rfound in the .nvmrc file in your project root`)  );
+                console.log('\n-------------\n');
+                console.log(chalk.red('Run command "nvm use" followed by "npm ci" in your terminal before running "npm run start" again.\n'));
+                process.exit(1);
+            }
+        }
+
+
+    } catch (e) {
+        if (e.code !== "ENOENT") {
+            console.log(chalk.red('An unexpected error occurred while validating your Node version.\n'));
+            console.error(e);
+            process.exit(1);
+        }
+        console.log(chalk.red('Make sure the ".nvmrc" file from the Git repository is present in your project root directory\n'));
+        console.error(e);
+        process.exit(1);
+    }
+}
+
+validateVersion();

content/body/acknowledgements.php

@@ -17,6 +17,8 @@
 </p>
 
 <ul>
+  <li><a href="https://github.com/saumyajitc">Saumyajit Chowdhury</a> for implementing husky pre-commit hooks to run lint-staged before pushing code to the repository</li>
+  <li><a href="https://github.com/majid-paktinat">Majid Paktinat</a> and <a href="https://github.com/akshaypanchal">Akshaykumar Panchal</a> for implementing dynamic Structured Data Markup for improving the SEO of the Enable Project.</li>
   <li><a href="https://github.com/alisonhall">Alison Hall</a> for cleaning up and streamlining the unit testing and automated testing NPM tasks (and also doing the difficult task of updating the NPM packages within the project in 2024).
   </li>
   <li>Sahil Singh for unit tests for the <a href="input-mask.php">input mask component</a>.</li>
@@ -30,6 +32,7 @@
 </p> 
 
 <ul>
+<li><a href="https://github.com/saumyajitc">Saumyajit Chowdhury</a> for implementing deployment procedures in <a href="https://enable-a11y-react-iqpmwl8kb-publicis-sapient-sandbox.vercel.app/" target="new">Vercel</a> for <a href="https://github.com/PublicisSapient/enable-a11y-react" target="new">Enable(react version)</a> and create npm package for external use of the accessible components.</li>
   <li><a href="https://twitter.com/lsnrae">Alison Walden</a> for her UX guidelines for both <a
       href="https://lsnrae.medium.com/if-you-must-use-a-carousel-make-it-accessible-977afd0173f4">accessible
       carousels</a> and <a href="https://lsnrae.medium.com/accessible-form-validation-9fa637ddb0fc">form validation</a>

content/body/focus-styling.php

@@ -1,3 +1,17 @@
+<p>
+  Before we dive into making focus outlines accessible, let's first understand what a focus outline is and why it’s important for web accessibility, particularly for screen readers. 
+  If you're already familiar with focus outlines, feel free to skip to the next section. For those who aren’t, here's a brief definition.
+</p>
+
+<h2>What is a Focus Outline?</h2>
+
+<p>
+  Simply put, when a specific HTML element is ready to accept keyboard input, it is considered to be "in focus." 
+  As users navigate a webpage using the keyboard (typically via the Tab key), different elements receive focus, allowing screen readers to read their content. 
+  According to accessibility standards, any element in focus should have a visible border around it, known as the focus outline. This helps users, especially those relying on screen readers or keyboard navigation, to know which element is currently active.
+</p>
+
+
 <p>
   Focus states are used by keyboard users to know what interactive element they can currently manipulate. They are easily
   styled with the <code>outline</code> CSS property and the <code>:focus</code> and <code>:focus-visible</code> pseudo-classes.

content/body/form-error-checking.php

@@ -271,29 +271,6 @@
       }
       </script>
 
-      <script type="application/ld+json">
-      {
-        "@context": "https://schema.org",
-        "@type": "WebPage",
-        "name": "Accessible Form Validation: HTML5 and Custom Approaches",
-        "description": "Learn how to make form validation and error checking accessible using HTML5 and custom validation methods. Includes code examples and best practices.",
-        "url": "https://www.useragentman.com/enable/form-error-checking.php",
-        "mainEntity": [
-          {
-            "@type": "HowTo",
-            "name": "Using HTML5 for Accessible Form Validation",
-            "text": "You can use just the required and pattern attributes on HTML forms to do client-side validation without JavaScript.",
-            "url": "https://www.useragentman.com/enable/form-error-checking.php#using-native-html5-validation--heading"
-          },
-          {
-            "@type": "HowTo",
-            "name": "Using Custom Validation for Accessible Form Validation",
-            "text": "You can use enable-a11y node package to handle client-side form validation and error messages.",
-            "url": "https://www.useragentman.com/enable/form-error-checking.php#using-custom-validation--heading"
-          }
-        ]
-      }
-    </script>
 
 
 <?= includeNPMInstructions("accessibility", [], null, false, [

css/accessible-text-svg.css

@@ -7,7 +7,7 @@ body {
 #accessible-text-svg-demo__text {
   fill: black;
   stroke-width: 2px;
-  font-size: calc(54px * var(--text-zoom-factor));
+  font-size: calc(3.375rem * var(--text-zoom-factor));
   font-family: "Georgia", "Times New Roman", serif;
   panose-1: 0 0 0 0 0 0 0 0 0 0;
   font-style: italic;
@@ -23,7 +23,7 @@ body {
   transform: translateY(-4px);
 }
 #accessible-text-svg-demo__intro-text {
-  font-size: calc(54px * var(--text-zoom-factor));
+  font-size: calc(3.375rem * var(--text-zoom-factor));
   z-index: 2;
   color: black;
   font-family: "Georgia", "Times New Roman", serif;
@@ -41,7 +41,7 @@ body {
   width: 100%;
 }
 #accessible-text-svg-demo__roller-coaster-image {
-  left: 0px;
+  left: 0;
   position: absolute;
   top: 0;
   z-index: 1;

css/article.css

@@ -174,8 +174,8 @@ table.fixed-headers [role="rowheader"],
 table.fixed-headers [role="cell"],
 [role="table"].fixed-headers [role="cell"] {
   overflow: hidden;
-  width: 100% / 7;
-  max-width: 100% / 7;
+  width: 14.28571429%;
+  max-width: 14.28571429%;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;

css/chart.css

@@ -19,10 +19,10 @@ body {
   width: initial;
 }
 .chart-example svg {
-  font-size: 16px;
+  font-size: 1rem;
 }
 .chart-example .tick text {
-  font-size: calc(10px * var(--text-zoom-factor));
+  font-size: calc(0.625rem * var(--text-zoom-factor));
 }
 #bar-chart {
   height: 400px;