diff --git a/lib/ex_doc/formatter/html/templates/sidebar_template.eex b/lib/ex_doc/formatter/html/templates/sidebar_template.eex
index ac59356b3..17223ca03 100644
--- a/lib/ex_doc/formatter/html/templates/sidebar_template.eex
+++ b/lib/ex_doc/formatter/html/templates/sidebar_template.eex
@@ -40,14 +40,14 @@
     </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>
@@ -55,7 +55,7 @@
 
       <%= 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>
@@ -63,14 +63,20 @@
     </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
index 641937e11..a9e57705b 100644
--- 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