Contain all visible content in landmark regions

We had some WCAG violations about content not being contained by landmark regions. This adds all visible content into `header` or `main`. We can add a `footer` or other regions later if/when useful https://dequeuniversity.com/rules/axe/4.9/landmark-one-main?application=AxeChrome
dxw · May 22, 2024 · 3c24261 · 3c24261
1 parent bceda34
commit 3c24261
Showing 1 changed file with 26 additions and 23 deletions.
diff --git a/client/index.html b/client/index.html
@@ -18,30 +18,33 @@
     <meta name="theme-color" content="#f9f8f5">
   </head>
   <body>
-    <div id="connection-status-icon">Not connected 🔴</div>
-    <div id="player-name"></div>
+    <header>
+      <div id="connection-status-icon">Not connected 🔴</div>
+      <div id="player-name"></div>
+      <h1>Colour Me Knowledgeable!</h1>
+    </header>
 
-    <h1>Colour Me Knowledgeable!</h1>
-
-    <form id="name-form">
-      <input id="name" type="text" />
-      <label for="name">Display name</label>
-
-      <button type="submit">Join game</button>
-    </form>
-
-    <h2>Players</h2>
-
-    <ul id="player-list"></ul>
-
-    <button id="start-button" style="display: none">Start game!</button>
-
-    <section>
-      <p id="question"></p>
-      <p id="number"></p>
-    </section>
-
-    <section id="colour-section"></section>
+    <main>  
+      <form id="name-form">
+        <input id="name" type="text" />
+        <label for="name">Display name</label>
+
+        <button type="submit">Join game</button>
+      </form>
+
+      <h2>Players</h2>
+
+      <ul id="player-list"></ul>
+
+      <button id="start-button" style="display: none">Start game!</button>
+
+      <section>
+        <p id="question"></p>
+        <p id="number"></p>
+      </section>
+
+      <section id="colour-section"></section>
+    </main>
 
     <template id="checkbox-template">
       <form id="checkbox-form" class="answer-form">