Merge pull request #69 from theotime2005/place-page-content-to-main

[BUGFIX] Place the page content in main
theotime2005 · Jan 16, 2025 · 48de181 · 48de181
2 parents 23c9a9c + 6734159
commit 48de181
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -190,5 +190,6 @@
         "message3": "Do not hesitate to send us any suggestions or problems via GitHub.",
         "feature": "Suggest a new feature",
         "bug_report": "Report a bug"
-    }
-}
+    },
+    "skip-content": "Skip to content"
+}
diff --git a/locales/fr.json b/locales/fr.json
@@ -1,4 +1,5 @@
 {
+  "skip-content": "Passer au contenu",
   "title": "Gestion du B.note",
   "header": {
     "mainMenu": "Menu principal"

diff --git a/locales/it.json b/locales/it.json
@@ -190,5 +190,6 @@
         "message3": "Non esitate a segnalarci qualsiasi suggerimento o problema tramite GitHub.",
         "feature": "Suggerire una nuova funzionalità",
         "bug_report": "Segnalare un bug"
-    }
-}
+    },
+    "skip-content": "Passare al contenuto"
+}
diff --git a/src/App.vue b/src/App.vue
@@ -2,12 +2,22 @@
 import { RouterView } from "vue-router";
 import NaveBarreComponent from "@/components/NaveBarreComponent.vue";
 import FooterComponent from "@/components/FooterComponent.vue";
+import { ref } from "vue";
+
+const mainRef = ref(null);
+
+const focusMain = () => {
+  if (mainRef.value) {
+    mainRef.value.focus();
+  }
+};
 </script>
 
 <template>
+  <button @click="focusMain">{{$t('skip-content')}}</button>
   <NaveBarreComponent />
-  <div class="flex flex-col flex-grow overflow-y-scroll">
+  <main class="flex flex-col flex-grow overflow-y-scroll" ref="mainRef" tabindex="-1">
     <RouterView />
-  </div>
+  </main>
   <FooterComponent />
 </template>