Fix up HTML issues found by w3c validator

I'm trying to debug an odd issue, so I ran the major pages of the site through the w3c validator. It didn't help my issue, but it's still worth fixing these HTML spec violations up.
pdobb · Oct 25, 2024 · ae7bf69 · ae7bf69
1 parent 6235829
commit ae7bf69
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 23 deletions.
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
@@ -126,7 +126,7 @@
     Example Usage:
       <dfn
         data-tooltip="up-left"
-        aria-label="..."
+        data-tooltip-text="..."
         class="after:w-80"
       >...</dfn>
   */
@@ -144,7 +144,7 @@
       @apply size-3 content-[""] rotate-45 bg-neutral-900;
     }
     &::after {
-      @apply content-[attr(aria-label)] my-1.5 p-4 rounded-md
+      @apply content-[attr(data-tooltip-text)] my-1.5 p-4 rounded-md
         bg-neutral-900 font-normal text-gray-200;
     }
 

diff --git a/app/views/application/_collapse_container.html.erb b/app/views/application/_collapse_container.html.erb
@@ -10,8 +10,10 @@
   class="space-y-6"
 >
   <button
+    id="<%= view.button_id %>"
     data-collapse-target="button"
     data-action="collapse#toggle"
+    aria-controls="<%= view.content_id %>"
     aria-label="Toggle <%= view.button_text %>"
     aria-haspopup="true"
     aria-expanded="<%= view.open? %>"
@@ -30,15 +32,17 @@
   </button>
 
   <div
+    id="<%= view.content_id %>"
     data-collapse-target="section"
     data-transition-enter="transition ease-out duration-100"
     data-transition-enter-start="transform opacity-0 scale-95"
     data-transition-enter-end="transform opacity-100 scale-100"
     data-transition-leave="transition ease-in duration-75"
     data-transition-leave-start="transform opacity-100 scale-100"
     data-transition-leave-end="transform opacity-0 scale-95"
+    role="region"
+    aria-labelledby="<%= view.button_id %>"
     aria-hidden="<%= view.collapsed? %>"
-    aria-orientation="vertical"
     class="<%= class_names(view.section_css_class) %>"
   >
     <%= yield %>

diff --git a/app/views/games/_game.html.erb b/app/views/games/_game.html.erb
@@ -56,7 +56,6 @@
           <time
             data-elapsed-time-target="elapsedTime"
             datetime="PT<%= view.elapsed_time.to_i %>S"
-            aria-label="Elapsed Time"
           ><%= view.elapsed_time %></time>
         </div>
       </div>

diff --git a/app/views/games/_results.html.erb b/app/views/games/_results.html.erb
@@ -44,7 +44,7 @@
                 <th>
                   <dfn
                     data-tooltip="up-left"
-                    aria-label="<%= t("terms.score") %>"
+                    data-tooltip-text="<%= t("terms.score") %>"
                     class="after:w-80"
                   >Score</dfn>
                 </th>
@@ -54,7 +54,7 @@
                 <th>
                   <dfn
                     data-tooltip="up-left"
-                    aria-label="<%= t("terms.bbbv") %>"
+                    data-tooltip-text="<%= t("terms.bbbv") %>"
                     class="after:w-80"
                   >3BV</dfn>
                 </th>
@@ -64,7 +64,7 @@
                 <th>
                   <dfn
                     data-tooltip="up-left"
-                    aria-label="<%= t("terms.bbbvps") %>"
+                    data-tooltip-text="<%= t("terms.bbbvps") %>"
                     class="after:w-80"
                   >3BV/s</dfn>
                 </th>
@@ -74,7 +74,7 @@
                 <th>
                   <dfn
                     data-tooltip="up-left"
-                    aria-label="<%= t("terms.efficiency") %>"
+                    data-tooltip-text="<%= t("terms.efficiency") %>"
                     class="after:w-80"
                   >Efficiency</dfn>
                 </th>
@@ -86,7 +86,7 @@
               <td><%= stats.clicks_count %></td>
             </tr>
             <tr>
