Dark accordions

[louismaximepiton]

Description

Adding a .accordion-dark for a dark variant of accordions.

Motivation & Context

Need for orange footers

Types of changes

• New feature (non-breaking change which adds functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Development

• Should match specs (eg. either the Web UI Kit or any pattern from the WAI — or both…)
• Docs added:
  • including the "Sass" part using scss-docs shortcode
  • in /about/overview/#custom-components if it is a new Orange custom component
  • in /getting-started/introduction/#components if it is a new Orange custom component that requires JavaScript (and Popper)
  • in /customize/overview#csps-and-embedded-svgs if it is a new Orange custom component that includes embedded SVGs in our CSS
  • in /forms/validation/?#supported-elements if it is a new Orange custom component that is a form control
  • in /forms/overview/ if it is a new Orange custom component that is a form control
• Check (and fix) RTL version
• Run linters
• Run compilers
• Tests added for JS-side
• Run tests
• Manually run BrowserStack test
• Manually run Percy test
• Cross-browser test:
  • Firefox ESR
  • Latest Edge, Chrome, Firefox, Safari
  • iOS Safari
  • Chrome & Firefox on Android
• Clean up the branch using rebase -i
• Commited with feat(…): … message
• Mention it in Migration Guide (if back-from-v4): renamed variables, changes in markup requirement, etc.

Reviews

• Code review
• A11y review
• Design review

Related issues

#917

Live preview

[julien-deramond]

This time, pa11y-ci failed with a real error 😄

    Error: Elements must have sufficient color contrast (https://dequeuniversity.com/rules/axe/3.5/color-contrast?application=axeAPI)
    color-contrast
    <code>.accordion-body</code> (select with "#panelsDark-collapseOne > div > code")

You can try with a lighter gray. Another solution is to let the text black and highlight it with white.

Example of implementation:

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 72636e5a6..5d8819124 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -149,5 +149,10 @@
       border-bottom: $accordion-border-width solid $accordion-dark-border-color;
     }
   }
+
+  var,
+  code {
+    color: $code-dark-color;
+  }
 }
 // End mod
diff --git a/scss/_variables.scss b/scss/_variables.scss
index ba383bed6..3f96338a5 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1788,6 +1788,7 @@ $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;

 $code-font-size:                    .875em !default;
 $code-color:                        $gray-700 !default;
+$code-dark-color:                   $gray-300 !default; // Boosted mod

 $kbd-padding-y:                     $spacer * .05 !default;
 $kbd-padding-x:                     $spacer * .05 !default;

[louismaximepiton]

Differents solutions I've seen so far, and I'm confused about the one to choose :

• Adding a background to <code> and a fix color to its text. Issue: Change every code, even for example code -> not good to me.
• Find a fixed color that goes well for black and white background color at least (#767676 seems to do it on AA level). Issue: not flexible + not AAA level.
• Change in every component the text color for <code>. Issue: Not easy to maintain.
• Change the color value to inherit. Issue: Hard to differenciate from the normal text.

[julien-deramond]

As discussed in DM, the issue regarding the <code> happens too with the links (displayed black with a black bg). We should wait to identify a solution to tackle those 2 topics before merging this PR.

[julien-deramond]

Sound good to me after the dark texts PR and some minor modifications. @louismaximepiton I let you check my last commits on this branch. If it's OK for you then I can merge it.