show focus indicator on toggle buttons

DISIC · Mar 30, 2023 · d9cc8ff · d9cc8ff
1 parent e86f88b
commit d9cc8ff
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/confiture-web-app/src/components/AuditGenerationFilters.vue b/confiture-web-app/src/components/AuditGenerationFilters.vue
@@ -70,7 +70,7 @@ watch(
     v-if="!showFilters"
     ref="displayFiltersRef"
     type="button"
-    class="fr-btn fr-btn--sm fr-btn--tertiary fr-icon-arrow-right-s-line-double"
+    class="fr-btn fr-btn--sm fr-btn--tertiary fr-icon-arrow-right-s-line-double toggle-column-button"
     @click="displayFilters"
   >
     <span class="sr-only">Afficher la colonne des filtres</span>
@@ -81,7 +81,7 @@ watch(
       <button
         ref="hideFiltersRef"
         type="button"
-        class="fr-btn fr-btn--sm fr-btn--tertiary fr-icon-arrow-left-s-line-double"
+        class="fr-btn fr-btn--sm fr-btn--tertiary fr-icon-arrow-left-s-line-double toggle-column-button"
         @click="hideFilters"
       >
         <span class="sr-only">Cacher la colonne des filtres</span>
@@ -213,6 +213,12 @@ watch(
   justify-content: space-between;
   margin-bottom: 2rem;
 }
+
+.toggle-column-button:focus {
+  outline: 2px solid #0a76f6;
+  outline-offset: -2px;
+}
+
 .evaluated-criteria-filter {
   border-top: 1px solid var(--border-default-grey);
   border-bottom: 1px solid var(--border-default-grey);