From ffdff8525dd2b7ebf55136336c1704e73a2a898d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Wed, 21 Feb 2024 10:48:27 +0100
Subject: [PATCH] Some a11y fixes

---
 .../sass/fo/utilities/_bootstrap-custom.scss  |  1 +
 .../fo/utilities/bs-polyfills/_buttons.scss   | 57 +++++++++++++++++++
 .../fo/layouts/main-menu-toggle.blade.php     |  4 +-
 resources/views/fo/layouts/nav-menu.blade.php |  5 +-
 4 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 resources/sass/fo/utilities/bs-polyfills/_buttons.scss

diff --git a/resources/sass/fo/utilities/_bootstrap-custom.scss b/resources/sass/fo/utilities/_bootstrap-custom.scss
index fa611ec..d01e158 100644
--- a/resources/sass/fo/utilities/_bootstrap-custom.scss
+++ b/resources/sass/fo/utilities/_bootstrap-custom.scss
@@ -1,5 +1,6 @@
 @use "sass:list";
 @import "mixins";
+@import "./bs-polyfills/buttons";
 
 // SET SOME CLASSES WITH BOOTSTRAP BREAKPOINTS
 // * Reponsive borders
diff --git a/resources/sass/fo/utilities/bs-polyfills/_buttons.scss b/resources/sass/fo/utilities/bs-polyfills/_buttons.scss
new file mode 100644
index 0000000..18c7f96
--- /dev/null
+++ b/resources/sass/fo/utilities/bs-polyfills/_buttons.scss
@@ -0,0 +1,57 @@
+// Fixes https://trungvose.com/experience/focus-and-focus-visible/
+.btn {
+    &:focus-visible,&:focus:not(:focus-visible) {
+        border-color: var(--#{$prefix}btn-hover-border-color);
+        color: var(--#{$prefix}btn-hover-color);
+        outline: 0;
+
+        @include gradient-bg(var(--#{$prefix}btn-hover-bg));
+        // Avoid using mixin so we can pass custom focus shadow properly
+        @if $enable-shadows {
+            box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+        } @else {
+            box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+        }
+    }
+
+    .btn-check:focus-visible + &,, .btn-check:focus:not(:focus-visible) + & {
+        border-color: var(--#{$prefix}btn-hover-border-color);
+        outline: 0;
+        // Avoid using mixin so we can pass custom focus shadow properly
+        @if $enable-shadows {
+            box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+        } @else {
+            box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+        }
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    .btn-check:checked + &,
+    :not(.btn-check) + &:active,
+    &:first-child:active,
+    &.active,
+    &.show {
+        &:focus-visible,&:focus:not(:focus-visible) {
+            // Avoid using mixin so we can pass custom focus shadow properly
+            @if $enable-shadows {
+                box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+            } @else {
+                box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+            }
+        }
+    }
+}
+
+// Make a button look and behave like a link
+.btn-link {
+    &:hover,
+    &:focus-visible,
+    &:focus:not(:focus-visible) {
+        text-decoration: $link-hover-decoration;
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    &:focus-visible, &:focus:not(:focus-visible) {
+        color: var(--#{$prefix}btn-color);
+    }
+}
diff --git a/resources/views/fo/layouts/main-menu-toggle.blade.php b/resources/views/fo/layouts/main-menu-toggle.blade.php
index f4a7d97..bd1e2cf 100644
--- a/resources/views/fo/layouts/main-menu-toggle.blade.php
+++ b/resources/views/fo/layouts/main-menu-toggle.blade.php
@@ -2,6 +2,6 @@
     <img class="img-fluid" id="header-main-menu-logo" src="{{ Vite::asset('resources/assets/images/header/volena-logo.svg') }}"
         alt="{{ __('Volena - Vollailers Engagés pour l\'Avenir') }}" role="img"
         aria-label="{{ __('Volena - Vollailers Engagés pour l\'Avenir') }}">
-    <button class="btn btn-primary rounded-pill ms-4" data-close-title="{{ __('Fermer le Menu') }}" data-bs-target="#main-menu"
-        title="{{ __('Ouvrir le Menu') }}" aria-expanded="false" aria-controls="main-menu">{{ __('Menu') }}</button>
+    <button class="btn btn-primary rounded-pill ms-4" data-bs-target="#main-menu" title="{{ __('Ouvrir le Menu') }}" role="button"
+        aria-expanded="false" aria-controls="main-menu">{{ __('Menu') }}</button>
 </div>
diff --git a/resources/views/fo/layouts/nav-menu.blade.php b/resources/views/fo/layouts/nav-menu.blade.php
index 693f448..c4b18a8 100644
--- a/resources/views/fo/layouts/nav-menu.blade.php
+++ b/resources/views/fo/layouts/nav-menu.blade.php
@@ -1,4 +1,5 @@
-<div class="offcanvas offcanvas-top rounded" id="main-menu" aria-labelledby="header-main-menu-logo" tabindex="-1">
+<div class="offcanvas offcanvas-top rounded" id="main-menu" role="menu"
+    aria-label="{{ __('Menu du site :appname', ['appname' => config('app.name')]) }}" tabindex="-1">
     <div class="offcanvas-body mb-3 p-0">
         <div class="sticky-top rounded bg-white">
             <div class="d-flex justify-content-between px-4 pt-3">
@@ -87,7 +88,7 @@
             @include('fo.layouts.footer-links', [
                 'separator' => '|',
                 'linkClassList' => 'link-primary',
-                'separatorClassList' => 'text-secondary opacity-50 d-none d-sm-inline',
+                'separatorClassList' => 'text-secondary d-none d-sm-inline',
             ])
         </div>
     </div>