Merge pull request #725 from craftcms/a11y/more-color-stuff

Keyboard navigation enhancements

Author: gcamacho079

README.md

@@ -29,6 +29,7 @@ The pages served from `docs/` are treated like any other VuePress project, and t
 ## Local Development
 
 ```
+nvm use
 npm install
 npm run docs:dev
 ```

docs/.vuepress/components/See.vue

@@ -88,6 +88,7 @@ export default {
     }
 
     .see-description {
-        @apply text-sm text-gray-500 mt-1;
+        @apply text-sm mt-1;
+        color: var(--text-color-muted);
     }
 </style>

docs/.vuepress/theme/components/ColorModeSwitch.vue

@@ -22,7 +22,7 @@
   height: 22px;
 
   &:focus {
-    @apply outline-none;
+    outline: var(--custom-focus-outline);
   }
 
   .knob {

docs/.vuepress/theme/components/DocSetPanel.vue

@@ -74,6 +74,7 @@
   .doc-set-link {
     @apply block px-4 mt-2 font-medium text-lg;
     color: var(--doc-set-color);
+    outline-offset: -2px;
 
     .title {
       color: var(--doc-set-color);
@@ -82,7 +83,6 @@
 
   .home {
     @apply text-sm relative;
-    color: #718096;
 
     .back {
       @apply inline-block absolute mr-1 opacity-100;

docs/.vuepress/theme/components/LeftBar.vue

@@ -81,6 +81,12 @@
     /* browser height - approx. .doc-set-panel - #top height - #bottom height */
     height: calc(100vh - 93px - 3rem - 3rem);
   }
+
+  .sidebar-links {
+    a:focus {
+      outline-offset: -2px;
+    }
+  }
 }
 
 .sidebar-transitioning {

docs/.vuepress/theme/components/PageFooter.vue

@@ -83,7 +83,7 @@
   }
 
   &:focus {
-    @apply outline-none;
+    outline: var(--custom-focus-outline);
   }
 
   &:hover {

docs/.vuepress/theme/styles/base.pcss

@@ -23,6 +23,7 @@
   --custom-block-bg-color: theme("colors.softer");
   --custom-block-border-color: theme("colors.soft");
   --craft-red: #e5422b;
+  --custom-focus-outline: 2px solid var(--link-color-default);
 
   /* Code */
   --code-color-default: #476582;
@@ -105,3 +106,9 @@ img {
     font-size: 108%;
   }
 }
+
+.sidebar-links {
+  a {
+    outline-offset: -2px;
+  }
+}