From 66c71d384dddbf03d4f21732e0a33fc92c4e37b9 Mon Sep 17 00:00:00 2001
From: Jordan Blasenhauer <blasenhauer.jordan.dev@gmail.com>
Date: Tue, 18 Jun 2024 13:23:01 +0200
Subject: [PATCH] enhance a11n

* enhance switch lang : now update html lang attribut + add aria and needed attributs on switch buttons
* remove uselss role img on preloader
* better nav
* fix som duplicates ids
---
 .../client/src/components/Dashboard/LangSwitch.vue  | 12 ++++++++++--
 vuejs/client/src/components/Dashboard/Layout.vue    |  6 +++---
 vuejs/client/src/components/Dashboard/Loader.vue    |  1 -
 vuejs/client/src/components/Dashboard/Menu.vue      |  6 +++---
 vuejs/client/src/components/Widget/Alert.vue        | 13 ++++---------
 5 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/vuejs/client/src/components/Dashboard/LangSwitch.vue b/vuejs/client/src/components/Dashboard/LangSwitch.vue
index 639b28ed5..ea68ac32a 100644
--- a/vuejs/client/src/components/Dashboard/LangSwitch.vue
+++ b/vuejs/client/src/components/Dashboard/LangSwitch.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive } from "vue";
+import { onMounted, reactive } from "vue";
 import { langIndex } from "@utils/tabindex.js";
 
 /** 
@@ -11,12 +11,18 @@ import { langIndex } from "@utils/tabindex.js";
 
 const lang = reactive({
   isOpen: false,
+  curr: "",
 });
 
 function updateLangStorage(lang) {
   sessionStorage.setItem("lang", lang);
   document.location.reload();
 }
+
+onMounted(() => {
+  lang.curr = document.querySelector("#current-lang").textContent;
+  document.querySelector("html").setAttribute("lang", lang.curr);
+});
 </script>
 
 <template>
@@ -34,8 +40,10 @@ function updateLangStorage(lang) {
         :aria-checked="$i18n.locale === locale ? 'true' : 'false'"
       >
         <button
+          type="button"
           :tabindex="lang.isOpen ? langIndex : '-1'"
-          @click="
+          :aria-labelledby="`${locale}-${id}`"
+          @click.prevent="
             () => {
               lang.isOpen = false;
               updateLangStorage(locale);
diff --git a/vuejs/client/src/components/Dashboard/Layout.vue b/vuejs/client/src/components/Dashboard/Layout.vue
index 5fb1d6324..7a2b92c09 100644
--- a/vuejs/client/src/components/Dashboard/Layout.vue
+++ b/vuejs/client/src/components/Dashboard/Layout.vue
@@ -19,9 +19,9 @@ import { onMounted } from "vue";
 </script>
 
 <template>
-  <noscript class="no-script"
-    >Your browser does not support JavaScript!</noscript
-  >
+  <noscript class="no-script">
+    Your browser does not support JavaScript!
+  </noscript>
   <Loader />
   <LangSwitch />
   <Banner />
diff --git a/vuejs/client/src/components/Dashboard/Loader.vue b/vuejs/client/src/components/Dashboard/Loader.vue
index 4556a043f..fa2defec3 100644
--- a/vuejs/client/src/components/Dashboard/Loader.vue
+++ b/vuejs/client/src/components/Dashboard/Loader.vue
@@ -50,7 +50,6 @@ onMounted(() => {
     <p id="loader-text" class="sr-only">{{ $t("dashboard_loading") }}</p>
     <img
       ref="logo"
-      role="img"
       aria-hidden="true"
       :src="logoMenu2"
       class="loader-container-img"
diff --git a/vuejs/client/src/components/Dashboard/Menu.vue b/vuejs/client/src/components/Dashboard/Menu.vue
index 87710d1bb..82f290b13 100644
--- a/vuejs/client/src/components/Dashboard/Menu.vue
+++ b/vuejs/client/src/components/Dashboard/Menu.vue
@@ -291,8 +291,8 @@ onBeforeMount(() => {
       <!-- end logo version -->
     </div>
 
-    <div :class="['menu-nav-list-container', bannerStore.bannerClass]">
-      <ul role="navigation" class="menu-nav-list">
+    <nav :class="['menu-nav-list-container', bannerStore.bannerClass]">
+      <ul class="menu-nav-list">
         <!-- item -->
         <li v-for="(item, id) in navList" :key="id" class="menu-nav-list-item">
           <a
@@ -354,7 +354,7 @@ onBeforeMount(() => {
         </li>
       </ul>
       <!-- end plugins -->
-    </div>
+    </nav>
 
     <!-- bottom sidebar  -->
     <div class="menu-bottom-content">
diff --git a/vuejs/client/src/components/Widget/Alert.vue b/vuejs/client/src/components/Widget/Alert.vue
index e57a781a4..730177ae4 100644
--- a/vuejs/client/src/components/Widget/Alert.vue
+++ b/vuejs/client/src/components/Widget/Alert.vue
@@ -8,7 +8,6 @@ import { v4 as uuidv4 } from "uuid";
   We can used it as a fixed alert or we can use it in a container as a list.
   @example
   {
-    id: "flash-alert-1",
     position : "fixed",
     type: "success",
     title: "Success",
@@ -26,11 +25,6 @@ import { v4 as uuidv4 } from "uuid";
 */
 
 const props = defineProps({
-  id: {
-    type: [Number, String],
-    required: false,
-    default: uuidv4(),
-  },
   isFixed: {
     type: Boolean,
     required: false,
@@ -68,6 +62,7 @@ const props = defineProps({
 
 const alert = reactive({
   visible: true,
+  id: uuidv4(),
 });
 
 onMounted(() => {
@@ -83,7 +78,7 @@ onMounted(() => {
   <div
     v-if="alert.visible"
     :class="['feedback-alert-container', props.isFixed ? 'is-fixed' : '']"
-    :id="props.id || `feedback-alert-${props.message.substring(0, 10)}`"
+    :id="alert.id"
     :role="props.type === 'success' ? 'status' : 'alert'"
     :aria-description="$t('dashboard_feedback_alert_desc')"
   >
@@ -98,9 +93,9 @@ onMounted(() => {
           data-close-flash-message
           type="button"
           class="feedback-alert-btn"
-          :aria-labelledby="`${props.id}-close`"
+          :aria-labelledby="`${alert.id}-close`"
         >
-          <span class="sr-only" :id="`${props.id}-close`">
+          <span class="sr-only" :id="`${alert.id}-close`">
             {{ $t("dashboard_feedback_alert_close") }}
           </span>
           <svg