Feature/html5 autocomplete

content/bottom/autocomplete.php

@@ -0,0 +1,21 @@
+<!--Note: Using CDN version of Tailwind CSS here until the REACT NEXTJS project is setup.
+    This is a temporary solution due to Tailwind needing PostCSS and this project using a preproccessor. 
+    See here:  https://tailwindcss.com/docs/installation/play-cdn -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+<!-- adding tailwind config file with tw- prefix -->
+<script>
+    tailwind.config = {
+        prefix: 'tw-',
+        theme: {
+            extend: {
+                colors: {
+                    primary: {
+                    DEFAULT: "#000",
+                    foreground: "#FFF",
+                    },
+                },
+            }
+        }
+    }
+</script>

js/test/autocomplete.test.js

@@ -0,0 +1,57 @@
+'use strict';
+
+import config from './test-config.js';
+import testHelpers from './test-helpers.js';
+
+describe('Form Accessibility Tests', () => {
+    beforeAll(async () => {});
+
+    // Test #1
+    it('See if all input fields in the form are keyboard accessible', async () => {
+        let domInfo;
+
+        await page.goto(`${config.BASE_URL}/autocomplete.php`);
+
+        // wait until all content loads
+        await page.waitForSelector('#autocomplete');
+
+        const inputsInForm = Array.from(
+            await page.$$('#autocomplete input'),
+        ).length;
+        expect(inputsInForm).toBeGreaterThan(0);
+
+        for (let i = 0; i < inputsInForm; i++) {
+            //focus the input
+            domInfo = await page.evaluate((i) => {
+                const inputEls = document.querySelectorAll(
+                    '#autocomplete input',
+                );
+                const inputEl = inputEls[i];
+                const ariaLabelledby = inputEl.getAttribute('aria-labelledby');
+                const ariaLabel = inputEl.getAttribute('aria-label');
+                let label = null;
+
+                if (ariaLabelledby !== null) {
+                    const ariaLabelledbyEl =
+                        document.getElementById(ariaLabelledby);
+
+                    if (ariaLabelledbyEl !== null) {
+                        label = ariaLabelledbyEl.innerText.trim();
+                    }
+                } else {
+                    label = ariaLabel.innerText.trim();
+                }
+
+                inputEl.focus();
+
+                return {
+                    isFocused: document.activeElement === inputEl,
+                    hasLabel: label !== null && label !== '',
+                };
+            }, i);
+
+            expect(domInfo.isFocused).toBe(true);
+            expect(domInfo.hasLabel).toBe(true);
+        }
+    });
+});

package.json

@@ -90,7 +90,7 @@
     "@prettier/plugin-php": "^0.22.2",
     "accessibility-js-routines": "^3.4.1",
     "babel-preset-env": "^1.7.0",
-    "chromedriver": "124.0",
+    "chromedriver": "^126.0.1",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",

sitemap.txt

@@ -2,6 +2,7 @@ https://www.useragentman.com/enable/index.php
 https://www.useragentman.com/enable/accessible-text-svg.php
 https://www.useragentman.com/enable/alert.php
 https://www.useragentman.com/enable/animated-gif-with-pause-button.php
+https://www.useragentman.com/enable/autocomplete.php
 https://www.useragentman.com/enable/button.php
 https://www.useragentman.com/enable/carousel.php
 https://www.useragentman.com/enable/checkbox.php

templates/data/meta-info.json

@@ -29,6 +29,10 @@
     "desc": "",
     "wip": true
   },
+  "autocomplete.php": {
+    "title": "Autocomplete Form",
+    "desc": "A form with autocomplete fields that are accessible to screen reader users."
+  },
   "bottom-fixed-navigation.php": {
     "title": "Accessible Bottom Fixed Navigation",
     "desc": "Making fixed navigation on the bottom (like Instagram's) accessible is possible using skip links.",

templates/includes/documentation-header.php

@@ -271,6 +271,14 @@ class="enable-flyout enable-flyout__level enable-flyout__dropdown">
                                             "alt": ""
                                         }
                                     },
+                                    {
+                                        "id": "flyout__link",
+                                        "props": {
+                                            "label": "Autocomplete Form",
+                                            "url-slug": "autocomplete",
+                                            "alt": ""
+                                        }
+                                    },
                                     {
                                         "id": "flyout__link",
                                         "props": {