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 <[email protected]>

Author: nschonni

.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

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>

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": {