fix basic axe violations on example page

keithamus · keithamus · commit 8bfe85059052 · 2023-06-02T15:22:00.000+01:00
diff --git a/examples/index.html b/examples/index.html
@@ -1,15 +1,20 @@
-<!doctype html>
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <title>&lt;auto-check&gt; element</title>
-    <style>auto-check {display: block;}</style>
+    <style>
+      auto-check {
+        display: block;
+      }
+    </style>
   </head>
   <body>
     <h1>Simple form</h1>
     <p>Input 422 for an error response.</p>
     <form>
+      <label for="simple-field">Input</label>
       <auto-check csrf="foo" src="/demo" required>
-        <input autofocus name="foo" required>
+        <input id="simple-field" autofocus name="foo" required />
         <code class="state"></code>
       </auto-check>
       <button>submit</button>
@@ -18,8 +23,9 @@ <h1>Simple form</h1>
     <h1>Form that has custom validity messages</h1>
     <p>Input 422 for an error response.</p>
     <form id="custom">
+      <label for="custom-field">Input</label>
       <auto-check csrf="foo" src="/demo" required>
-        <input autofocus class="json" name="foo" required>
+        <input id="custom-field" autofocus class="json" name="foo" required />
         <code class="state"></code>
       </auto-check>
       <button>submit</button>
@@ -28,7 +34,7 @@ <h1>Form that has custom validity messages</h1>
     <script>
       let focusedInput
       const nativeFetch = window.fetch
-      const fakeFetch = function(_, options) {
+      const fakeFetch = function (_, options) {
         const path = `https://httpbin.org/status/${options.body.get('value') === '422' ? '422' : '200'}`
         return nativeFetch(path, options)
       }
