Merge branch 'main' into 120-tech-unit-testing-for-autocomplete-combobox

Author: Neha-Singla

.github/workflows/push-actions.yml

@@ -18,7 +18,7 @@ jobs:
                   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 
+              run: sudo apt-get install libxtst-dev libpng++-dev xvfb
             - name: Install npm dependencies
               run: npm ci
             - name: Run ESLint
@@ -60,7 +60,7 @@ jobs:
                   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 
+              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

.prettierrc

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

.swo

@@ -271,6 +271,30 @@
       }
       </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, [
     "needsAccessibilityLib" => true,

content/body/form-error-checking.php

@@ -1,5 +1,5 @@
 <link id="link-css" rel="stylesheet" type="text/css" href="css/link.css" >
 
-<?php // since we are using an example from this page, we need to include the stylesheet from it as well.
-include "hero-image-text-resize.php";
+<!-- Since we are using an example from this page, we need to include the stylesheet from it as well. -->
+<?php include "hero-image-text-resize.php";
 ?>

content/head/link.php

@@ -6,6 +6,14 @@ figure,
   border: solid 1px #ccc;
   background: #ffffcc;
 }
+figure:has(.showcode),
+[role="figure"]:has(.showcode) {
+  padding: 0;
+}
+figure:has(.showcode) code,
+[role="figure"]:has(.showcode) code {
+  max-width: calc(100vw - 40px);
+}
 figure img,
 [role="figure"] img {
   max-width: 100%;

css/figure.css

@@ -42,6 +42,7 @@
   position: -webkit-sticky;
   position: sticky;
   left: 0;
+  z-index: 1;
 }
 .sticky-table__sticky-horiz-heading {
   position: -webkit-sticky;

css/table.css

@@ -146,7 +146,7 @@ describe('Input mask test suite', () => {
             },
         );
         // check screenshot for the selection, should match up - "123-45"
-        await page.screenshot({ path: 'mouseSelection.png' });
+        // await page.screenshot({ path: 'mouseSelection.png' });
         expect(expectedSelection).toBe(selectedText);
     });
 
@@ -178,7 +178,7 @@ describe('Input mask test suite', () => {
             },
         );
         // check screenshot for the selection, should match up - "6-7890"
-        await page.screenshot({ path: 'keyBoardSelection.png' });
+        // await page.screenshot({ path: 'keyBoardSelection.png' });
         expect(expectedSelection).toBe(selectedText);
     });
 

js/test/input-mask.test.js

@@ -8,6 +8,14 @@ figure,
     border: solid 1px #ccc;
     background: #ffffcc;
 
+    &:has(.showcode) {
+        padding: 0;
+
+        code {
+            max-width: calc(100vw - 40px);
+        }
+    }
+
     img {
         max-width: 100%;
     }

keyBoardSelection.png

@@ -52,6 +52,7 @@
         [role="rowheader"] {
             .sticky();
             left: 0;
+            z-index: 1;
         }
     }
 

less/figure.less

@@ -80,8 +80,8 @@
     "desc": "Many designers will turn off focus styles on web apps. There are better solutions that ensure they appear for only the users that need them."
   },
   "form-error-checking.php": {
-    "title": "Accessible Form Error Checking",
-    "desc": "It is not hard to ensure forms work correctly with screen readers and other technology."
+    "title": "How to Ensure Accessible Form Validation and Error Checking",
+    "desc": "Learn how to make your form validation and error checking accessible. Follow best practices to ensure your web forms are compliant with WCAG guidelines and user-friendly for everyone."
   },
   "form.php": {
     "title": "Accessible Form Structure",

less/table.less

@@ -305,7 +305,7 @@ class="enable-flyout enable-flyout__level enable-flyout__dropdown">
                                     }, {
                                         "id": "flyout__link",
                                         "props": {
-                                            "label": "Form Error Checking",
+                                            "label": "Accessible Form Validation",
                                             "url-slug": "form-error-checking",
                                             "alt": ""
                                         }
@@ -589,7 +589,7 @@ class="enable-flyout enable-flyout__level enable-flyout__dropdown">
                             "content": [{
                                 "id": "flyout__link",
                                 "props": {
-                                    "label": "Form Error Checking",
+                                    "label": "Accessible Form Validation",
                                     "url-slug": "form-error-checking",
                                     "alt": ""
                                 }

mouseSelection.png

@@ -1,8 +1,9 @@
+<div class="sticky-table__container" tabindex="0">
 <table class="compliance-table">
     <caption>WCAG audio related guidelines</caption>
     <thead>
         <tr>
-            <th scope="col"><span class="sr-only">Requirement</span></th>
+            <th scope="col" class="sticky-table__sticky-horiz-heading"><span class="sr-only">Requirement</span></th>
             <th scope="col">A</th>
             <th scope="col">AA</th>
             <th scope="col">AAA</th>
@@ -35,4 +36,5 @@
             <td><img class="compliance-table__icon" src="images/checkmark.svg" alt="required"></td>
         </tr>
     </tbody>
-</table>
+</table>
+</div>

templates/data/meta-info.json

@@ -1,8 +1,9 @@
-<table class="compliance-table">
+<div class="sticky-table__container" tabindex="0">
+    <table class="compliance-table">
     <caption>WCAG video related guidelines</caption>
     <thead>
         <tr>
-            <th scope="col"><span class="sr-only">Requirement</span></th>
+            <th scope="col"  class="sticky-table__sticky-horiz-heading"><span class="sr-only">Requirement</span></th>
             <th scope="col">A</th>
             <th scope="col">AA</th>
             <th scope="col">AAA</th>
@@ -75,4 +76,5 @@
 
 
     </tbody>
-</table>
+</table>
+</div>