From f8cdf1cb3d24a7c225a2d9ce2086578b76ee7f7e Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Sun, 13 Dec 2020 23:04:49 -0500
Subject: [PATCH] Infrastructure: Add CI to auto-generate examples/index.html
 when a PR would change it (pull #1524)

Resolves #1079:
* chore: GitHub Action to check examples index.html
* fix: sync examples/index.html
* chore: run lint-staged for reference-table files

Co-authored-by: Matt King <a11yThinker@Gmail.com>
---
 .github/workflows/examples.yml | 33 ++++++++++++++++++++++++
 examples/index.html            | 46 +++++++++++++++++-----------------
 package.json                   |  5 ++++
 3 files changed, 61 insertions(+), 23 deletions(-)
 create mode 100644 .github/workflows/examples.yml

diff --git a/.github/workflows/examples.yml b/.github/workflows/examples.yml
new file mode 100644
index 0000000000..58fe12d5cf
--- /dev/null
+++ b/.github/workflows/examples.yml
@@ -0,0 +1,33 @@
+name: Check examples/index.html
+
+on:
+  push:
+    branches-ignore:
+      - "dependabot/**"
+    paths:
+      - "package*.json"
+      - ".github/workflows/examples.yml"
+      - "examples/**"
+      - "scripts/reference-tables.*"
+  pull_request:
+    paths:
+      - "package*.json"
+      - ".github/workflows/examples.yml"
+      - "examples/**"
+      - "scripts/reference-tables.*"
+
+jobs:
+  examples:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Generate examples/index.html
+        run: npm run reference-tables
+
+      - name: Ensure no git changes
+        run: git diff --exit-code
diff --git a/examples/index.html b/examples/index.html
index 4e78f6c016..139b6430f7 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -131,7 +131,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>group</code></td>
             <td>
               <ul>
-                <li><a href="carousel/carousel-1.html">Auto-Rotating Image Carousel</a></li>
+                <li><a href="carousel/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
                 <li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox  (Two State)</a></li>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
@@ -237,8 +237,8 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>radio</code></td>
             <td>
               <ul>
-                <li><a href="radio/radio-1/radio-1.html">Radio Group  Using Roving tabindex</a></li>
-                <li><a href="radio/radio-2/radio-2.html">Radio Group  Using aria-activedescendant</a></li>
+                <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></li>
+                <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
             </td>
@@ -247,8 +247,8 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>radiogroup</code></td>
             <td>
               <ul>
-                <li><a href="radio/radio-1/radio-1.html">Radio Group  Using Roving tabindex</a></li>
-                <li><a href="radio/radio-2/radio-2.html">Radio Group  Using aria-activedescendant</a></li>
+                <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></li>
+                <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
             </td>
@@ -303,7 +303,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>tab</code></td>
             <td>
               <ul>
-                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
+                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a></li>
                 <li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
                 <li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
               </ul>
@@ -317,7 +317,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>tablist</code></td>
             <td>
               <ul>
-                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
+                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a></li>
                 <li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
                 <li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
               </ul>
@@ -327,7 +327,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>tabpanel</code></td>
             <td>
               <ul>
-                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
+                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a></li>
                 <li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
                 <li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
               </ul>
@@ -389,7 +389,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="listbox/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></li>
                 <li><a href="listbox/listbox-scrollable.html">Scrollable Listbox</a></li>
                 <li><a href="menu-button/menu-button-actions-active-descendant.html">Actions Menu Button  Using aria-activedescendant</a></li>
-                <li><a href="radio/radio-2/radio-2.html">Radio Group  Using aria-activedescendant</a></li>
+                <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></li>
               </ul>
             </td>
           </tr>
@@ -416,8 +416,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox  (Two State)</a></li>
                 <li><a href="checkbox/checkbox-2/checkbox-2.html">Checkbox  (Mixed-State)</a></li>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a></li>
-                <li><a href="radio/radio-1/radio-1.html">Radio Group  Using Roving tabindex</a></li>
-                <li><a href="radio/radio-2/radio-2.html">Radio Group  Using aria-activedescendant</a></li>
+                <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></li>
+                <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
             </td>
@@ -431,7 +431,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <li><a href="accordion/accordion.html">Accordion</a></li>
-                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
+                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a></li>
                 <li><a href="checkbox/checkbox-2/checkbox-2.html">Checkbox  (Mixed-State)</a></li>
                 <li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
                 <li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
@@ -537,8 +537,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-label</code></td>
             <td>
               <ul>
-                <li><a href="carousel/carousel-1.html">Auto-Rotating Image Carousel</a></li>
-                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
+                <li><a href="carousel/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
+                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a></li>
                 <li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox  (Two State)</a></li>
                 <li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
                 <li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
@@ -561,8 +561,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a></li>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a></li>
                 <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
-                <li><a href="radio/radio-1/radio-1.html">Radio Group  Using Roving tabindex</a></li>
-                <li><a href="radio/radio-2/radio-2.html">Radio Group  Using aria-activedescendant</a></li>
+                <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></li>
+                <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="table/table.html">Table</a></li>
                 <li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
@@ -597,8 +597,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="menu-button/menu-button-actions-active-descendant.html">Actions Menu Button  Using aria-activedescendant</a></li>
                 <li><a href="menu-button/menu-button-actions.html">Actions Menu Button  Using element.focus()</a></li>
                 <li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a></li>
-                <li><a href="radio/radio-1/radio-1.html">Radio Group  Using Roving tabindex</a></li>
-                <li><a href="radio/radio-2/radio-2.html">Radio Group  Using aria-activedescendant</a></li>
+                <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></li>
+                <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
                 <li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
@@ -631,8 +631,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <li><a href="alert/alert.html">Alert</a></li>
-                <li><a href="carousel/carousel-1.html">Auto-Rotating Image Carousel</a></li>
-                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
+                <li><a href="carousel/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
+                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a></li>
                 <li><a href="combobox/combobox-datepicker.html">Date Picker Combobox</a></li>
                 <li><a href="dialog-modal/datepicker-dialog.html">Date Picker Dialog</a></li>
               </ul>
@@ -682,8 +682,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-roledescription</code></td>
             <td>
               <ul>
-                <li><a href="carousel/carousel-1.html">Auto-Rotating Image Carousel</a></li>
-                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
+                <li><a href="carousel/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
+                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a></li>
               </ul>
             </td>
           </tr>
@@ -709,7 +709,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-selected</code></td>
             <td>
               <ul>
-                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
+                <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a></li>
                 <li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
                 <li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
                 <li><a href="combobox/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a></li>
diff --git a/package.json b/package.json
index 867b3d405f..4d28dc5ec8 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "lint:js": "npm run lint:es",
     "lint:html": "npm run vnu-jar",
     "lint:spelling": "cspell \"**/*.*\"",
+    "reference-tables": "node scripts/reference-tables.js",
     "regression": "ava --timeout=1m",
     "regression-report": "node test/util/report",
     "test": "npm run lint && npm run regression",
@@ -65,6 +66,10 @@
     "*.js": [
       "eslint --fix",
       "git add"
+    ],
+    "examples/**/*.html": [
+      "npm run reference-tables",
+      "git add examples/index.html"
     ]
   },
   "ava": {