fix(breadcrumb): overflowmenu focus styles (#18772)

* fix(breadcrumb): overflowmenu focus styles

* fix(underline): revert

* fix(hover): remove outline wc

Author: ariellalgilmore

packages/styles/scss/components/breadcrumb/_breadcrumb.scss

@@ -57,6 +57,11 @@
     }
   }
 
+  .#{$prefix}--breadcrumb-item .#{$prefix}--link:active,
+  .#{$prefix}--breadcrumb-item .#{$prefix}--link:visited:active:hover {
+    color: $text-primary;
+  }
+
   .#{$prefix}--breadcrumb-item::after {
     color: $text-primary;
     content: '/';
@@ -96,20 +101,40 @@
   .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu {
     position: relative;
     block-size: convert.to-rem(18px);
-    inline-size: convert.to-rem(20px);
+    inline-size: $spacing-05;
 
     &:focus {
+      border: none;
+      box-shadow: none;
       outline: 1px solid $focus;
+      outline-offset: 0;
     }
 
     &:hover {
       background: transparent;
+
+      &::after {
+        background: $link-primary-hover;
+      }
+    }
+
+    &:active {
+      &::after {
+        background: $text-primary;
+      }
+    }
+
+    &:focus,
+    &:hover {
+      &::after {
+        opacity: 1;
+      }
     }
 
     // Used to mimic link underline
     &::after {
       position: absolute;
-      background: $link-primary-hover;
+      background: $focus;
       block-size: 1px;
       content: '';
       inline-size: convert.to-rem(12px);
@@ -123,16 +148,6 @@
     }
   }
 
-  .#{$prefix}--breadcrumb--sm
-    .#{$prefix}--breadcrumb-item
-    .#{$prefix}--overflow-menu {
-    inline-size: $spacing-05;
-  }
-
-  .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu:hover::after {
-    opacity: 1;
-  }
-
   .#{$prefix}--breadcrumb-item
     .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open {
     background: transparent;
@@ -153,6 +168,12 @@
     fill: $link-primary-hover;
   }
 
+  .#{$prefix}--breadcrumb-item
+    .#{$prefix}--overflow-menu:active
+    .#{$prefix}--overflow-menu__icon {
+    fill: $text-primary;
+  }
+
   .#{$prefix}--breadcrumb-menu-options:focus {
     outline: none;
   }
@@ -176,17 +197,28 @@
     inset-inline-start: initial;
   }
 
+  .#{$prefix}--breadcrumb
+    .#{$prefix}--overflow-menu.#{$prefix}--btn--icon-only {
+    min-block-size: 1.125rem;
+    padding-inline: 0;
+  }
+
+  .#{$prefix}--breadcrumb--sm
+    .#{$prefix}--breadcrumb-item
+    .#{$prefix}--overflow-menu {
+    block-size: $spacing-05;
+    inline-size: $spacing-05;
+    min-block-size: $spacing-05;
+    .#{$prefix}--overflow-menu__icon {
+      transform: translateY(3px);
+    }
+  }
+
   // Skeleton State
   .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
     @include skeleton;
 
     block-size: 1rem;
     inline-size: convert.to-rem(100px);
   }
-
-  .#{$prefix}--breadcrumb
-    .#{$prefix}--overflow-menu.#{$prefix}--btn--icon-only {
-    min-block-size: 1.125rem;
-    padding-inline: 0;
-  }
 }

packages/web-components/src/components/breadcrumb/breadcrumb-item.ts

@@ -19,6 +19,29 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
  */
 @customElement(`${prefix}-breadcrumb-item`)
 class CDSBreadcrumbItem extends LitElement {
+  /**
+   * Handles `slotchange` event.
+   */
+  private _handleSlotChange({ target }: Event) {
+    if (this.getAttribute('size')) {
+      const items = (target as HTMLSlotElement)
+        .assignedNodes()
+        .filter(
+          (node) =>
+            node.nodeType === Node.ELEMENT_NODE &&
+            (node as Element).tagName.toLowerCase() ===
+              `${prefix}-overflow-menu`
+        );
+
+      items.forEach((item) => {
+        (item as HTMLElement).setAttribute(
+          'breadcrumb-size',
+          this.getAttribute('size')!
+        );
+      });
+    }
+  }
+
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'listitem');
@@ -27,7 +50,7 @@ class CDSBreadcrumbItem extends LitElement {
   }
 
   render() {
-    return html` <slot></slot> `;
+    return html` <slot @slotchange=${this._handleSlotChange}></slot> `;
   }
 
   static styles = styles;

