forge-joniko/ldc-volena
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Some a11y fixes

Browse source
This commit is contained in:
Jérémy Munsch 2024-02-21 10:48:27 +01:00
parent 0615ff51c2
commit ffdff8525d
No known key found for this signature in database
GPG key ID: 18361AF3BFEC0FEC
4 changed files with 63 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/sass/fo/utilities/_bootstrap-custom.scss
View file

@ -1,5 +1,6 @@
@use "sass:list";
@import "mixins";
@import "./bs-polyfills/buttons";
// SET SOME CLASSES WITH BOOTSTRAP BREAKPOINTS
// * Reponsive borders

57
resources/sass/fo/utilities/bs-polyfills/_buttons.scss Normal file
View file

@ -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);
}
}

4
resources/views/fo/layouts/main-menu-toggle.blade.php
View file

@ -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>

5
resources/views/fo/layouts/nav-menu.blade.php
View file

@ -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>