Fix tabpanel role invalid on a list element (#1770)

elixir-lang · Sep 13, 2023 · 4726b40 · 4726b40
1 parent 9a80310
commit 4726b40
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/lib/ex_doc/formatter/html/templates/sidebar_template.eex b/lib/ex_doc/formatter/html/templates/sidebar_template.eex
@@ -40,37 +40,43 @@
     </div>
     <ul id="sidebar-listNav" class="sidebar-listNav" role="tablist">
       <li>
-        <button id="extras-list-tab-button" role="tab" data-type="extras" aria-controls="extras-full-list" aria-selected="true" tabindex="0">
+        <button id="extras-list-tab-button" role="tab" data-type="extras" aria-controls="extras-tab-panel" aria-selected="true" tabindex="0">
           <%= config.extra_section || "Pages" %>
         </button>
       </li>
 
       <%= if nodes_map.modules != [] do %>
         <li>
-          <button id="modules-list-tab-button" role="tab" data-type="modules" aria-controls="modules-full-list" aria-selected="false" tabindex="-1">
+          <button id="modules-list-tab-button" role="tab" data-type="modules" aria-controls="modules-tab-panel" aria-selected="false" tabindex="-1">
             Modules
           </button>
         </li>
       <% end %>
 
       <%= if nodes_map.tasks != [] do %>
         <li>
-          <button id="tasks-list-tab-button" role="tab" data-type="tasks" aria-controls="tasks-full-list" aria-selected="false" tabindex="-1">
+          <button id="tasks-list-tab-button" role="tab" data-type="tasks" aria-controls="tasks-tab-panel" aria-selected="false" tabindex="-1">
             <span translate="no">Mix</span> Tasks
           </button>
         </li>
       <% end %>
     </ul>
   </div>
 
-  <ul id="extras-full-list" class="full-list" role="tabpanel" aria-labelledby="extras-list-tab-button"></ul>
+  <div id="extras-tab-panel" role="tabpanel" aria-labelledby="extras-list-tab-button">
+    <ul id="extras-full-list" class="full-list"></ul>
+  </div>
 
   <%= if nodes_map.modules != [] do %>
-    <ul id="modules-full-list" class="full-list" role="tabpanel" aria-labelledby="modules-list-tab-button" hidden></ul>
+    <div id="modules-tab-panel" role="tabpanel" aria-labelledby="modules-list-tab-button" hidden>
+      <ul id="modules-full-list" class="full-list"></ul>
+    </div>
   <% end %>
 
   <%= if nodes_map.tasks != [] do %>
-    <ul id="tasks-full-list" class="full-list" role="tabpanel" aria-labelledby="tasks-list-tab-button" hidden></ul>
+    <div id="tasks-tab-panel" role="tabpanel" aria-labelledby="tasks-list-tab-button" hidden>
+      <ul id="tasks-full-list" class="full-list"></ul>
+    </div>
   <% end %>
 
 </nav>

diff --git a/test/ex_doc/formatter/html/templates_test.exs b/test/ex_doc/formatter/html/templates_test.exs
@@ -243,13 +243,11 @@ defmodule ExDoc.Formatter.HTML.TemplatesTest do
         })
 
       assert content =~
-               ~r{<li>[\s\n]*<button id="modules-list-tab-button" role="tab" data-type="modules" aria-controls="modules-full-list" aria-selected="false" tabindex="-1">[\s\n]*Modules[\s\n]*</button>[\s\n]*</li>}
+               ~r{<li>[\s\n]*<button id="modules-list-tab-button" role="tab" data-type="modules" aria-controls="modules-tab-panel" aria-selected="false" tabindex="-1">[\s\n]*Modules[\s\n]*</button>[\s\n]*</li>}
 
       assert content =~
-               ~r{<ul id="modules-full-list" class="full-list" role="tabpanel" aria-labelledby="modules-list-tab-button" hidden></ul>}
+               ~r{<div id="modules-tab-panel" role="tabpanel" aria-labelledby="modules-list-tab-button" hidden>[\n\s]*<ul id="modules-full-list" class="full-list"></ul>[\n\s]*</div>}
 
-      refute content =~ ~r{id="exceptions-list-tab-button">}
-      refute content =~ ~r{id="exceptions-full-list">}
       refute content =~ ~r{id="tasks-list-tab-button"}
       refute content =~ ~r{id="tasks-full-list"}
     end