fix: added skip to main content button

Author: technikhil314

components/skipToNavButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <button
+    class="fixed p-4 text-gray-800 bg-gray-300 border border-gray-500 rounded-md  w-52 z-11 top-6 left-6 dark:bg-gray-700 dark:text-gray-50"
+    @click="focusOnMain"
+  >
+    Skip to main content
+  </button>
+</template>
+<script>
+export default {
+  methods: {
+    focusOnMain() {
+      document.getElementsByTagName('main')[0].focus()
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+button {
+  opacity: 0;
+  pointer-events: none;
+}
+button:focus {
+  opacity: 1;
+  pointer-events: all;
+}
+</style>

layouts/main.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="page-root">
+    <SkipToNavButton />
     <Toast />
     <Nuxt />
     <Footer />

pages/diff.vue

@@ -48,7 +48,7 @@
         </button>
       </template>
     </Navbar>
-    <main>
+    <main class="outline-none" tabindex="0">
       <div
         class="flex items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
       >

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-contents">
     <Navbar />
-    <main class="text-gray-800 dark:text-gray-50">
+    <main class="text-gray-800 outline-none dark:text-gray-50" tabindex="0">
       <section>
         <header>
           <h1 class="w-full mb-2 text-xl text-center">

pages/v1/diff.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-contents">
     <Navbar :show-back-button="true" />
-    <main>
+    <main class="outline-none" tabindex="0">
       <section
         class="
           flex

tailwind.config.js

@@ -16,7 +16,8 @@ module.exports = {
     zIndex: {
       '1': 1,
       '2': 2,
-      '10': 10
+      '10': 10,
+      '11': 11
     },
     minHeight: {
       '80': '20rem'