fix(sbb-navigation): fix navigation actions contrast ratio (#2481)

Author: dauriamarco

src/components/navigation/common/navigation-action-common.ts

@@ -9,6 +9,8 @@ import type { SbbNavigationLinkElement } from '../navigation-link';
 import type { SbbNavigationMarkerElement } from '../navigation-marker';
 import type { SbbNavigationSectionElement } from '../navigation-section';
 
+import '../../icon';
+
 import style from './navigation-action.scss?lit&inline';
 
 export type SbbNavigationActionSize = 's' | 'm' | 'l';
@@ -76,10 +78,11 @@ export const SbbNavigationActionCommonElementMixin = <
 
       // Check if the current element is nested inside a navigation section.
       this._navigationSection = this.closest('sbb-navigation-section');
+      this.toggleAttribute('data-section-action', !!this._navigationSection);
     }
 
     protected override renderTemplate(): TemplateResult {
-      return html` <slot></slot> `;
+      return html`<sbb-icon name="dash-small"></sbb-icon> <slot></slot>`;
     }
   }
   return SbbNavigationActionCommonElement as unknown as AbstractConstructor<SbbNavigationActionCommonElementMixinType> &

src/components/navigation/common/navigation-action.scss

@@ -10,16 +10,29 @@
   outline: none !important;
 
   --sbb-navigation-action-color: var(--sbb-color-cloud);
+  --sbb-navigation-action-icon-display: none;
 }
 
