From d97927da13f75c523f453f8422ae25cad08dba32 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 1 Sep 2022 10:42:05 +0200
Subject: [PATCH] Small a11y fixes

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/assets/oruga-tailwindcss.css |  2 +-
 js/src/components/NavBar.vue        |  5 ++++-
 js/src/components/PageFooter.vue    |  1 +
 js/src/views/SearchView.vue         | 11 +++++++++--
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/js/src/assets/oruga-tailwindcss.css b/js/src/assets/oruga-tailwindcss.css
index fa42f8c5..811eaef1 100644
--- a/js/src/assets/oruga-tailwindcss.css
+++ b/js/src/assets/oruga-tailwindcss.css
@@ -197,7 +197,7 @@ button.menubar__button {
 }
 
 .notification-info {
-  @apply bg-mbz-info;
+  @apply bg-mbz-info text-black;
 }
 
 .notification-warning {
diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index 8bd7a185..8a85f7bd 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -1,5 +1,8 @@
 <template>
-  <nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900">
+  <nav
+    class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900"
+    id="navbar"
+  >
     <div class="container mx-auto flex flex-wrap items-center mx-auto gap-4">
       <router-link :to="{ name: RouteName.HOME }" class="flex items-center">
         <MobilizonLogo class="w-40" />
diff --git a/js/src/components/PageFooter.vue b/js/src/components/PageFooter.vue
index 104970ae..2ae331cc 100644
--- a/js/src/components/PageFooter.vue
+++ b/js/src/components/PageFooter.vue
@@ -21,6 +21,7 @@
     >
       <li>
         <o-select
+          class="text-black dark:text-white"
           :aria-label="t('Language')"
           v-model="locale"
           :placeholder="t('Select a language')"
diff --git a/js/src/views/SearchView.vue b/js/src/views/SearchView.vue
index 611a58fb..57a226ba 100644
--- a/js/src/views/SearchView.vue
+++ b/js/src/views/SearchView.vue
@@ -424,7 +424,7 @@
     <div class="flex-1 px-2">
       <div
         id="results-anchor"
-        class="hidden sm:flex items-center justify-between dark:text-slate-100"
+        class="hidden sm:flex items-center justify-between dark:text-slate-100 mb-2"
       >
         <p v-if="totalCount === 0">
           <span v-if="contentType === ContentType.EVENTS">{{
@@ -465,7 +465,14 @@
           </span>
         </p>
         <div class="flex gap-2">
-          <o-select :placeholder="t('Sort by')" v-model="sortBy">
+          <label class="sr-only" for="sortOptionSelect">{{
+            t("Sort by")
+          }}</label>
+          <o-select
+            :placeholder="t('Sort by')"
+            v-model="sortBy"
+            id="sortOptionSelect"
+          >
             <option
               v-for="sortOption in sortOptions"
               :key="sortOption.key"