Update keyboard focus outline

Author: kadiryazici

src/assets/main.scss

@@ -30,7 +30,6 @@ html {
   height: 100%;
   width: 100%;
   overflow: hidden;
-  outline: none;
   @include borderRadiusOverflowHidden(8px);
 }
 
@@ -51,7 +50,6 @@ body {
 
 button, a {
   border: none;
-  outline: none;
   text-decoration: none;
   background-color: unset;
   color: currentColor;

src/assets/mixins.scss

@@ -8,10 +8,20 @@
   text-shadow: 0 0 $size black, 0 0 $size black, 0 0 $size black, 0 0 $size black;
 }
 
+@keyframes outline-anim {
+  0% {
+    outline-offset: 5px;
+  }
+  100% {
+    outline-offset: 0px;
+  }
+}
+
 @mixin focus-visible($additionalShadow: null) {
   outline: none;
   &:not([disabled])[data-focus-visible-added] {
-    box-shadow: 0px 0px 0px 1px var(--white-faded);
+    outline: auto;
+    animation: outline-anim .2s forwards;
   }
 }
 

src/components/AppButton.vue

@@ -54,7 +54,6 @@ function handleClick(e: MouseEvent) {
   font-size: 14px;
   padding: 8px 12px;
   border: 1px solid var(--item-border-color);
-  outline: none;
   background-color: var(--item-bg);
   position: relative;
   overflow: hidden;

src/components/AppContent.vue

@@ -1,5 +1,22 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { useStore } from '../stores/store'
+import type { Option } from '../types'
+
+const store = useStore()
+const mainEl = ref<Option<HTMLElement>>(null)
+
+watch(() => store.currentPage, () => {
+  mainEl.value?.focus()
+}, { flush: 'post' })
+</script>
+
 <template>
-  <main class="main">
+  <main
+    ref="mainEl"
+    tabindex="-1"
+    class="main"
+  >
     <slot />
   </main>
 </template>
@@ -11,5 +28,6 @@
   overflow: hidden;
   background-color: var(--content-bg);
   position: relative;
+  outline: none;
 }
 </style>

src/pages/SettingsPage.vue

@@ -112,7 +112,6 @@ useKey('esc', handleBack, { prevent: true })
 
 <style lang="scss" scoped>
   .settings {
-    outline: none;
     position: absolute;
     left: 0;
     top: 0;