fix: color contrast error by axe-core

Author: ktquez

src/.vuepress/theme/components/BackTo.vue

@@ -1,6 +1,6 @@
 <template>
   <RouterLink
-    class="inline-flex"
+    class="inline-flex px-4 my-4 text-color bg-main"
     :to="to"
   >
     <vp-icon

src/.vuepress/theme/components/Logo.vue

@@ -1,7 +1,7 @@
 <template>
   <RouterLink
     :to="$localePath"
-    class="inline-flex p-3 pt-2"
+    class="inline-flex p-3 pt-2 logo bg-main"
   >
     <img
       src="/vue-a11y-logo.svg"

src/.vuepress/theme/components/TheHeader.vue

@@ -130,6 +130,10 @@ export default {
   &-logo--bg {
     @media (min-width: theme('screens.lg')) {
       @apply bg-page-gradient-left;
+
+      .logo {
+        @apply bg-primary;
+      }
     }
   }
 

src/.vuepress/theme/components/TheNavigation.vue

@@ -16,7 +16,7 @@
           <a
             :href="href"
             :aria-current="isActive && $route.path.indexOf(item.link) === 0 ? 'page' : null"
-            class="px-3 py-3 border-b-4 border-transparent border-solid the-nav-link hover:border-accent-primary"
+            class="relative z-0 px-3 py-3 border-b-4 border-transparent border-solid the-nav-link bg-main hover:border-accent-primary"
             :class="{ 'active border-accent-primary': isActive && $route.path.indexOf(item.link) === 0 }"
             @click="navigate"
           >
@@ -26,7 +26,7 @@
       </li>
       <li>
         <ExternalLink
-          class="px-3 py-3 border-b-4 border-transparent border-solid the-nav-link hover:border-accent-primary"
+          class="relative z-0 px-3 py-3 border-b-4 border-transparent border-solid the-nav-link bg-main hover:border-accent-primary"
           :href="`https://github.com/${$themeConfig.repo}`"
           label="Github"
         />

src/.vuepress/theme/components/TheSidebar.vue

@@ -20,7 +20,7 @@
       <template v-for="(nav, index) in items">
         <span
           :key="`nav-heading-${index}`"
-          class="mt-12 ml-4 text-xl font-bold"
+          class="mt-12 ml-4 text-xl font-bold bg-primary"
         >{{ nav.title }}</span>
         <ul
           :key="`nav-list-${index}`"

src/.vuepress/theme/layouts/Post.vue

@@ -16,7 +16,7 @@
           :content="$themeConfig.url + post.path"
         >
         <BackTo
-          class="inline-flex px-4 my-4 -ml-4"
+          class="py-2 -ml-4"
           :text="`${$themeLocaleConfig.backToText} posts`"
           :to="`${$localePath}posts/`"
         />

src/.vuepress/theme/layouts/Posts.vue

@@ -8,7 +8,7 @@
         v-show="isCategory"
         :text="`${$themeLocaleConfig.backToText} posts`"
         :to="`${$localePath}posts/`"
-        class="inline-flex px-4 my-4 ml-2"
+        class="ml-2"
       />
 
       <ul class="flex flex-wrap justify-between w-full px-3 lg:pr-6 lg:pl-0 lg:ml-6 xl:pr-0">

src/.vuepress/theme/styles/_a11y.scss

@@ -16,13 +16,13 @@
 
 [tabindex]:not([tabindex="-1"]), a, button, input, select, textarea {
   position: relative;
-  z-index: 2;
   outline: 2px solid transparent;
   outline-offset: 6px;
   transition: outline-offset .1s ease;
 }
 
 *:focus {
+  z-index: 2 !important;
   outline-color: var(--color);
   outline-offset: 3px;
 }

src/.vuepress/theme/views/Settings.vue

@@ -2,7 +2,7 @@
   <div class="container z-10 mx-auto post-page">
     <div class="px-6 mt-6 xl:px-4">
       <BackTo
-        class="inline-flex px-4 my-4 -ml-4"
+        class="py-2 -ml-4"
         :to="$localePath"
         :text="`${$themeLocaleConfig.backToText} home`"
       />