-              <td colspan="100%">
+              <td colspan="2">
                 <table
                   class="
                     border-separate
@@ -100,7 +100,7 @@
                       <th class="pl-6">
                         <dfn
                           data-tooltip="up-left"
-                          aria-label="<%= t("terms.reveals") %>"
+                          data-tooltip-text="<%= t("terms.reveals") %>"
                           class="after:w-80"
                         >Reveals</dfn>
                       </th>
@@ -110,7 +110,7 @@
                       <th class="pl-6">
                         <dfn
                           data-tooltip="up-left"
-                          aria-label="<%= t("terms.chords") %>"
+                          data-tooltip-text="<%= t("terms.chords") %>"
                           class="after:w-80"
                         >Chords</dfn>
                       </th>

diff --git a/app/views/games/rules.rb b/app/views/games/rules.rb
@@ -13,6 +13,9 @@ def initialize(context:)
 
   def cookie_name = COOKIE_NAME
 
+  def button_id = @button_id ||= "rules_button-#{Time.new.to_i}"
+  def content_id = @content_id ||= "rules_content-#{Time.new.to_i}"
+
   def button_text = "Rules of Engagement"
 
   def button_css_class

diff --git a/app/views/home/_page_nav.html.erb b/app/views/home/_page_nav.html.erb
@@ -3,7 +3,7 @@
 <% if nav.previous_game? %>
   <div
     class="
-      group-has-[banner]:hidden
+      group-has-[role='banner']:hidden
       absolute -top-8 flex items-center gap-x-3
       *:text-gray-500 *:dark:text-neutral-400
       *:no-underline

diff --git a/app/views/layouts/_banner.html.erb b/app/views/layouts/_banner.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (banner:) %>
 
-<banner
-  role="alert"
+<div
+  role="banner"
   data-controller="banner"
   <% if banner.permanently_dismissable? %>
     data-banner-permanently-dismissable-value="<%= banner.permanently_dismissable? %>"
@@ -36,4 +36,4 @@
       </button>
     <% end %>
   </div>
-</banner>
+</div>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
@@ -51,7 +51,7 @@
                 <td><%= @view.losing_games_count %></td>
               </tr>
 
-              <tr><td colspan="100%" class="select-none">&nbsp;</td></tr>
+              <tr><td colspan="2" class="select-none">&nbsp;</td></tr>
 
               <tr>
                 <th>Cells Revealed</th>
@@ -61,7 +61,7 @@
                 <th>
                   <dfn
                     data-tooltip="up-left"
-                    aria-label="<%= t("terms.chords") %>"
+                    data-tooltip-text="<%= t("terms.chords") %>"
                     class="after:w-80"
                   >Chords</dfn>
                 </th>
@@ -96,10 +96,10 @@
           >
             <tbody>
               <tr>
-                <th>
+                <th colspan="2">
                   <dfn
                     data-tooltip="up-left"
-                    aria-label="<%= t("terms.score") %>"
+                    data-tooltip-text="<%= t("terms.score") %>"
                     class="after:w-80"
                   >Score</dfn>
                 </th>
@@ -117,10 +117,10 @@
                 <td><%= @view.best_expert_score %></td>
               </tr>
               <tr>
-                <th>
+                <th colspan="2">
                   <dfn
                     data-tooltip="up-left"
-                    aria-label="<%= t("terms.bbbvps") %>"
+                    data-tooltip-text="<%= t("terms.bbbvps") %>"
                     class="after:w-80"
                   >3BV/s</dfn>
                 </th>
@@ -138,10 +138,10 @@
                 <td><%= @view.best_expert_bbbvps %></td>
               </tr>
               <tr>
-                <th>
+                <th colspan="2">
                   <dfn
                     data-tooltip="up-left"
-                    aria-label="<%= t("terms.efficiency") %>"
+                    data-tooltip-text="<%= t("terms.efficiency") %>"
                     class="after:w-80"
                   >Efficiency</dfn>
                 </th>