Fixed navigation outlines on focus

material/templates/base.html

@@ -44,7 +44,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.821ccc56.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.82baac91.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a5377069.min.css' | url }}">

material/templates/partials/nav-item.html

@@ -48,25 +48,26 @@
         {% endif %}
       {% endfor %}
     {% endif %}
-    {% if "navigation.sections" in features and level == 1 + (
+    {% set tabs = "navigation.tabs" in features %}
-      "navigation.tabs" in features
+    {% set sections = "navigation.sections" in features %}
-    ) %}
+    {% if tabs and level == 1 or sections and tabs >= level - 1 %}
       {% set class = class ~ " md-nav__item--section" %}
+      {% set is_section = true %}
     {% elif not nav_item.active and "navigation.prune" in features %}
       {% set class = class ~ " md-nav__item--pruned" %}
-      {% set prune = true %}
+      {% set is_pruned = true %}
     {% endif %}
     <li class="{{ class }} md-nav__item--nested">
-      {% if not prune %}
+      {% if not is_pruned %}
-        {% set expanded = "navigation.expand" in features %}
-        {% set active = nav_item.active or expanded %}
         {% set checked = "checked" if nav_item.active %}
-        {% if expanded and not checked %}
+        {% set is_expanded = "navigation.expand" in features %}
+        {% if is_expanded and not checked %}
           {% set indeterminate = "md-toggle--indeterminate" %}
         {% endif %}
         <input class="md-nav__toggle md-toggle {{ indeterminate }}" type="checkbox" id="{{ path }}" {{ checked }}>
         {% if not indexes %}
-          <label class="md-nav__link" for="{{ path }}" id="{{ path }}_label" tabindex="0">
+          {% set tabindex = "0" if not is_section %}
+          <label class="md-nav__link" for="{{ path }}" id="{{ path }}_label" tabindex="{{ tabindex }}">
             {{ render_content(nav_item) }}
             <span class="md-nav__icon md-icon"></span>
           </label>
@@ -78,7 +79,8 @@
               {{ render_content(index, nav_item) }}
             </a>
             {% if nav_item.children | length > 1 %}
-              <label class="md-nav__link {{ class }}" for="{{ path }}" id="{{ path }}_label" tabindex="0">
+              {% set tabindex = "0" if not is_section %}
+              <label class="md-nav__link {{ class }}" for="{{ path }}" id="{{ path }}_label" tabindex="{{ tabindex }}">
                 <span class="md-nav__icon md-icon"></span>
               </label>
             {% endif %}

src/templates/assets/stylesheets/main/components/_nav.scss

@@ -80,16 +80,6 @@
     list-style: none;
   }
 
-  // Navigation item
-  &__item {
-    padding: 0 px2rem(12px);
-
-    // Navigation item on level 2
-    & & {
-      padding-inline-end: 0;
-    }
-  }
-
   // Navigation link
   &__link {
     display: flex;
@@ -122,9 +112,9 @@
       position: relative;
     }
 
-    // Always align navigation icons to the right
+    // Always align navigation icons to the end
     .md-icon:last-child {
-      margin-left: auto;
+      margin-inline-start: auto;
     }
 
     // Navigation link icon