-:host(:is([data-action-active])) {
+:host([data-section-action][data-action-active].sbb-active) {
+  --sbb-navigation-action-icon-display: block;
+}
+
+:host([data-action-active]) {
   --sbb-navigation-action-color: var(--sbb-color-storm);
 
   @include sbb.if-forced-colors {
     --sbb-navigation-action-color: Highlight;
   }
 }
 
+sbb-icon {
+  display: var(--sbb-navigation-action-icon-display);
+  position: absolute;
+  inset-inline-start: calc((var(--sbb-size-icon-ui-small) + var(--sbb-spacing-fixed-1x)) * -1);
+  inset-block-start: calc(1em * (var(--sbb-typo-line-height-body-text) / 2));
+  transform: translateY(-50%);
+}
+
 @include sbb.hover-mq($hover: true) {
   :host(:hover) {
     --sbb-navigation-action-color: var(--sbb-color-storm);
@@ -36,6 +49,7 @@
   @include sbb.title-4($exclude-spacing: true);
 
   cursor: pointer;
+  position: relative;
   text-decoration: none;
   display: flex;
   user-select: none;

src/components/navigation/navigation-button/navigation-button.spec.ts

@@ -15,6 +15,13 @@ describe('sbb-navigation-button', () => {
     expect(root).shadowDom.to.be.equal(
       `
         <span class="sbb-action-base sbb-navigation-button">
+          <sbb-icon
+            aria-hidden="true"
+            data-namespace="default"
+            name="dash-small"
+            role="img"
+          >
+          </sbb-icon>
           <slot></slot>
         </span>
       `,

src/components/navigation/navigation-link/navigation-link.spec.ts

@@ -21,6 +21,13 @@ describe('sbb-navigation-link', () => {
         role="presentation"
         tabindex="-1"
       >
+        <sbb-icon
+          aria-hidden="true"
+          data-namespace="default"
+          name="dash-small"
+          role="img"
+        >
+        </sbb-icon>
         <slot></slot>
         <sbb-screenreader-only>
           . Link target opens in a new window.

src/components/navigation/navigation-section/navigation-section.ts

@@ -30,6 +30,7 @@ import {
 } from '../../core/overlay';
 import type { SbbNavigationElement } from '../navigation';
 import type { SbbNavigationButtonElement } from '../navigation-button';
+import type { SbbNavigationLinkElement } from '../navigation-link';
 import '../../divider';
 import '../../button/transparent-button';
 
@@ -215,6 +216,7 @@ export class SbbNavigationSectionElement extends UpdateScheduler(LitElement) {
       this._state = 'closed';
       this._navigationSectionContainerElement.scrollTo(0, 0);
       this._windowEventsController?.abort();
+      this._resetLists();
       this._setNavigationInert();
       if (this._isZeroToLargeBreakpoint() && this._triggerElement) {
         setModalityOnNextFocus(this._triggerElement);
@@ -224,6 +226,13 @@ export class SbbNavigationSectionElement extends UpdateScheduler(LitElement) {
     this.completeUpdate();
   }
 
+  private _resetLists(): void {
+    const activeActions = Array.from(
+      this.querySelectorAll('[data-section-action][data-action-active]'),
+    ) as (SbbNavigationButtonElement | SbbNavigationLinkElement)[];
+    activeActions?.forEach((action) => action.toggleAttribute('data-action-active', false));
+  }
+
   private _attachWindowEvents(): void {
     this._windowEventsController = new AbortController();
     window.addEventListener('keydown', (event: KeyboardEvent) => this._onKeydownEvent(event), {

src/components/navigation/navigation/navigation.scss

@@ -94,7 +94,7 @@
   }
 }
 
-:host([disable-animation]) {
+:host(:is([data-resize-disable-animation], [disable-animation])) {
   --sbb-navigation-animation-duration: 0.1ms;
 }
 

src/components/navigation/navigation/navigation.ts

@@ -13,7 +13,7 @@ import {
 } from '../../core/dom';
 import { EventEmitter, ConnectedAbortController } from '../../core/eventing';
 import { i18nCloseNavigation } from '../../core/i18n';
-import { AgnosticMutationObserver } from '../../core/observers';
+import { AgnosticMutationObserver, AgnosticResizeObserver } from '../../core/observers';
 import type { SbbOverlayState } from '../../core/overlay';
 import {
   removeAriaOverlayTriggerAttributes,
@@ -35,6 +35,7 @@ const navigationObserverConfig: MutationObserverInit = {
 };
 
 let nextId = 0;
+const DEBOUNCE_TIME = 150;
 
 /**
  * It displays a navigation menu, wrapping one or more `sbb-navigation-*` components.
@@ -137,9 +138,11 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
   private _focusHandler = new FocusHandler();
   private _scrollHandler = new ScrollHandler();
   private _isPointerDownEventOnNavigation: boolean = false;
+  private _resizeObserverTimeout: ReturnType<typeof setTimeout> | null = null;
   private _navigationObserver = new AgnosticMutationObserver((mutationsList: MutationRecord[]) =>
     this._onNavigationSectionChange(mutationsList),
   );
+  private _navigationResizeObserver = new AgnosticResizeObserver(() => this._onNavigationResize());
   private _navigationId = `sbb-navigation-${++nextId}`;
 
   /**
@@ -154,6 +157,7 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
       return;
     }
     this._state = 'opening';
+    this._checkActiveActions();
     this._checkActiveSection();
     this.startUpdate();
 
@@ -169,6 +173,13 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
     activeAction?.connectedSection?.open();
   }
 
+  private _checkActiveActions(): void {
+    const activeActions = Array.from(
+      this.querySelectorAll(':is(sbb-navigation-button, sbb-navigation-link).sbb-active'),
+    ) as (SbbNavigationButtonElement | SbbNavigationLinkElement)[];
+    activeActions?.forEach((action) => action.marker?.select(action));
+  }
+
   /**
    * Closes the navigation.
    */
@@ -234,6 +245,7 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
     if (event.animationName === 'open' && this._state === 'opening') {
       this._state = 'opened';
       this._didOpen.emit();
+      this._navigationResizeObserver.observe(this);
       applyInertMechanism(this);
       this._focusHandler.trap(this, { filter: this._trapFocusFilter });
       this._attachWindowEvents();
@@ -246,6 +258,7 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
       // To enable focusing other element than the trigger, we need to call focus() a second time.
       this._triggerElement?.focus();
       this._didClose.emit();
+      this._navigationResizeObserver.unobserve(this);
       this._resetMarkers();
       this._windowEventsController?.abort();
       this._focusHandler.disconnect();
@@ -258,7 +271,9 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
 
   private _resetMarkers(): void {
     const activeActions = Array.from(
-      this.querySelectorAll('sbb-navigation-button[data-action-active]'),
+      this.querySelectorAll(
+        ':is(sbb-navigation-button, sbb-navigation-link)[data-action-active]:not(.sbb-active)',
+      ),
     ) as (SbbNavigationButtonElement | SbbNavigationLinkElement)[];
     activeActions?.forEach((action) => action.marker?.reset());
   }
@@ -332,6 +347,24 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
     }
   }
 
+  private _onNavigationResize(): void {
+    if (this._state !== 'opened') {
+      return;
+    }
+
+    if (this._resizeObserverTimeout) {
+      clearTimeout(this._resizeObserverTimeout);
+    }
+
+    this.toggleAttribute('data-resize-disable-animation', true);
+
+    // Disable the animation when resizing the navigation to avoid strange height transition effects.
+    this._resizeObserverTimeout = setTimeout(
+      () => this.toggleAttribute('data-resize-disable-animation', false),
+      DEBOUNCE_TIME,
+    );
+  }
+
   public override connectedCallback(): void {
     super.connectedCallback();
     const signal = this._abort.signal;
@@ -353,6 +386,7 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
     this._windowEventsController?.abort();
     this._focusHandler.disconnect();
     this._navigationObserver.disconnect();
+    this._navigationResizeObserver.disconnect();
     removeInertMechanism();
   }
 

src/components/notification/notification.ts

@@ -22,6 +22,8 @@ const notificationTypes = new Map([
   ['error', 'circle-cross-small'],
 ]);
 
+const DEBOUNCE_TIME = 150;
+
 /**
  * It displays messages which require a user's attention without interrupting its tasks.
  *
@@ -172,7 +174,7 @@ export class SbbNotificationElement extends LitElement {
     // Disable the animation when resizing the notification to avoid strange height transition effects.
     this._resizeObserverTimeout = setTimeout(
       () => this.toggleAttribute('data-resize-disable-animation', false),
-      150,
+      DEBOUNCE_TIME,
     );
   }