packages/web-components/src/components/breadcrumb/breadcrumb.scss

@@ -108,8 +108,13 @@ $css--plex: true !default;
 :host(#{$prefix}-breadcrumb-link) {
   outline: none;
 
+  .#{$prefix}--link:visited,
   .#{$prefix}--link {
     font: inherit;
+
+    &:active {
+      color: $text-primary;
+    }
   }
 
   // Re-define the ruleset so this wins over `.#{$prefix}--link:visited`, etc.

packages/web-components/src/components/breadcrumb/breadcrumb.stories.ts

@@ -106,7 +106,7 @@ export const BreadcrumbWithOverflowMenu = {
           <cds-breadcrumb-link href="/#">Breadcrumb 2</cds-breadcrumb-link>
         </cds-breadcrumb-item>
         <cds-breadcrumb-item>
-          <cds-overflow-menu breadcrumb>
+          <cds-overflow-menu breadcrumb align="bottom">
             ${OverflowMenuHorizontal16({
               class: `${prefix}--overflow-menu__icon`,
               slot: 'icon',

packages/web-components/src/components/overflow-menu/overflow-menu.scss

@@ -124,33 +124,88 @@ $css--plex: true !default;
   @extend .#{$prefix}--overflow-menu--divider;
 }
 
+// breadcrumb
 :host(#{$prefix}-overflow-menu[breadcrumb]) {
   background: none;
-  block-size: 1.125rem;
+  block-size: convert.to-rem(18px);
   box-shadow: none;
-  inline-size: 1.25rem;
+  inline-size: $spacing-05;
   min-block-size: 1.125rem;
 
   #{$prefix}-tooltip button {
     position: relative;
-    block-size: 1.125rem;
-    inline-size: 1.25rem;
+    block-size: convert.to-rem(18px);
+    inline-size: $spacing-05;
     min-block-size: 1.125rem;
-    padding-inline: 0;
-  }
 
-  :hover,
-  :active,
-  :focus {
-    box-sizing: border-box;
-    background: none;
-    box-shadow: none;
+    &:hover,
+    &:active,
+    &:focus {
+      box-sizing: border-box;
+      background: none;
+      box-shadow: none;
+      outline-offset: 0;
+
+      &::after {
+        opacity: 1;
+      }
+    }
+
+    &:active,
+    &:focus {
+      outline: 1px solid $focus;
+    }
+
+    &:hover {
+      &::after {
+        background: $link-primary-hover;
+      }
+    }
+
+    &:active {
+      &::after {
+        background: $text-primary;
+      }
+    }
+
+    &::after {
+      position: absolute;
+      background: $focus;
+      block-size: 1px;
+      content: '';
+      inline-size: convert.to-rem(12px);
+      inset-block-end: 2px;
+      opacity: 0;
+      transition: opacity $duration-fast-01 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
   }
 }
 
-:host(#{$prefix}-overflow-menu[breadcrumb]) {
+:host(#{$prefix}-overflow-menu[breadcrumb]) ::slotted([slot='icon']) {
+  fill: $link-primary;
+  transform: translateY(4px);
+}
+
+:host(#{$prefix}-overflow-menu[breadcrumb]:hover) ::slotted([slot='icon']) {
+  fill: $link-primary-hover;
+}
+
+:host(#{$prefix}-overflow-menu[breadcrumb]:active) ::slotted([slot='icon']) {
+  fill: $text-primary;
+}
+
+:host(#{$prefix}-overflow-menu[breadcrumb][breadcrumb-size='sm']) {
+  #{$prefix}-tooltip button {
+    block-size: $spacing-05;
+    min-block-size: $spacing-05;
+  }
+
   ::slotted([slot='icon']) {
-    transform: translateY(4px);
+    transform: translateY(3px);
   }
 }