🐛 fix(breadcrumb, navigation, pagination, sidemenu, translate): selecteur aria-current [DS-3566]

module/selector/_index.scss

@@ -2,3 +2,4 @@
 @forward 'function/associate';
 @forward 'mixin/namespace';
 @forward 'mixin/theme';
+@forward 'mixin/current';

module/selector/mixin/_current.scss

@@ -0,0 +1,15 @@
+/// Ajout d'un sélecteur pour l'élément courant
+/// @access public
+
+@mixin current {
+  &[aria-current]:not([aria-current="false"]) {
+    @content;
+  };
+}
+
+@mixin not-current {
+  &:not([aria-current]),
+  &[aria-current="false"]{
+    @content; 
+  }
+}

src/component/breadcrumb/style/_legacy.scss

@@ -4,6 +4,7 @@
 ////
 
 @use 'module/legacy';
+@use 'module/selector';
 
 @include legacy.is(ie11) {
   /**
@@ -13,7 +14,7 @@
     @include disable-list-style-legacy;
 
     &__link {
-      &:not([aria-current]) {
+      @include selector.not-current {
         @include icon-legacy(arrow-right-s-line, sm, after);
       }
     }

src/component/breadcrumb/style/_module.scss

@@ -4,6 +4,7 @@
 ////
 
 @use 'module/spacing';
+@use 'module/selector';
 
 /**
 un padding de 4px et une marge négative en compensation sont mis en place afin d'éviter de couper le focus.
@@ -82,7 +83,7 @@ un padding de 4px et une marge négative en compensation sont mis en place afin
     @include hover-underline;
     @include padding(0);
 
-    &[aria-current] {
+    @include selector.current {
       pointer-events: none;
       cursor: default;
       @include disable-underline;

src/component/breadcrumb/style/_scheme.scss

@@ -4,13 +4,16 @@
 ////
 
 @use 'module/color';
+@use 'module/selector';
 
 @mixin _breadcrumb-scheme($legacy: false) {
   #{ns(breadcrumb)} {
     @include color.text(mention grey, (legacy:$legacy));
 
-    &__link[aria-current] {
-      @include color.text(active grey, (legacy:$legacy));
+    &__link {
+      @include selector.current {
+        @include color.text(default grey, (legacy:$legacy));
+      }
     }
   }
 }

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

@@ -4,6 +4,7 @@
 ////
 
 @use 'module/spacing';
+@use 'module/selector';
 
 #{ns(nav)} {
   @include disable-underline;
@@ -42,7 +43,7 @@
 
           // @include z-index(auto);
 
-          &[aria-current] {
+          @include selector.current {
             @include before {
               @include absolute(auto, null, 0, 0, 100%, 2px);
               @include margin-top(0);
@@ -94,7 +95,7 @@
 
     @include enable-tint;
 
-    &[aria-current] {
+    @include selector.current {
       position: relative;
       @include before('', block) {
         @include absolute(50%, null, null, 0, 2px, 6v);
@@ -106,9 +107,11 @@
   &__link {
     display: block;
 
-    &[aria-current]:not([href]) {
-      pointer-events: none;
-      cursor: default;
+    &:not([href]) {
+      @include selector.current {
+        pointer-events: none;
+        cursor: default;
+      }
     }
   }
 

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

@@ -4,14 +4,15 @@
 ////
 
 @use 'module/color';
+@use 'module/selector';
 
 @mixin _navigation-scheme-nav($legacy: false) {
   #{ns(nav)} {
     &__link,
     &__btn {
       @include color.text(action-high grey, (legacy: $legacy));
 
-      &[aria-current] {
+      @include selector.current {
         @include color.text(active blue-france, (legacy: $legacy));
         @include before {
           @include color.background(active blue-france, (legacy: $legacy));

src/component/pagination/style/_contrast-scheme.scss

@@ -5,12 +5,13 @@
 
 @use 'module/color';
 @use 'module/media-query';
+@use 'module/selector';
 
 @mixin _pagination-contrast-scheme($legacy: false) {
   @include media-query.high-contrast() {
     #{ns(pagination)} {
       &__link {
-        &[aria-current] {
+        @include selector.current {
           @include color.border(active blue-france, (legacy: $legacy, hover: true));
         }
       }

src/component/pagination/style/_contrast.scss

@@ -4,11 +4,13 @@
 ////
 
 @use 'module/media-query';
+@use 'module/selector';
+
 
 @include media-query.high-contrast() {
   #{ns(pagination)} {
     &__link {
-      &[aria-current] {
+      @include selector.current {
         justify-content: center;
         @include padding(calc(1v - 1px) calc(3v - 1px));
       }

src/component/pagination/style/_module.scss

@@ -3,6 +3,8 @@
 /// @group pagination
 ////
 
+@use 'module/selector';
+
 @include build-pagination();
 
 #{ns(pagination)} {
@@ -34,9 +36,11 @@
     @include disable-underline;
     @include relative;
 
-    &[aria-current]:not([href]) {
-      cursor: default;
-      pointer-events: none;
+    &:not([href]) {
+      @include selector.current {
+        cursor: default;
+        pointer-events: none;
+      }
     }
 
     &--first {

src/component/pagination/style/_scheme.scss

@@ -5,18 +5,19 @@
 
 @use 'module/color';
 @use 'module/disabled';
+@use 'module/selector';
 
 @mixin _pagination-scheme($legacy: false) {
   #{ns(pagination)} {
     @include color.text(action-high grey, (legacy: $legacy));
 
     &__link {
-      &[aria-current] {
+      @include selector.current {
         @include color.background(active blue-france, (legacy: $legacy, hover: true));
         @include color.text(inverted blue-france, (legacy: $legacy));
       }
 
-      &:not([aria-current]) {
+      @include selector.not-current {
         @include disabled.selector((can-be-link: true), (legacy: $legacy, text: true,));
       }
     }

src/component/sidemenu/style/_scheme.scss

@@ -6,6 +6,7 @@
 @use 'module/color';
 @use 'module/elevation';
 @use 'module/media-query';
+@use 'module/selector';
 
 @mixin _sidemenu-scheme($legacy: false) {
   #{ns(sidemenu)} {
@@ -68,7 +69,7 @@
     &__btn {
       @include color.text(action-high blue-france, (legacy:$legacy));
 
-      &[aria-current] {
+      @include selector.current {
         @include color.text(active blue-france, (legacy:$legacy));
         @include before {
           @include color.background(border active blue-france, (legacy:$legacy));

src/component/sidemenu/style/module/_action.scss

@@ -3,6 +3,8 @@
 /// @group sidemenu
 ////
 
+@use 'module/selector';
+
 /**
  * Styles du bouton et du lien d'accès direct du sidemnu
  */
@@ -19,7 +21,7 @@
 
   @include enable-tint;
 
-  &[aria-current] {
+  @include selector.current {
     @include before('') {
       @include absolute(3v, null, 3v, 0, 2px);
     }
@@ -29,9 +31,11 @@
 }
 
 #{ns(sidemenu__link)} {
-  &[aria-current]:not([href]) {
-    pointer-events: none;
-    cursor: default;
+  &:not([href]) {
+    @include selector.current {
+      pointer-events: none;
+      cursor: default;
+    }
   }
 }
 

src/component/translate/style/_module.scss

@@ -4,6 +4,7 @@
 ////
 
 @use 'module/animate';
+@use 'module/selector';
 
 #{ns(translate)} {
   --rows: 8;
@@ -36,7 +37,7 @@
   &__language {
     white-space: nowrap;
 
-    &[aria-current] {
+    @include selector.current {
       display: none;
       @include respond-from(lg) {
         display: inline-flex;