Improved focus outlines when using keyboard navigation

material/base.html

@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.dcbf0b87.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.7c7fd32f.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.ef6f36e2.min.css' | url }}">

src/assets/stylesheets/main/_typeset.scss

@@ -164,6 +164,12 @@ kbd {
     &:hover {
       color: var(--md-accent-fg-color);
     }
+
+    // Text link on keyboard focus
+    &.focus-visible {
+      outline-color: var(--md-accent-fg-color);
+      outline-offset: px2rem(4px);
+    }
   }
 
   // Code block

src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss

@@ -92,6 +92,7 @@
       // Tab label on focus
       &:focus + label {
         outline-style: auto;
+        outline-color: var(--md-accent-fg-color);
       }
 
       // Hide outline for pointer devices

src/assets/stylesheets/main/layout/_base.scss

@@ -140,9 +140,10 @@ body {
     display: block;
   }
 
-  // Option label on focus
+  // Show outline for pointer devices
   &.focus-visible + label {
     outline-style: auto;
+    outline-color: var(--md-accent-fg-color);
   }
 }
 
@@ -158,6 +159,7 @@ body {
   font-size: px2rem(12.8px);
   background-color: var(--md-default-fg-color);
   border-radius: px2rem(2px);
+  outline-color: var(--md-accent-fg-color);
   transform: translateY(px2rem(8px));
   opacity: 0;
 

src/assets/stylesheets/main/layout/_clipboard.scss

@@ -41,6 +41,8 @@
   height: px2em(24px);
   color: var(--md-default-fg-color--lightest);
   border-radius: px2rem(2px);
+  outline-color: var(--md-accent-fg-color);
+  outline-offset: px2rem(2px);
   cursor: pointer;
   transition: color 250ms;
 

src/assets/stylesheets/main/layout/_footer.scss

@@ -45,6 +45,7 @@
     display: flex;
     padding-top: px2rem(28px);
     padding-bottom: px2rem(8px);
+    outline-color: var(--md-accent-fg-color);
     transition: opacity 250ms;
 
     // [tablet +]: Adjust width to 50/50

src/assets/stylesheets/main/layout/_header.scss

@@ -63,11 +63,6 @@
       box-shadow 250ms;
   }
 
-  // Link or button on focus
-  .focus-visible {
-    outline-color: currentColor;
-  }
-
   // Header wrapper
   &__inner {
     display: flex;
@@ -83,6 +78,7 @@
     padding: px2rem(8px);
     color: currentColor;
     vertical-align: middle;
+    outline-color: var(--md-accent-fg-color);
     cursor: pointer;
     transition: opacity 250ms;
 

src/assets/stylesheets/main/layout/_nav.scss

@@ -125,6 +125,12 @@
       color: var(--md-accent-fg-color);
     }
 
+    // Navigation link on keyboard focus
+    &.focus-visible {
+      outline-color: var(--md-accent-fg-color);
+      outline-offset: px2rem(4px);
+    }
+
     // Navigation link to table of contents
     .md-nav--primary &[for="__toc"] {
       display: none;

src/assets/stylesheets/main/layout/_source.scss

@@ -72,6 +72,7 @@
   font-size: px2rem(13px);
   line-height: 1.2;
   white-space: nowrap;
+  outline-color: var(--md-accent-fg-color);
   // Hack: promote to own layer to reduce jitter
   backface-visibility: hidden;
   transition: opacity 250ms;

src/assets/stylesheets/main/layout/_tabs.scss

@@ -76,6 +76,8 @@
     display: block;
     margin-top: px2rem(16px);
     font-size: px2rem(14px);
+    outline-color: var(--md-accent-fg-color);
+    outline-offset: px2rem(4px);
     // Hack: save a repaint when tabs are appearing on scrolling up
     backface-visibility: hidden;
     opacity: 0.7;