Accessibilité ♿️

client/assets/main.scss

@@ -1,22 +1,10 @@
-@import "dsfr";
+@use "dsfr";
 
 body {
   height: 100%;
   overflow-x: hidden;
 }
 
-.sr-only{
-  border: 0 !important;
-  clip: rect(1px,1px,1px,1px) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
 fieldset {
   border: none;
   padding: 0;
@@ -69,6 +57,8 @@ fieldset {
   &__title {
     color: var(--blue-france-sun-113-625);
     line-height: 1.5rem;
+    display: flex;
+    align-items: center;
   }
 
   &__desc {
@@ -88,21 +78,28 @@ fieldset {
 
   &-3 {
     background-color: #FC4E2A;
-    color: var(--grey-1000-50);
+    color: #000;
   }
 
   &-2 {
     background-color: #FEB24C;
-    color: var(--grey-1000-50);
+    color: #000;
   }
 
   &-1 {
-    background-color: #BCA12B;
-    color: var(--grey-1000-50);
+    background-color: #FFEDA0;
+    color: #000;
   }
 
   &-0 {
     background-color: var(--info-950-100);
+    color: #000;
+  }
+}
+
+.fr-badge {
+  &.situation-level-bg-0, &.situation-level-bg-1, &.situation-level-bg-2, &.situation-level-bg-3, &.situation-level-bg-4 {
+    border: 1px solid currentColor;
   }
 }
 
@@ -120,7 +117,7 @@ fieldset {
   }
 
   &-1 {
-    color: #BCA12B;
+    color: #FFEDA0;
   }
 
   &-0 {

client/components/FdrAutoComplete.vue

@@ -57,11 +57,7 @@ function convertRemToPixels(rem) {
 function selectOption(option) {
   optionSelected.value = option;
   emit('update:modelValue', option);
-  if (inputSearchBar.value && inputSearchBar.value.$el.children[1]) {
-    nextTick(() => {
-      inputSearchBar.value.$el.children[1].focus();
-    });
-  }
+  inputSearchBar.value?.focus();
 }
 
 const displayAtTheTop = ref(false);
@@ -122,19 +118,18 @@ function checkKeyboardNav($event) {
     $event.preventDefault();
   }
   if ($event.key === 'Enter') {
-    selectOption(props.options[activeOption.value > 0 ? activeOption.value : 0]);
+    selectOption(props.options[activeOption.value >= 0 ? activeOption.value : 0]);
     hasFocus.value = false;
   } else if ($event.key === 'ArrowUp') {
     moveToPreviousOption();
   } else if ($event.key === 'ArrowDown') {
     moveToNextOption();
   } else if ($event.key === 'search') {
-    if (!!props.options.length) {
-      selectOption(props.options[activeOption.value > 0 ? activeOption.value : 0]);
+    if (props.options.length) {
+      selectOption(props.options[activeOption.value >= 0 ? activeOption.value : 0]);
     } else if (optionSelected.value) {
       emit('update:modelValue', optionSelected.value);
     }
-    hasFocus.value = false;
   }
 }
 
@@ -150,50 +145,68 @@ function displayOption(option) {
   return toDisplay;
 }
 
+defineExpose({
+  focusInput: () => inputSearchBar.value.focus(),
+});
+
 </script>
 
 <template>
   <div ref="container"
        class="relative search-autocomplete">
-    <DsfrSearchBar :model-value="modelValue"
-                   :placeholder="placeholder"
-                   :label="label"
-                   v-bind="$attrs"
-                   :required="required"
-                   :large="!light"
-                   :disabled="disabled"
-                   buttonText="Rechercher"
-                   @update:model-value="$emit('update:modelValue', $event)"
-                   ref="inputSearchBar"
-                   @focus="hasFocus = true"
-                   @blur="looseFocus()"
-                   @keydown="checkKeyboardNav($event)"
-                   @search="checkKeyboardNav({key: 'search'})" />
-    <div v-if="displayOptions"
-         class="sr-only"
-         aria-live="polite"
-         aria-atomic="true">
-      <p>{{ options.length }} options disponibles</p>
+    <div class="fr-search-bar">
+      <DsfrInput label-visible
+                 :model-value="modelValue"
+                 :hint="placeholder"
+                 :label="label"
+                 v-bind="$attrs"
+                 :required="required"
+                 :large="!light"
+                 :disabled="disabled"
+                 role="combobox"
+                 aria-autocomplete="list"
+                 aria-expanded="true"
+                 :aria-haspopup="displayOptions"
+                 :autocomplete="hasFocus ? 'off' : 'address-line1'"
+                 buttonText="Rechercher"
+                 @update:model-value="$emit('update:modelValue', $event)"
+                 ref="inputSearchBar"
+                 @focus="hasFocus = true"
+                 @blur="looseFocus()"
+                 @keydown="checkKeyboardNav($event)" />
+      <DsfrButton title="Rechercher"
+                  :disabled="disabled"
+                  :aria-disabled="disabled"
+                  @click="checkKeyboardNav({key: 'search'})">
+        Rechercher
+      </DsfrButton>
+      <div v-show="displayOptions"
+           class="fr-sr-only"
+           aria-live="polite"
+           aria-atomic="true">
+        <p>{{ options.length }} options disponibles</p>
+      </div>
+      <ul v-show="displayOptions"
+          role="listbox"
+          :aria-label="ariaLabelList"
+          ref="optionsList"
+          tabindex="1"
+          class="list-none absolute m-0 right-0 z-1 left-0 bg-white box-shadow max-h-17 scroll pointer"
+          :class="{'at-the-top': displayAtTheTop,}">
+        <li v-for="(option, i) of options"
+            :key="option"
+            role="option"
+            tabindex="0"
+            :aria-selected="optionSelected === option"
+            class="list-item fr-p-1w fr-pl-2w"
+            :class="{ 'active-option': activeOption === i }"
+            @click.stop="selectOption(option)"
+            @keyup.enter="selectOption(option)">
+          {{ displayOption(option) }}
+        </li>
+      </ul>
+
     </div>
-    <ul v-show="displayOptions"
-        role="listbox"
-        :aria-label="ariaLabelList"
-        ref="optionsList"
-        tabindex="1"
-        class="list-none absolute m-0 right-0 z-1 left-0 bg-white box-shadow max-h-17 scroll pointer"
-        :class="{'at-the-top': displayAtTheTop,}">
-      <li v-for="(option, i) of options"
-          :key="option"
-          role="option"
-          tabindex="0"
-          :aria-selected="optionSelected === option"
-          class="list-item fr-p-1w fr-pl-2w"
-          :class="{ 'active-option': activeOption === i }"
-          @click.stop="selectOption(option)"
-          @keyup.enter="selectOption(option)">
-        {{ displayOption(option) }}
-      </li>
-    </ul>
   </div>
 </template>
 
@@ -233,10 +246,35 @@ function displayOption(option) {
     margin-top: 0;
     padding: 0;
     text-align: left;
+    top: 100%;
 
     li {
       cursor: pointer;
     }
   }
 }
+
+.fr-search-bar {
+  flex-wrap: wrap;
+
+  :deep(.fr-input), .fr-btn {
+    margin-top: .5rem;
+    flex: 1;
+  }
+
+  :deep(.fr-label) {
+    width: 100%;
+    height: auto;
+    position: relative;
+  }
+
+  /**
+ * Obligé de faire ça car la couleur est codée en dur dans le DSFR
+ * sans prendre en compte que ce champ pouvait être disabled.
+ */
+  .fr-input:disabled {
+    box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey);
+    color: var(--text-disabled-grey);
+  }
+}
 </style>

client/components/accueil/Carte.vue

@@ -109,10 +109,6 @@ const date = computed(() => {
       height: 20px;
       width: 20px;
     }
-
-    .situation-level-bg-1 {
-      background-color: #FFEDA0;
-    }
   }
 
   &-drom {

client/components/accueil/Gestes.vue

@@ -55,7 +55,8 @@ const selectedTagIndex: Ref<number> = ref(0);
       <DsfrTabs class="tabs-light" v-model="selectedTagIndex">
         <DsfrTabContent v-for="(tag, index) in gesteTags"
                         :panel-id="'tab-content-' + index"
-                        :tab-id="'tab-' + index">
+                        :tab-id="'tab-' + index"
+                        role="">
           <div class="fr-grid-row fr-grid-row fr-grid-row--gutters fr-grid-row--center">
             <GestesCard v-for="geste in gestesFiltered(tag)"
                         :geste="geste"

client/components/accueil/Liens.vue

@@ -15,7 +15,7 @@ import liens from '../../data/liens.json'
              target="_blank"
              rel="external"
              class="fr-link"
-             :title="lien.title + ' - nouvelle fenêtre'">
+             :title="lien.title + ' (nouvelle fenêtre)'">
             {{ lien.title }}
           </a>
         </li>

client/components/carte/Map.vue

@@ -564,11 +564,6 @@ h6 {
 }
 
 .map-legend, :deep(.maplibregl-popup-content) {
-  .situation-level-bg-1 {
-    background-color: #FFEDA0;
-    color: var(--grey-50-1000);
-  }
-
   .situation-level-bg-0 {
     background-color: #e8edff;
     color: var(--grey-50-1000);

client/components/carte/Table.vue

@@ -127,15 +127,17 @@ watch(() => props, () => {
         <h3 class="fr-mt-2w fr-mb-1w fr-h4">{{ pageTitle }}</h3>
         <div class="fr-grid-row fr-grid-row--center departement-card-wrapper fr-mb-2w">
           <div class="fr-col-lg fr-p-2w fr-m-1w departement-card" v-for="resume of dataResume">
-            <div>
-              <DsfrBadge small
-                         no-icon
-                         :class="classObject(utils.getRestrictionRank(resume.niveauGravite))"
-                         :label="resume.label" />
-            </div>
-            <div class="departement-card__number fr-mt-1w">
-              {{ resume.number }} départements
-            </div>
+            <ul>
+              <li>
+                <DsfrBadge small
+                           no-icon
+                           :class="classObject(utils.getRestrictionRank(resume.niveauGravite))"
+                           :label="resume.label" />
+              </li>
+              <li class="departement-card__number fr-mt-1w">
+                {{ resume.number }} départements
+              </li>
+            </ul>
           </div>
         </div>
       </div>
@@ -148,6 +150,7 @@ watch(() => props, () => {
                        placeholder="Rechercher"
                        large
                        buttonText="Rechercher"
+                       title="Rechercher un département"
                        ref="input"
                        @search="checkKeyboardNav({key: 'search'})" />
         <DsfrTable :title="tableTitle"
@@ -212,6 +215,16 @@ watch(() => props, () => {
   &-wrapper {
     margin: 0 -0.5rem;
   }
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    padding: 0;
+    list-style-type: none;
+  }
 }
 
 .fr-table {