feat(accordion): new rendering to improve accessibility (#1792)

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Jul 28, 2023 · 3e189b0 · 3e189b0
1 parent 17f6f4d
commit 3e189b0
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 5 deletions.
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -30,6 +30,7 @@
   --#{$prefix}accordion-body-padding-end: #{$accordion-body-padding-end}; // Boosted mod
   --#{$prefix}accordion-body-padding-bottom: #{$accordion-body-padding-bottom}; // Boosted mod
   --#{$prefix}accordion-body-padding-start: #{$accordion-body-padding-start}; // Boosted mod
+  --#{$prefix}accordion-btn-hover-bg: #{$accordion-button-hover-bg}; // Boosted mod
   --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
   --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
   // scss-docs-end accordion-css-vars
@@ -73,6 +74,7 @@
   &:hover {
     z-index: 2;
     color: var(--#{$prefix}accordion-active-color); // Boosted mod
+    background-color: var(--#{$prefix}accordion-btn-hover-bg); // Boosted mod
   }
 
   &:focus {
@@ -158,6 +160,7 @@
   // scss-docs-start accordion-dark-css-vars
   --#{$prefix}accordion-btn-color: #{$accordion-dark-button-color};
   --#{$prefix}accordion-btn-bg: #{$accordion-dark-button-bg};
+  --#{$prefix}accordion-btn-hover-bg: #{$accordion-dark-button-hover-bg};
   --#{$prefix}accordion-active-color: #{$accordion-dark-button-active-color};
   --#{$prefix}accordion-border-color: #{$accordion-dark-border-color};
   --#{$prefix}accordion-color: #{$accordion-dark-color};

diff --git a/scss/_footer.scss b/scss/_footer.scss
@@ -82,6 +82,8 @@
       --#{$prefix}accordion-btn-font-size: #{$footer-font-size-sm};
       --#{$prefix}accordion-btn-line-height: #{$footer-accordion-line-height};
       --#{$prefix}accordion-btn-letter-spacing: #{$footer-letter-spacing};
+      --#{$prefix}accordion-active-color: #{$footer-accordion-active-color};
+      --#{$prefix}accordion-btn-hover-bg: #{$footer-accordion-btn-hover-bg};
     }
 
     .footer-column:first-of-type .accordion-header:first-of-type,

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1704,9 +1704,9 @@ $accordion-border-color:                  $gray-500 !default; // Boosted mod
 $accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
 $accordion-inner-border-radius:           subtract($accordion-border-radius, #{$accordion-border-width}) !default;
 
-$accordion-body-padding-top:              5px !default; // Boosted mod
-$accordion-body-padding-end:              $spacer !default; // Boosted mod
-$accordion-body-padding-bottom:           $spacer !default; // Boosted mod
+$accordion-body-padding-top:              $spacer !default; // Boosted mod
+$accordion-body-padding-end:              0 !default; // Boosted mod
+$accordion-body-padding-bottom:           $spacer * 1.5 !default; // Boosted mod
 $accordion-body-padding-start:            0 !default; // Boosted mod
 // fusv-disable
 $accordion-body-padding-y:                $spacer !default; // Deprecated in Boosted 5.2.3 to divide it in -padding<top | end | bottom |start>
@@ -1718,8 +1718,9 @@ $accordion-button-padding-x:              $accordion-padding-x !default;
 $accordion-button-color:                  var(--#{$prefix}body-color) !default;
 $accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
 $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
+$accordion-button-hover-bg:               var(--#{$prefix}secondary-bg) !default; // Boosted mod
 $accordion-button-active-bg:              null !default; // Boosted mod: instead of `var(--#{$prefix}primary-bg-subtle)`
-$accordion-button-active-color:           $accessible-orange !default; // Boosted mod: instead of `var(--#{$prefix}primary-text-emphasis)`
+$accordion-button-active-color:           var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `var(--#{$prefix}primary-text-emphasis)`
 
 // Boosted mod: no $accordion-button-focus-border-color
 // Boosted mod: no $accordion-button-focus-box-shadow
@@ -1753,7 +1754,8 @@ $accordion-dark-bg:                       $black !default; // Boosted mod
 $accordion-dark-border-color:             $gray-700 !default; // Boosted mod
 $accordion-dark-button-color:             $accordion-dark-color !default; // Boosted mod
 $accordion-dark-button-bg:                $accordion-dark-bg !default; // Boosted mod
-$accordion-dark-button-active-color:      $brand-orange !default; // Boosted mod
+$accordion-dark-button-hover-bg:          $gray-900 !default; // Boosted mod
+$accordion-dark-button-active-color:      $white !default; // Boosted mod
 // scss-docs-end accordion-dark-variables
 
 // Tooltips
@@ -2348,6 +2350,8 @@ $footer-line-height-md:                   $line-height-base !default;
 $footer-title-font-weight:                $font-weight-bold !default;
 $footer-letter-spacing:                   $letter-spacing-base !default;
 $footer-accordion-line-height:            $spacer * 1.45 !default;
+$footer-accordion-active-color:           $brand-orange !default;
+$footer-accordion-btn-hover-bg:           null !default;
 $footer-nav-link-font-weight:             $font-weight-bold !default;
 
 $footer-title-content-padding-top:        $spacer * 1.25 !default;

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
@@ -19,13 +19,35 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
 
 ### Components
 
+- **Accordion**
+  - <span class="badge bg-warning">Warning</span> Accordion rendering has been improved for better accessibility. Although it is transparent for basic usage, you might want to check the rendering of your custom components if they are composed of an accordion.
+
 - **Orange navbar**
   - <span class="badge bg-warning">Warning</span> The minimizing behavior with `.header-minimized` is applied to the `<header>` instead of one of its children directly.
 
 ### Forms
 
 - <span class="badge bg-success">New</span> In order to improve accessibility for people suffering from any form of color blindness, we added a visual cue to form elements on error when focused so information does not rely exclusively on color anymore. Although is has no direct impact, you might want to apply this same modification within your custom form controls if you have any.
 
+### CSS and Sass variables
+
+- <details class="mb-2">
+    <summary><span class="badge bg-success">New</span> CSS variables:</summary>
+    <ul>
+      <li><code>--bs-accordion-btn-hover-bg</code></li>
+    </ul>
+  </details>
+
+- <details class="mb-2">
+    <summary><span class="badge bg-success">New</span> Sass variables:</summary>
+    <ul>
+      <li><code>$accordion-button-hover-bg</code></li>
+      <li><code>$accordion-dark-button-hover-bg</code></li>
+      <li><code>$footer-accordion-active-color</code></li>
+      <li><code>$footer-accordion-btn-hover-bg</code></li>
+    </ul>
+  </details>
+
 ## v5.3.1
 
 <hr class="mb-4">