🐛 fix(IE): correctifs divers (#955)

- corrige la numérotation du sommaire
- corrige les icones chevron du fil d'arianne
- retire le hover sur les bouton désactivés
- corrige l'alignement de la case a cocher du mot de passe
- correction des ombres sur les menus et le tooltip
- rend les liens d'évitement fonctionnels
- correction du style du curseur double désactivé

module/elevation/mixin/_drop.scss

@@ -1,12 +1,17 @@
 @use 'sass:map';
 @use 'module/legacy';
+@use 'module/utilities';
 
 @mixin drop($options: ()) {
   $legacy: map.get($options, legacy);
+  $background: map.get($options, background);
   @if $legacy {
     @include legacy.is(ie11) {
       z-index: auto;
       background: transparent;
+      @include utilities.nest($background) {
+        box-shadow: none;
+      }
     }
   }
   @else {

module/elevation/mixin/_elevate.scss

@@ -4,17 +4,17 @@
 @use 'background';
 @use 'z-index';
 @use 'shadow';
+@use 'module/elevation/variable/shadows';
 
 @mixin elevate($level, $options: ()) {
   $layer: list.nth(string.split($level, '-'), 1);
   $legacy: map.get($options, legacy);
+  $background: map.get($options, background);
 
   @include z-index.z-index($level, $legacy);
   @if not map.get($options, no-background) {
     @include background.background($layer, $options);
   }
 
-  @if not $legacy {
-    @include shadow.shadow($layer);
-  }
+  @include shadow.shadow($layer, $legacy, $background);
 }

module/elevation/mixin/_shadow.scss

@@ -1,8 +1,20 @@
 @use 'sass:map';
 @use 'module/elevation/variable/shadows';
+@use 'module/utilities';
+@use '../variable/colors';
+@use 'module/legacy';
 
-@mixin shadow($layer) {
-  @if map.has-key(shadows.$values, $layer) {
-    filter: drop-shadow(var(--#{$layer}-shadow));
+@mixin shadow($layer, $legacy: false, $background: null) {
+  @if $legacy {
+    @include utilities.nest($background) {
+      @include legacy.is(ie11) {
+        box-shadow: 0 0 0 1px #{map.get(colors.$values, light)};
+      }
+    }
+  }
+  @else {
+    @if map.has-key(shadows.$values, $layer) {
+      filter: drop-shadow(var(--#{$layer}-shadow));
+    }
   }
 }

src/component/breadcrumb/style/_legacy.scss

@@ -7,15 +7,19 @@
 @use 'module/selector';
 
 @include legacy.is(ie11) {
-  /**
-  * reset liste à puce
-  */
   #{ns(breadcrumb)} {
     @include disable-list-style-legacy;
 
     &__link {
       @include selector.not-current {
-        @include icon-legacy(arrow-right-s-line, sm, after);
+        @include icon-legacy(arrow-right-s-line, sm, after) {
+          content: '';
+          display: inline-block;
+          pointer-events: none;
+          @include margin-left(2v);
+          @include margin-right(-1v);
+          vertical-align: -4px;
+        }
       }
     }
   }

src/component/button/style/_legacy.scss

@@ -14,6 +14,14 @@
       text-decoration: none;
     }
 
+    &#{ns(btn--secondary)},
+    &#{ns(btn--tertiary)},
+    &#{ns(btn--tertiary-no-outline)} {
+      &:disabled:hover {
+        background-color: transparent;
+      }
+    }
+
     @include class-not-start-with(#{ns(btn--icon-, '')}) {
       @include has-icon {
         @include icon-legacy(null, md);

src/component/navigation/style/module/_menu.scss

@@ -29,6 +29,9 @@
       pointer-events: auto;
       @include padding(0);
       @include margin-bottom(8v);
+      background-size: 100% 1px;
+      background-position: 0 0;
+      background-repeat: no-repeat;
       @include preference.forced-colors {
         outline: 1px solid;
       }

src/component/navigation/style/scheme/_menu.scss

@@ -13,7 +13,7 @@
       @include elevation.elevate(overlap, (background: #{'&__list'}, legacy: $legacy));
 
       &__list {
-        @include color.box-shadow(open blue-france, (legacy:$legacy), top-1-in);
+        @include color.background-image(open blue-france, (legacy:$legacy));
 
         & > *:first-child,
         & > *:hover,

src/component/password/style/_legacy.scss

@@ -11,10 +11,6 @@
     &__checkbox {
       @include absolute(0, 0);
       @include margin(0);
-
-      input[type="checkbox"] {
-        top: spacing.space(-2v);
-      }
     }
   }
 }

src/component/range/style/_legacy.scss

@@ -137,4 +137,23 @@
       }
     }
   }
+
+  #{selector.ns-group(range)} {
+    &--disabled {
+      #{selector.ns(range)}--double {
+        &#{selector.ns-attr(js-range)} {
+          @include color.background-image(disabled grey, (legacy: true), 'linear-gradient(to right, $COLOR 0, $COLOR 100%)');
+
+          input[type=range] {
+            &:nth-of-type(1),
+            &:nth-of-type(2) {
+              @include selector.range-ms-fill-lower {
+                background-color: transparent;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }

src/component/skiplink/style/_legacy.scss

@@ -6,13 +6,13 @@
 @use 'module/legacy';
 
 @include legacy.is(ie11) {
-  /**
-  * Correctif
-  */
   #{ns(skiplinks)} {
+    @include disable-list-style-legacy;
+
     &.focus-within {
       position: relative;
       transform: translateY(0);
+      opacity: 1;
     }
   }
 }

src/component/summary/legacy.scss

@@ -10,6 +10,7 @@
 @include media-query.order;
 
 @import 'index';
+@import 'style/legacy';
 @import 'style/scheme';
 
 @include _summary-scheme(true);

src/component/summary/style/_legacy.scss

@@ -0,0 +1,18 @@
+////
+/// Summary Legacy
+/// @group summary
+////
+
+@use 'module/legacy';
+
+@include legacy.is(ie11) {
+  #{ns(summary)} {
+    ol {
+      list-style-type: decimal;
+    }
+
+    &__link {
+      @include before(none);
+    }
+  }
+}

src/component/tag/style/_legacy.scss

@@ -12,28 +12,28 @@
     @include icon-legacy(null, sm);
     text-decoration: none;
 
-    #{ns(tag)}--sm {
+    &#{ns(tag)}--sm {
       @include icon-legacy(null, xs, before);
     }
   }
 
   button,
   input[type=button] {
-    #{ns(tag)} {
+    &#{ns(tag)} {
       // empeche le hover du tag pressable sur ie
       @include pressed-selector(true) {
         background-size: 100% 100%, 100% 100%;
         @include icon-legacy(checkbox-circle-line, sm, after);
 
-        #{ns(tag)}--sm {
+        &#{ns(tag)}--sm {
           @include icon-legacy(null, xs, after);
         }
       }
 
-      #{ns(tag)}--dismiss {
+      &#{ns(tag)}--dismiss {
         @include icon-legacy(close-line, sm, after);
 
-        #{ns(tag)}--sm {
+        &#{ns(tag)}--sm {
           @include icon-legacy(null, xs, after);
         }
       }
@@ -48,8 +48,8 @@
     @include icon-legacy(null, sm);
 
     @include clickable-selector {
-      #{ns(tag)} {
-        #{ns(tag)}--dismiss {
+      &#{ns(tag)} {
+        &#{ns(tag)}--dismiss {
           @include icon-legacy(null, xs, after);
         }
 

src/component/tag/style/_scheme.scss

@@ -66,6 +66,10 @@
       }
 
       @include disabled.selector((), (legacy: $legacy, text: true, background: true));
+
+      &:disabled:hover {
+        @include color.background(background disabled grey, (legacy: $legacy));
+      }
     }
   }
 

src/component/tooltip/style/_legacy.scss

@@ -9,26 +9,6 @@
 @include legacy.is(ie11) {
   #{ns(tooltip)} {
     position: relative;
-
-    &__btn {
-      @include icon-legacy(align-left, sm, before);
-      @include icon-legacy(add-line, sm, after);
-
-      &[aria-expanded="true"] {
-        @include icon-image-legacy(subtract-line);
-      }
-    }
-
-    &__actions-group {
-      @include disable-list-style-legacy(true);
-    }
-
-    #{ns(modal)} {
-      &:not(#{ns(modal)}--opened) {
-        #{ns(modal)}__content {
-          @include max-height(38v);
-        }
-      }
-    }
+    @include margin-top(2v);
   }
 }

src/legacy/script/index.js

@@ -16,6 +16,7 @@ import './polyfill-io/object-get-own-property-symbols-polyfill.min';
 import './polyfill-io/element-prototype-closest-polyfill.min';
 import './polyfill-io/url-search-params-polyfill.min';
 
+import './focus-within/focus-within-polyfill.min';
 // import { ObjectFitPolyfill } from './object-fit-polyfill/object-fit-polyfill';
 
 // new ObjectFitPolyfill('.${prefix}-content-media__img img', '.${prefix}-card__img img', '${prefix}-responsive-vid');