chore: add <main> to playground page

Add a main region so there's at least one page region/ARIA landmark.
Trott · May 25, 2024 · 6958f3f · 6958f3f
1 parent b0541f1
commit 6958f3f
Showing 1 changed file with 49 additions and 47 deletions.
diff --git a/index.html b/index.html
@@ -6,53 +6,55 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
-		<h1>Playground for slug module</h1>
-    <form id="form" onSubmit="" style="max-width:60ch">
-			<fieldset>
-
-				<label for="input">Input text</label>
-				<input type="text" id="input" placeholder="An Apple computer" autofocus>
-			</fieldset>
-
-			<fieldset>
-				<label for="replacement">Replacement character</label>
-				<input type="text" id="replacement" name="replacement" placeholder="-">
-			</fieldset>
-
-			<fieldset>
-			<label>
-				<input type="checkbox" name="lowercase" checked> Lowercase
-			</label>
-			</fieldset>
-
-			<fieldset>
-			<label>
-				<input type="checkbox" name="trim" checked> Trim leading and trailing replacement characters
-			</label>
-			</fieldset>
-
-			<fieldset>
-			<label>
-				<input type="checkbox" name="fallback" checked> Fallback
-			</label>
-			</fieldset>
-
-			<details>
-				<summary>Advanced options</summary>
-			 <fieldset style="display: flex; justify-content: flex-start; align-items: center">
-        <label for="remove">Remove chars (regex)</label>&nbsp;
-        /<input type="text" id="remove" name="remove" placeholder="(?<= )((a)|(an)|(the))(?= )">/<br>
-        <label> <input type="checkbox" name="regex_g"> g </label>
-
-        <label> <input type="checkbox" name="regex_i"> i </label>
-      </fieldset>
-			</details>
-
-      <input type="submit" value="Slug it">
-
-    </form>
-    <p>Result: <span id="slugOutput"></span></p>
-    <script src="./slug.js"></script>
+		<main>
+			<h1>Playground for slug module</h1>
+			<form id="form" onSubmit="" style="max-width:60ch">
+				<fieldset>
+
+					<label for="input">Input text</label>
+					<input type="text" id="input" placeholder="An Apple computer" autofocus>
+				</fieldset>
+
+				<fieldset>
+					<label for="replacement">Replacement character</label>
+					<input type="text" id="replacement" name="replacement" placeholder="-">
+				</fieldset>
+
+				<fieldset>
+				<label>
+					<input type="checkbox" name="lowercase" checked> Lowercase
+				</label>
+				</fieldset>
+
+				<fieldset>
+				<label>
+					<input type="checkbox" name="trim" checked> Trim leading and trailing replacement characters
+				</label>
+				</fieldset>
+
+				<fieldset>
+				<label>
+					<input type="checkbox" name="fallback" checked> Fallback
+				</label>
+				</fieldset>
+
+				<details>
+					<summary>Advanced options</summary>
+				<fieldset style="display: flex; justify-content: flex-start; align-items: center">
+					<label for="remove">Remove chars (regex)</label>&nbsp;
+					/<input type="text" id="remove" name="remove" placeholder="(?<= )((a)|(an)|(the))(?= )">/<br>
+					<label> <input type="checkbox" name="regex_g"> g </label>
+
+					<label> <input type="checkbox" name="regex_i"> i </label>
+				</fieldset>
+				</details>
+
+				<input type="submit" value="Slug it">
+
+			</form>
+			<p>Result: <span id="slugOutput"></span></p>
+		</main>
+		<script src="./slug.js"></script>
     <script src="./playground.js"></script>
   </body>
 </html>