diff --git a/client/src/entrypoints/admin/comments.js b/client/src/entrypoints/admin/comments.js
index dc95019787..ae4e15a893 100644
--- a/client/src/entrypoints/admin/comments.js
+++ b/client/src/entrypoints/admin/comments.js
@@ -260,7 +260,7 @@ window.comments = (() => {
     formElement.querySelectorAll('[data-component="add-comment-button"]').forEach(initAddCommentButton);
 
     // Attach the commenting app to the tab navigation, if it exists
-    const tabNavElement = formElement.querySelector('.tab-nav');
+    const tabNavElement = formElement.querySelector('[data-tab-nav]');
     if (tabNavElement) {
       commentApp.setCurrentTab(tabNavElement.dataset.currentTab);
       tabNavElement.addEventListener('switch', (e) => {
diff --git a/wagtail/admin/templates/wagtailadmin/edit_handlers/tabbed_interface.html b/wagtail/admin/templates/wagtailadmin/edit_handlers/tabbed_interface.html
index 1240418fe7..fce439e554 100644
--- a/wagtail/admin/templates/wagtailadmin/edit_handlers/tabbed_interface.html
+++ b/wagtail/admin/templates/wagtailadmin/edit_handlers/tabbed_interface.html
@@ -1,14 +1,15 @@
 {% load wagtailadmin_tags i18n %}
-<ul class="tab-nav merged" role="tablist" data-current-tab="{{ self.children.0.heading|cautious_slugify }}">
-    {% for child in self.children %}
-        <li class="{{ child.classes|join:" " }} {% if forloop.first %}active{% endif %}" role="tab" aria-controls="tab-{{ child.heading|cautious_slugify }}">
-            <a href="#tab-{{ child.heading|cautious_slugify }}" class="{% if forloop.first %}active{% endif %}" data-tab="{{ child.heading|cautious_slugify }}">{{ child.heading }}</a>
-        </li>
-    {% endfor %}
-
+<div class="tab-nav merged">
+    <ul data-tab-nav role="tablist" data-current-tab="{{ self.children.0.heading|cautious_slugify }}">
+        {% for child in self.children %}
+            <li class="{{ child.classes|join:" " }} {% if forloop.first %}active{% endif %}" role="tab" aria-controls="tab-{{ child.heading|cautious_slugify }}">
+                <a href="#tab-{{ child.heading|cautious_slugify }}" class="{% if forloop.first %}active{% endif %}" data-tab="{{ child.heading|cautious_slugify }}">{{ child.heading }}</a>
+            </li>
+        {% endfor %}
+    </ul>
     {% if self.show_comments_toggle %}
         {% with comments_number=self.form.formsets.comments|length %}
-            <li class="right wide">
+            <div class="right wide">
                 <div class="comments-controls">
                     <label class="comments-toggle" aria-label="{% trans 'Show comments' %}">
                         <input type="checkbox" {% if comments_number %}checked{% endif %}>
@@ -19,15 +20,23 @@
                     <div class="comment-notifications-toggle" {% if not comments_number %}hidden{% endif %}>
                         <label class="switch switch--teal-background">
                             {% trans "Comment notifications" %}
-                            {{ self.form.comment_notifications }}
+                            <input type="checkbox" checked>
                             <span class="switch__toggle"></span>
                         </label>
+
+                        <div class="comment-notifications-toggle" {% if not comments_number %}hidden{% endif %}>
+                            <label class="switch switch--teal-background">
+                                {% trans "Comment notifications" %}
+                                {{ self.form.comment_notifications }}
+                                <span class="switch__toggle"></span>
+                            </label>
+                        </div>
                     </div>
                 </div>
-            </li>
+            </div>
         {% endwith %}
     {% endif %}
-</ul>
+</div>
 
 <div class="tab-content tab-content--comments-enabled">
     {% for child in self.children %}