fix(breadcrumb): correct focus state (#366)

* fix(breadcrumb): correct focus state * fix(breadcrumb): set after on wrapping element over host, use js to mark last breadcrumb
scania-digital-design-system · Oct 24, 2023 · 32586a7 · 32586a7
1 parent cd56d06
commit 32586a7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/core/src/components/breadcrumbs/breadcrumb/breadcrumb.scss b/packages/core/src/components/breadcrumbs/breadcrumb/breadcrumb.scss
@@ -13,8 +13,11 @@
     }
   }
 
-  &:focus-visible {
+  ::slotted(*:focus-visible) {
     @include tds-focus-state;
+
+    // Overrides the offset of the tds-focus-state to align with design.
+    outline-offset: -0;
   }
 
   &.current,
@@ -33,7 +36,7 @@
     }
   }
 
-  ::slotted(*)::after {
+  &::after {
     content: '\203A';
     color: var(--tds-breadcrumb-separator-color);
     margin-right: 4px;
@@ -44,8 +47,8 @@
   }
 }
 
-:host(:last-of-type) {
-  ::slotted(*)::after {
+:host(.last) [role='listitem'] {
+  &::after {
     display: none;
   }
 }
diff --git a/packages/core/src/components/breadcrumbs/breadcrumbs.tsx b/packages/core/src/components/breadcrumbs/breadcrumbs.tsx
@@ -9,9 +9,10 @@ import { Component, h, Element } from '@stencil/core';
   shadow: true,
 })
 export class TdsBreadcrumbs {
-  @Element() el: HTMLElement;
+  @Element() host: HTMLElement;
 
   render() {
+    this.host.children[this.host.children.length - 1]?.classList.add('last');
     return (
       <nav>
         <div role="list" class={'tds-breadcrumb'}>