Infrastructure: Add additional HTML checking with HTMLHint (pull #1608)

* chore: Closed TDs
* chore: Double quote data attributes
* chore: Fix implicit closing tags
* chore: onKeyDown -> onkeydown
* chore: Remove unescaped >
* chore: H3 -> h3
* chore: Escape greater than symbols in code blocks
* Intrastructure: Add HTMLHint
* chore: Explicit closing tags in example code

Co-authored-by: Matt King <a11yThinker@Gmail.com>

.github/workflows/htmlhint-problem-matcher.json

@@ -0,0 +1,16 @@
+{
+  "problemMatcher": [
+    {
+      "owner": "htmlhint",
+      "pattern": [
+        {
+          "regexp": "^(.*):(\\d+):(\\d+):\\s+(.*)$",
+          "file": 1,
+          "line": 2,
+          "column": 3,
+          "message": 4
+        }
+      ]
+    }
+  ]
+}

.github/workflows/lint-html.yml

@@ -5,20 +5,24 @@ on:
       - "dependabot/**"
     paths:
       - "package*.json"
+      - ".htmlhintrc"
       - ".vnurc"
       - "aria-practices.html"
       - "examples/**/*.html"
       - ".github/workflows/lint-html.yml"
       - ".github/workflows/vnu-jar-problem-matcher.json"
+      - ".github/workflows/htmlhint-problem-matcher.json"
 
   pull_request:
     paths:
       - "package*.json"
+      - ".htmlhintrc"
       - ".vnurc"
       - "aria-practices.html"
       - "examples/**/*.html"
       - ".github/workflows/lint-html.yml"
       - ".github/workflows/vnu-jar-problem-matcher.json"
+      - ".github/workflows/htmlhint-problem-matcher.json"
 
 jobs:
   lint-html:
@@ -37,4 +41,5 @@ jobs:
       - name: HTML Validator
         run: |
           echo "::add-matcher::.github/workflows/vnu-jar-problem-matcher.json"
+          echo "::add-matcher::.github/workflows/htmlhint-problem-matcher.json"
           npm run lint:html

.htmlhintrc

@@ -0,0 +1,3 @@
+{
+  "attr-lowercase": ["viewBox"]
+}

aria-practices-DeletedSectionsArchive.html

@@ -1864,7 +1864,7 @@ <h3>Managing Focus in Dialogs</h3>
       <p>
         Search the contents of the dialog container to find the first and last tab focusable elements.
         This can be implemented by walking the DOM tree of the dialog container to find all visible and enabled anchor elements, input elements, and all elements that have a tabindex value greater than or equal to 0.
-        Remember that elements with a tabindex > 0 will appear in the tab order before all other focusable elements in ascending order by tabindex.
+        Remember that elements with a tabindex &gt; 0 will appear in the tab order before all other focusable elements in ascending order by tabindex.
         Store the first and last tab focusable items within variables in the scope of the dialog box code.
       </p>
 
@@ -1964,7 +1964,7 @@ <h3>Managing Focus in Dialogs</h3>
 </pre>
     </section>
     <section id="keyboard_js_tips">
-      <H3>Other Keyboard Interface Development Tips</H3>
+      <h3>Other Keyboard Interface Development Tips</h3>
 
       <p class="note">MCK: this section is a collection of keyboard related old content with a yet undecided fate.</p>
 
@@ -2185,12 +2185,12 @@ <h4> The Owns Relationship</h4>
 <p>First, consider the preferred method for using the W3C DOM to describe the relationship between
   <span class="role-reference">radiogroup</span> and <span class="role-reference">radio</span>  roles for HTML:</p>
 <pre>
-&lt;div id="radio_label">My radio label&lt;/div>
-&lt;ul role="radiogroup" aria-labelledby="radio_label">
-&lt;li role="radio">Item #1&lt;/li>
-&lt;li role="radio">Item #2&lt;/li>
-&lt;li role="radio">Item #3&lt;/li>
-&lt;/ul>
+&lt;div id="radio_label"&gt;My radio label&lt;/div&gt;
+&lt;ul role="radiogroup" aria-labelledby="radio_label"&gt;
+&lt;li role="radio"&gt;Item #1&lt;/li&gt;
+&lt;li role="radio"&gt;Item #2&lt;/li&gt;
+&lt;li role="radio"&gt;Item #3&lt;/li&gt;
+&lt;/ul&gt;
 </pre>
 <p>
 In this example, the elements with <code>role="radio"</code> are child nodes of the parent <code>role="radiogroup"</code> element node.

examples/combobox/combobox-datepicker.html

@@ -42,7 +42,7 @@ <h1>Date Picker Combobox Example</h1>
       <li><a href="combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>
       <li><a href="grid-combo.html">Editable Combobox with Grid Popup</a>: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.</li>
     </ul>
-    
+
   <section>
     <div class="example-header">
       <h2 id="ex_label">Example</h2>
@@ -214,7 +214,7 @@ <h2>Accessibility Features</h2>
     <ul>
      <li>The description of the date format is associated with the combobox via <code>aria-describedby</code>, making it available to assistive technologies as an accessible description.</li>
       <li>
-        While the down arrow icon is excluded from the <kbd>Tab</kbd> sequence as specified in the <code>combobox</code> design pattern, it is made accessible to assistive technologies as the Choose Date button. 
+        While the down arrow icon is excluded from the <kbd>Tab</kbd> sequence as specified in the <code>combobox</code> design pattern, it is made accessible to assistive technologies as the Choose Date button.
         This enables assistive technology users who might not have a keyboard, e.g., someone using a touch-based screen reader, to open the date picker dialog.
       </li>
       <li>In the dialog, shortcut keys are assigned to the additional buttons for changing the month and year displayed in the calendar.</li>
@@ -339,7 +339,8 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                 <li>Selects the date.</li>
                 <li>Updates the value of the <code>combobox</code> with the selected date.</li>
               </ul>
-          </td>
+            </td>
+          </tr>
           <tr data-test-id="grid-return">
             <th><kbd>Enter</kbd></th>
             <td>
@@ -483,7 +484,7 @@ <h3 id="rps_label_combobox">Combobox</h3>
             <th scope="row"><code>aria-expanded="true"</code></th>
             <td><code>input</code></td>
             <td>
-              Indicates that the combobox is expanded, i.e., the &quot;Choose Date&quot; dialog is open. 
+              Indicates that the combobox is expanded, i.e., the &quot;Choose Date&quot; dialog is open.
             </td>
           </tr>
           <tr data-test-id="textbox-aria-autocomplete">

examples/dialog-modal/dialog.html

@@ -133,7 +133,7 @@ <h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
                 <li>The larger a focusable element is, the more difficult it is to visually
                   identify the location of focus, especially for users with a narrow field of view.</li>
                 <li>The dialog has a visual border, so creating a clear visual indicator of focus
-                  when the entire dialog has focus is not very feasible.
+                  when the entire dialog has focus is not very feasible.</li>
                 <li>Screen readers read the label and content of focusable elements. The dialog
                   contains its label and a lot of content! If a dialog like this one has focus, the
                   actual focus is difficult to comprehend.</li>
@@ -198,7 +198,7 @@ <h2>Accessibility Features</h2>
               <ul>
                 <li>Initial focus is set on the first input, which is the first focusable element.</li>
                 <li>The dialog does not need <code>aria-describedby</code> since there is no static text that describes it.</li>
-                <li>When the dialog closes as a result of the <q>Cancel</q> action, the user's point of regard is maintained by returning focus to the <q>Add Delivery Address</q> button.
+                <li>When the dialog closes as a result of the <q>Cancel</q> action, the user's point of regard is maintained by returning focus to the <q>Add Delivery Address</q> button.</li>
                 <li>
                   When the dialog closes as a result of the <q>Add</q> action and the <q>Address Added</q> dialog replaces the <q>Add Delivery Address</q> dialog,
                   the <q>Add Delivery Address</q> dialog passes a reference to the <q>Add Delivery Address</q> button to the <q>Address Added</q> dialog

examples/index.html

@@ -792,4 +792,4 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
   </nav>
 
 
-</body></html>
+</body></html>

examples/js/notice.html

@@ -26,3 +26,4 @@
     </li>
     </ul>
 </details>
+</html>

examples/landmarks/HTML5.html

@@ -127,7 +127,7 @@ <h2 id="id3">Related Documents</h2>
               <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
               <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
-              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
               <li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
             </ul>

examples/landmarks/at.html

@@ -211,7 +211,7 @@ <h2 id="id3">Related Documents</h2>
               <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
               <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
-              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
               <li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
             </ul>

examples/landmarks/banner.html

@@ -122,7 +122,7 @@ <h2 id="id3">Related Documents</h2>
               <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
               <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
-              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
               <li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
             </ul>

examples/landmarks/complementary.html

@@ -184,7 +184,7 @@ <h2 id="id3">Related Documents</h2>
               <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
               <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
-              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
               <li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
             </ul>

examples/landmarks/contentinfo.html

@@ -127,7 +127,7 @@ <h2 id="id3">Related Documents</h2>
               <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
               <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
-              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
               <li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
             </ul>

examples/landmarks/form.html

@@ -281,7 +281,7 @@ <h2 id="id3">Related Documents</h2>
               <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
               <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
-              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
               <li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
             </ul>

examples/landmarks/index.html

@@ -123,7 +123,7 @@ <h2 id="id3">Related Documents</h2>
               <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
               <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
-              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
               <li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
             </ul>

examples/landmarks/main.html

@@ -183,7 +183,7 @@ <h2 id="id3">Related Documents</h2>
               <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
               <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
-              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/aria-in-html/">Using ARIA in HTML</a></li>
               <li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
             </ul>

examples/landmarks/navigation.html

@@ -196,7 +196,7 @@ <h2 id="id3">Related Documents</h2>
               <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
               <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
-              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
               <li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
             </ul>

examples/landmarks/region.html

@@ -83,7 +83,7 @@ <h3>HTML Example: Using <code>section[aria-labelledby]</code> attribute</h3>
                     &nbsp;&nbsp;<strong>&lt;/section&gt;</strong>
                     <br>
                     <br>
-                    &nbsp;&nbsp;<strong>&lt;section aria-labelledby="region2">&gt;</strong>
+                    &nbsp;&nbsp;<strong>&lt;section aria-labelledby="region2"&gt;</strong>
                     <br>
                     <br>
                     &nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 <strong>id="region2"</strong>&gt;title for region area 2&lt;/h2&gt;
@@ -154,7 +154,7 @@ <h3>HTML Example: Using <code>section[title]</code> attribute</h3>
                     &nbsp;&nbsp;<strong>&lt;/section&gt;</strong>
                     <br>
                     <br>
-                    &nbsp;&nbsp;<strong>&lt;section title="title for region area 2">&gt;</strong>
+                    &nbsp;&nbsp;<strong>&lt;section title="title for region area 2"&gt;</strong>
                     <br>
                     <br>
                     &nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;title for region area 2&lt;/h2&gt;
@@ -232,7 +232,7 @@ <h2 id="id3">Related Documents</h2>
               <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
               <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
-              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
               <li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
             </ul>

examples/landmarks/resources.html

@@ -102,7 +102,7 @@ <h2 id="id3">Related Documents</h2>
               <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
               <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
-              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
               <li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
             </ul>

examples/landmarks/search.html

@@ -115,7 +115,7 @@ <h2 id="id3">Related Documents</h2>
               <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
               <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
-              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+              <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
               <li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
             </ul>

examples/link/link.html

@@ -60,7 +60,7 @@ <h2 id="ex_label">Examples</h2>
                 tabindex="0"
                 role="link"
                 onclick="goToLink(event, 'http://www.w3.org/')"
-                onKeyDown="goToLink(event, 'http://www.w3.org/')">
+                onkeydown="goToLink(event, 'http://www.w3.org/')">
               W3C website
             </span>
           </td>
@@ -77,7 +77,7 @@ <h2 id="ex_label">Examples</h2>
               tabindex="0"
               role="link"
               onclick="goToLink(event, 'http://www.w3.org/')"
-              onKeyDown="goToLink(event, 'http://www.w3.org/')"
+              onkeydown="goToLink(event, 'http://www.w3.org/')"
               src="images/w3c-logo.png"
               alt="W3C Website">
           </td>
@@ -95,7 +95,7 @@ <h2 id="ex_label">Examples</h2>
               role="link"
               class="link3"
               onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
-              onKeyDown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
+              onkeydown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
               aria-label="W3C website"></span>
           </td>
         </tr>
@@ -167,6 +167,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
           <td><code>span</code></td>
           <td>
             Example 3: Defines the accessible name of the link.
+          </td>
         </tr>
       </tbody>
     </table>

examples/menubar/mb-about.html

@@ -12,19 +12,19 @@ <h1>Menubar Example Landing Page</h1>
     </header>
     <main>
         <h1 id="about">About</h1>
-        <p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
+        <p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a></p>
 
         <h2 id="overview">Overview</h2>
-        <p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
+        <p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a></p>
 
         <h2 id="admin">Administration</h2>
-        <p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
+        <p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a></p>
 
         <h2 id="facts">Facts</h2>
-        <p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
+        <p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a></p>
 
         <h2 id="tours">Campus Tours</h2>
-        <p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a>
+        <p><a href="menubar-navigation.html#code-ex-1">Back to <code>menubar</code> example</a></p>
 
     </main>
 </body>