Add aria and improve contrast to meet WCAG standards (#595)

dfo-osdt · Apr 17, 2024 · f91d747 · f91d747
1 parent b750b84
commit f91d747
Show file tree

Hide file tree

Showing 23 changed files with 1,476 additions and 1,437 deletions.
diff --git a/resources/src/components/BaseDialog.vue b/resources/src/components/BaseDialog.vue
@@ -1,7 +1,7 @@
 <template>
     <q-dialog>
         <q-card style="width: 700px; max-width: 80vw" outlined>
-            <q-card-section class="bg-teal-1 text-h6 text-accent">
+            <q-card-section class="bg-teal-1 text-h6 text-primary">
                 <div class="flex justify-between">
                     <div>{{ title }}</div>
                     <div>

diff --git a/resources/src/components/DrawerMenuItem.vue b/resources/src/components/DrawerMenuItem.vue
@@ -1,5 +1,11 @@
 <template>
-    <q-item :key="item.label" v-ripple clickable :to="item.to">
+    <q-item
+        :key="item.label"
+        v-ripple
+        clickable
+        :to="item.to"
+        :aria-label="item.label"
+    >
         <q-item-section avatar>
             <q-icon :name="item.icon" />
             <q-tooltip

diff --git a/resources/src/components/MainDrawer.vue b/resources/src/components/MainDrawer.vue
@@ -7,11 +7,12 @@
         @mouseover="authStore.isDrawerMini = false"
         @mouseout="authStore.isDrawerMini = true"
     >
-        <q-list padding class="menu-list">
+        <q-list padding class="menu-list" role="menubar">
             <DrawerMenuItem
                 v-for="item in userMenuItems"
                 :key="item.label"
                 :item="item"
+                role="menuitem"
             ></DrawerMenuItem>
 
             <q-separator></q-separator>
@@ -23,15 +24,17 @@
                 v-for="item in exploreMenuItems"
                 :key="item.label"
                 :item="item"
+                role="menuitem"
             >
             </DrawerMenuItem>
         </q-list>
-        <q-list class="q-mb-sm">
+        <q-list class="q-mb-sm" role="menubar">
             <q-separator></q-separator>
             <DrawerMenuItem
                 v-for="item in bottomMenuItems"
                 :key="item.label"
                 :item="item"
+                role="menuitem"
             ></DrawerMenuItem>
         </q-list>
     </q-drawer>

diff --git a/resources/src/components/MainHeader.vue b/resources/src/components/MainHeader.vue
@@ -1,5 +1,5 @@
 <template>
-    <q-header bordered class="q-py-sm bg-white text-accent">
+    <q-header bordered class="q-py-sm bg-white text-secondary">
         <q-toolbar>
             <q-btn
                 v-if="authStore.isAuthenticated"
@@ -8,10 +8,15 @@
                 dense
                 round
                 :icon="authStore.leftDrawerOpen ? 'mdi-menu-open' : 'mdi-menu'"
+                aria-label="$t('osp.alt.toggle-drawer')"
                 @click="toggleLeftDrawer"
             />
             <router-link to="/">
-                <q-img src="/assets/logo.svg" width="40px"></q-img>
+                <q-img
+                    src="/assets/logo.svg"
+                    width="40px"
+                    :alt="$t('osp.alt.logo')"
+                ></q-img>
             </router-link>
             <q-toolbar-title class="q-mt-sm text-black">{{
                 $t('common.app-name')
@@ -30,7 +35,7 @@
             <q-btn
                 v-if="authStore.isAuthenticated"
                 round
-                color="accent"
+                color="secondary"
                 :label="authStore.user?.initials"
             >
                 <q-menu :offset="[0, 10]">
@@ -51,15 +56,19 @@
                         </q-item>
                         <q-item v-ripple to="/dashboard" clickable>
                             <q-item-section>
-                                <q-item-label>{{ $t('common.dashboard') }}</q-item-label>
+                                <q-item-label>{{
+                                    $t('common.dashboard')
+                                }}</q-item-label>
                             </q-item-section>
                             <q-item-section avatar>
                                 <q-icon name="mdi-view-dashboard-outline" />
                             </q-item-section>
                         </q-item>
                         <q-item v-ripple to="/auth/logout" clickable>
                             <q-item-section>
-                                <q-item-label>{{ $t('common.logout') }}</q-item-label>
+                                <q-item-label>{{
+                                    $t('common.logout')
+                                }}</q-item-label>
                             </q-item-section>
                             <q-item-section avatar>
                                 <q-icon name="mdi-logout" />

diff --git a/resources/src/components/MetricCard.vue b/resources/src/components/MetricCard.vue
@@ -9,9 +9,10 @@
                     icon="mdi-arrow-right"
                     color="primary"
                     :to="to"
+                    :aria-label="title"
                 />
             </div>
-            <div class="text-body1 text-weight-medium text-accent">
+            <div class="text-body1 text-weight-medium text-primary">
                 {{ title }}
             </div>
         </q-card-section>

diff --git a/resources/src/components/NoResultsFoundDiv.vue b/resources/src/components/NoResultsFoundDiv.vue
@@ -7,7 +7,7 @@
                     width="150px"
                 />
             </div>
-            <div class="text-h5 text-weight-light text-accent q-mb-sm">
+            <div class="text-h5 text-weight-light text-primary q-mb-sm">
                 {{ $t('common.no-results-found') }}
             </div>
             <div class="text-body1 text-grey-8">