🐛 fix(preference): correctifs mode contrasté et reduce motion [DS-377…

…3] (#952)

- corrections diverses sur le mode contrasté

src/component/breadcrumb/style/_module.scss

@@ -5,6 +5,7 @@
 
 @use 'module/spacing';
 @use 'module/selector';
+@use 'module/preference';
 
 /**
 un padding de 4px et une marge négative en compensation sont mis en place afin d'éviter de couper le focus.
@@ -66,6 +67,7 @@ un padding de 4px et une marge négative en compensation sont mis en place afin
  * flèche séparatrice en font-icon
  */
  &:not(:first-child) {
+ @include icon-forced-color(canvastext, true, before);
  @include icon(arrow-right-s-line, sm, before) {
  @include margin-x(1v);
  vertical-align: -0.0625em;
@@ -83,10 +85,19 @@ un padding de 4px et une marge négative en compensation sont mis en place afin
  @include hover-underline;
  @include padding(0);
 
+ @include preference.forced-colors {
+ text-decoration: underline;
+ text-underline-offset: 5px;
+ }
+
  @include selector.current {
  pointer-events: none;
  cursor: default;
  @include disable-underline;
+
+ @include preference.forced-colors {
+ text-decoration: none;
+ }
  }
  }
 }

src/component/card/style/module/_content.scss

@@ -104,7 +104,8 @@
  @include padding-bottom(20v); // 8v (padding card) + 6v (icon) + 2v (padding end) + 4v (marge texte icon)
  }
 
- &#{ns(enlarge-link)} &__title a {
+ &#{ns(enlarge-link)} &__title a,
+ &#{ns(enlarge-button)} &__title button {
  @include preference.forced-colors {
  text-decoration: none;
  }

src/component/connect/style/module/_group.scss

@@ -3,6 +3,8 @@
 /// @group connect
 ////
 
+@use 'module/preference';
+
 #{ns-group(connect)} {
  @include set-text-margin(0 0 4v 0);
 
@@ -12,5 +14,10 @@
 
  #{ns(connect)} + p a {
  @include text-style(sm);
+
+ @include preference.forced-colors {
+ text-decoration: underline;
+ text-underline-offset: 5px;
+ }
  }
 }

src/component/consent/style/module/_services.scss

@@ -4,6 +4,7 @@
 ////
 
 @use 'module/spacing';
+@use 'module/preference';
 
 #{ns(consent-service)} {
  @include relative;
@@ -96,6 +97,10 @@
  @include after {
  @include margin-right(-5v);
  transition: transform 0.3s;
+
+ @include preference.reduce-motion {
+ transition: none;
+ }
  }
 
  &[aria-expanded="true"] {

src/component/form/deprecated/style/_module.scss

@@ -3,6 +3,8 @@
 /// @group form
 ////
 
+@use 'module/preference';
+
 #{ns-group(select), ns-group(input)} {
  &:not(:last-child) {
  @include margin-bottom(6v);
@@ -100,6 +102,9 @@
  display: inline-block;
  @include margin-right(1v);
  }
+ @include icon-forced-color(canvastext, true, before);
+
+
 
  & + #{ns(error-text)},
  & + #{ns(valid-text)},

src/component/modal/style/_module.scss

@@ -131,6 +131,14 @@
  transition: box-shadow 0.3s;
  z-index: z-index(modal-footer);
 
+ @include preference.forced-colors {
+ border-top: 1px solid;
+ }
+
+ @include preference.reduce-motion {
+ transition: none;
+ }
+
  #{ns-group(btns)} {
  margin-bottom: -1rem;
  width: calc(100% + #{space(4v)});

src/component/radio/deprecated/style/_module.scss

@@ -1,9 +1,12 @@
 @use 'module/spacing';
+@use 'module/preference';
 
 #{ns(fieldset)} {
  #{ns(fieldset__content)} {
  #{ns-group(radio)}:not(#{ns(radio-rich)}) {
  input[type="radio"] {
+ top: spacing.space(3v);
+
  + label {
  background-position: calc(#{space(-1v)} + 1px) calc(#{space(2v)} + 1px), calc(#{space(-1v)} + 1px) calc(#{space(2v)} + 1px);
  }
@@ -12,6 +15,8 @@
 
  #{ns-group(radio)}--sm:not(#{ns(radio-rich)}) {
  input[type="radio"] {
+ top: spacing.space(4v);
+
  + label {
  background-position: calc(#{space(-0.5v)} + 1px) calc(#{space(4v)} - 1px), calc(#{space(-0.5v)} + 1px) calc(#{space(4v)} - 1px);
  }
@@ -78,6 +83,10 @@
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 100%, 100% 0, 0 0.25rem;
 
+ @include preference.forced-colors {
+ outline: 1px solid;
+ }
+
  img,
  svg {
  @include max-size(14v, 14v);

src/component/select/style/_module.scss

@@ -5,6 +5,7 @@
 
 @use 'module/spacing';
 @use 'module/reset';
+@use 'module/preference';
 
 #{ns(select)} {
  display: block;
@@ -16,6 +17,9 @@
  background-repeat: no-repeat;
  background-position: spacing.space(calc(100% - 4v) 50%);
  background-size: spacing.space(4v 4v);
+ @include preference.forced-colors {
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' fill='canvastext'><path d='M12,13.1l5-4.9l1.4,1.4L12,15.9L5.6,9.5l1.4-1.4L12,13.1z'/></svg>");
+ }
 }
 
 #{ns(select-group)} {

src/component/summary/style/_module.scss

@@ -44,6 +44,11 @@
  font-weight: bold;
  }
 
+ @include preference.forced-colors {
+ text-decoration: underline;
+ text-underline-offset: 5px;
+ }
+
  &:not(:hover):not(:active) {
  @include link-underline-hover-only;
  }

src/core/style/display/tool/_hr.scss

@@ -3,6 +3,7 @@
 /// @group core
 ////
 
+@use 'module/preference';
 @use 'module/color';
 
 @mixin build-hr() {
@@ -13,6 +14,10 @@
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 0;
+
+ @include preference.forced-colors {
+ border-top: 1px solid;
+ }
 }
 
 @mixin build-hr-scheme($legacy) {