@@ -289,7 +279,6 @@
 
       // Navigation item
       .md-nav__item {
-        padding: 0;
         border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
 
         // Navigation link in active navigation
@@ -474,51 +463,89 @@
 
   // [tablet landscape +]: Tree-like table of contents
   @include break-from-device(tablet landscape) {
+    margin-bottom: px2rem(-8px);
 
-    // Navigation title
+    // Table of contents
-    &--secondary &__title {
+    &--secondary {
-      position: sticky;
-      top: 0;
-      // Hack: because of the hack that we need to make .md-ellipsis work in
-      // Safari, we need to set `z-index` here as - see https://bit.ly/3s5M2jm
-      z-index: 1;
-      background: var(--md-default-bg-color);
-      box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color);
 
-      // Adjust snapping behavior
+      // Navigation title
-      &[for="__toc"] {
+      .md-nav__title {
-        scroll-snap-align: start;
+        position: sticky;
+        top: 0;
+        // Hack: because of the hack that we need to make .md-ellipsis work in
+        // Safari, we need to set `z-index` here as - see https://bit.ly/3s5M2jm
+        z-index: 1;
+        background: var(--md-default-bg-color);
+        box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color);
+
+        // Adjust snapping behavior
+        &[for="__toc"] {
+          scroll-snap-align: start;
+        }
+
+        // Hide navigation icon
+        .md-nav__icon {
+          display: none;
+        }
       }
 
-      // Hide navigation icon
+      // Adjust spacing for navigation list - same reason as below
-      .md-nav__icon {
+      .md-nav__list {
-        display: none;
+        padding-inline-start: px2rem(12px);
+        padding-bottom: px2rem(8px);
+      }
+
+      // Adjust spacing for navigation link - before this change, we set spacing
+      // on the left and right of a navigation item, but this led to the problem
+      // of cropped focus outlines, because we must set `overflow: hidden` on
+      // the navigation list for smooth expand and collapse transitions.
+      .md-nav__item > .md-nav__link {
+        margin-inline-end: px2rem(8px);
       }
     }
   }
 
   // [screen +]: Tree-like navigation
   @include break-from-device(screen) {
+    margin-bottom: px2rem(-8px);
     transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
 
-    // Navigation title
+    // Primary navigation
-    &--primary &__title {
+    &--primary {
-      position: sticky;
-      top: 0;
-      // Hack: because of the hack that we need to make .md-ellipsis work in
-      // Safari, we need to set `z-index` here as - see https://bit.ly/3s5M2jm
-      z-index: 1;
-      background: var(--md-default-bg-color);
-      box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color);
 
-      // Adjust snapping behavior
+      // Navigation title
-      &[for="__drawer"] {
+      .md-nav__title {
-        scroll-snap-align: start;
+        position: sticky;
+        top: 0;
+        // Hack: because of the hack that we need to make .md-ellipsis work in
+        // Safari, we need to set `z-index` here as - see https://bit.ly/3s5M2jm
+        z-index: 1;
+        background: var(--md-default-bg-color);
+        box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color);
+
+        // Adjust snapping behavior
+        &[for="__drawer"] {
+          scroll-snap-align: start;
+        }
+
+        // Hide navigation icon
+        .md-nav__icon {
+          display: none;
+        }
       }
 
-      // Hide navigation icon
+      // Adjust spacing for navigation list - same reason as below
-      .md-nav__icon {
+      .md-nav__list {
-        display: none;
+        padding-inline-start: px2rem(12px);
+        padding-bottom: px2rem(8px);
+      }
+
+      // Adjust spacing for navigation link - before this change, we set spacing
+      // on the left and right of a navigation item, but this led to the problem
+      // of cropped focus outlines, because we must set `overflow: hidden` on
+      // the navigation list for smooth expand and collapse transitions.
+      .md-nav__item > .md-nav__link {
+        margin-inline-end: px2rem(8px);
       }
     }
 
@@ -588,6 +615,7 @@
       // Navigation
       > .md-nav {
         display: block;
+        margin-inline-start: px2rem(-12px);
         visibility: visible;
         opacity: 1;
 
@@ -641,8 +669,7 @@
     // Modifier for when navigation tabs are rendered
     &--lifted {
 
-      // Hide nested level 0 navigation items and site title
+      // Hide site title
-      > .md-nav__list > .md-nav__item--nested,
       > .md-nav__title {
         display: none;
       }
@@ -654,16 +681,13 @@
         // Active parent navigation item
         &--active {
           display: block;
-          padding: 0;
 
           // Show navigation link as title
           > .md-nav__link {
             position: sticky;
             top: 0;
             z-index: 1;
-            padding: 0 px2rem(12px);
             margin-top: 0;
-            font-weight: 700;
             background: var(--md-default-bg-color);
             box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color);
 
@@ -671,12 +695,17 @@
             &:not(.md-nav__container) {
               pointer-events: none;
             }
-
-            // Hide naviation icon
-            .md-nav__icon {
-              display: none;
-            }
           }
+
+          // Adjust spacing for navigation section
+          &.md-nav__item--section {
+            margin: 0;
+          }
+        }
+
+        // Adjust spacing for nested navigation
+        > .md-nav {
+          margin-inline-start: px2rem(-12px);
         }
 
         // Make labels discernable from links
@@ -686,14 +715,11 @@
       }
 
       // Hack: Always show active navigation tab on breakpoint screen, despite
-      // of checkbox being checked or not. Fixes #1655.
+      // of checkbox being checked or not - see https://t.ly/Qc311
       .md-nav[data-md-level="1"] {
-        display: block;
+        grid-template-rows: 1fr;
-
+        visibility: visible;
-        // Adjust spacing for level 1 navigation items
+        opacity: 1;
-        > .md-nav__list > .md-nav__item {
-          padding-inline-end: px2rem(12px);
-        }
       }
     }
 

src/templates/partials/nav-item.html

@@ -101,26 +101,26 @@
     {% endif %}
 
     <!-- Determine whether to render item as a section -->
-    {% if "navigation.sections" in features and level == 1 + (
+    {% set tabs = "navigation.tabs" in features %}
-      "navigation.tabs" in features
+    {% set sections = "navigation.sections" in features %}
-    ) %}
+    {% if tabs and level == 1 or sections and tabs >= level - 1 %}
       {% set class = class ~ " md-nav__item--section" %}
+      {% set is_section = true %}
 
     <!-- Determine whether to prune inactive item -->
     {% elif not nav_item.active and "navigation.prune" in features %}
       {% set class = class ~ " md-nav__item--pruned" %}
-      {% set prune = true %}
+      {% set is_pruned = true %}
     {% endif %}
 
     <!-- Nested navigation item -->
     <li class="{{ class }} md-nav__item--nested">
-      {% if not prune %}
+      {% if not is_pruned %}
-        {% set expanded = "navigation.expand" in features %}
+        {% set checked = "checked" if nav_item.active %}
-        {% set active = nav_item.active or expanded %}
 
         <!-- Determine checked and indeterminate state -->
-        {% set checked = "checked" if nav_item.active %}
+        {% set is_expanded = "navigation.expand" in features %}
-        {% if expanded and not checked %}
+        {% if is_expanded and not checked %}
           {% set indeterminate = "md-toggle--indeterminate" %}
         {% endif %}
 
@@ -134,11 +134,12 @@
 
         <!-- Toggle to expand nested items -->
         {% if not indexes %}
+          {% set tabindex = "0" if not is_section %}
           <label
             class="md-nav__link"
             for="{{ path }}"
             id="{{ path }}_label"
-            tabindex="0"
+            tabindex="{{ tabindex }}"
           >
             {{ render_content(nav_item) }}
             <span class="md-nav__icon md-icon"></span>
@@ -158,11 +159,12 @@
 
             <!-- Only render toggle if there's at least one more page -->
             {% if nav_item.children | length > 1 %}
+              {% set tabindex = "0" if not is_section %}
               <label
                 class="md-nav__link {{ class }}"
                 for="{{ path }}"
                 id="{{ path }}_label"
-                tabindex="0"
+                tabindex="{{ tabindex }}"
               >
                 <span class="md-nav__icon md-icon"></span>
               </label>