[TASK] Force accessible focus styles

benjaminkott · Jul 12, 2023 · bd11190 · bd11190
1 parent bcb93af
commit bd11190
Show file tree

Hide file tree

Showing 10 changed files with 233 additions and 78 deletions.
diff --git a/Resources/Public/Css/bootstrap5-rte.css b/Resources/Public/Css/bootstrap5-rte.css
diff --git a/Resources/Public/Css/bootstrap5-rte.min.css b/Resources/Public/Css/bootstrap5-rte.min.css
diff --git a/Resources/Public/Css/bootstrap5-theme.css b/Resources/Public/Css/bootstrap5-theme.css
diff --git a/Resources/Public/Css/bootstrap5-theme.min.css b/Resources/Public/Css/bootstrap5-theme.min.css
diff --git a/Resources/Public/Scss/bootstrap5/compat/_form.scss b/Resources/Public/Scss/bootstrap5/compat/_form.scss
@@ -29,4 +29,9 @@ fieldset.form-group {
     input[type="password"] {
         @extend .form-control;
     }
+    input[type="submit"] {
+        margin-top: 1rem;
+        @extend .btn;
+        @extend .btn-primary;
+    }
 }
diff --git a/Resources/Public/Scss/bootstrap5/theme.scss b/Resources/Public/Scss/bootstrap5/theme.scss
@@ -23,8 +23,10 @@
 //
 // Components
 //
+@import "../components/form";
 @import "../components/button";
 @import "../components/navbar";
+@import "../components/nav";
 @import "../components/backendlayout";
 @import "../components/section";
 @import "../components/frame";

diff --git a/Resources/Public/Scss/components/_accordion.scss b/Resources/Public/Scss/components/_accordion.scss
@@ -47,3 +47,20 @@ $accordion-content-gap:     $spacer !default;
         }
     }
 }
+
+//
+// Accessible focus styles
+//
+.accordion-button {
+    --#{$prefix}accordion-btn-focus-ring-contrast-color: #ffffff;
+    --#{$prefix}accordion-btn-focus-ring-color: #000000;
+}
+.accordion-button:focus-visible {
+    z-index: 3;
+    border-color: var(--#{$prefix}accordion-btn-focus-border-color);
+    outline: 0;
+    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+    --bs-accordion-btn-focus-box-shadow:
+        0 0 0 2px var(--#{$prefix}accordion-btn-focus-ring-contrast-color),
+        0 0 0 4px var(--#{$prefix}accordion-btn-focus-ring-color);
+}
diff --git a/Resources/Public/Scss/components/_form.scss b/Resources/Public/Scss/components/_form.scss
@@ -0,0 +1,14 @@
+//
+// Accessible focus styles
+//
+.form-check-input:focus-visible,
+.form-select:focus-visible,
+.form-control:focus-visible {
+    --#{$prefix}input-focus-ring-contrast-color: #ffffff;
+    --#{$prefix}input-focus-ring-color: #000000;
+    outline: 0;
+    box-shadow:
+        $input-focus-box-shadow,
+        0 0 0 2px var(--#{$prefix}input-focus-ring-contrast-color),
+        0 0 0 4px var(--#{$prefix}input-focus-ring-color);
+}
diff --git a/Resources/Public/Scss/components/_nav.scss b/Resources/Public/Scss/components/_nav.scss
@@ -0,0 +1,9 @@
+//
+// Navs
+//
+.nav-link {
+    &:focus-visible {
+        outline: 2px solid;
+        box-shadow: none;
+    }
+}
diff --git a/Resources/Public/Scss/components/navbar/_link.scss b/Resources/Public/Scss/components/navbar/_link.scss
@@ -10,10 +10,6 @@
         align-items: center;
         gap: .25em;
         border-radius: 2px;
-        &:focus-visible {
-            outline: 2px solid;
-            box-shadow: none;
-        }
     }
     .nav-link-icon {
         flex-grow: 0;