fix: Make "navskip" apply to all headings in an element (#5364)

Fixes #5291

ietf/static/js/ietf.js

@@ -154,9 +154,10 @@ $(document)
 $(function () {
     const contentElement = $('#content.ietf-auto-nav');
     if (contentElement.length > 0) {
-        const heading_selector = "h2:not([style='display:none']):not(.navskip), h3:not([style='display:none']):not(.navskip), h4:not([style='display:none']):not(.navskip), h5:not([style='display:none']):not(.navskip), h6:not([style='display:none']):not(.navskip), .nav-heading:not([style='display:none']):not(.navskip)";
+        const heading_selector = ":is(h2, h3, h4, h5, h6, .nav-heading):not([style='display:none']):not(.navskip)";
         const headings = contentElement
-            .find(heading_selector);
+            .find(heading_selector)
+            .filter((i, el) => !el.closest(".navskip"));
 
         const contents = (headings.length > 0) &&
             ($(headings)
@@ -195,7 +196,7 @@ $(function () {
                 .children()
                 .last();
 
-            populate_nav(nav[0], heading_selector);
+            populate_nav(nav[0], headings.toArray());
 
             if (haveExtraNav) {
                 $('#righthand-panel').append('<div id="righthand-extra" class="w-100 py-3"></div>');

ietf/static/js/nav.js

@@ -21,9 +21,8 @@ function get_level(el) {
     return h.charAt(h.length - 1);
 }
 
-export function populate_nav(nav, heading_selector, classes) {
+export function populate_nav(nav, headings, classes) {
     // Extract section headings from document
-    const headings = document.querySelectorAll(heading_selector);
     const min_level = Math.min(...Array.from(headings)
         .map(get_level));
 

ietf/templates/meeting/important-dates.html

@@ -81,7 +81,7 @@
             </table>
         {% endif %}
     {% endfor %}
-    <div id="cal" class="mt-5"></div>
+    <div id="cal" class="navskip mt-5"></div>
 {% endblock %}
 {% block js %}
     <script src="{% static "ietf/js/list.js" %}"></script>