feat(core/breadcrumb): add keyboard navigation (#688)

siemens · Aug 16, 2023 · 1550bf2 · 1550bf2
1 parent 3e3e30b
commit 1550bf2
Show file tree

Hide file tree

Showing 21 changed files with 487 additions and 391 deletions.
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -124,14 +124,14 @@ export declare interface IxBlind extends Components.IxBlind {
 
 
 @ProxyCmp({
-  inputs: ['ghost', 'nextItems', 'visibleItemCount']
+  inputs: ['ariaLabelPreviousButton', 'ghost', 'nextItems', 'visibleItemCount']
 })
 @Component({
   selector: 'ix-breadcrumb',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ghost', 'nextItems', 'visibleItemCount'],
+  inputs: ['ariaLabelPreviousButton', 'ghost', 'nextItems', 'visibleItemCount'],
 })
 export class IxBreadcrumb {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -473,21 +473,47 @@
       "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
-        "ix-icon",
         "ix-dropdown",
-        "ix-dropdown-item"
+        "ix-dropdown-item",
+        "ix-breadcrumb-item"
       ],
       "dependencyGraph": {
         "ix-breadcrumb": [
-          "ix-icon",
           "ix-dropdown",
-          "ix-dropdown-item"
+          "ix-dropdown-item",
+          "ix-breadcrumb-item"
         ],
         "ix-dropdown-item": [
           "ix-icon"
+        ],
+        "ix-breadcrumb-item": [
+          "ix-icon",
+          "ix-spinner"
         ]
       },
       "props": [
+        {
+          "name": "ariaLabelPreviousButton",
+          "type": "string",
+          "mutable": false,
+          "attr": "aria-label-previous-button",
+          "reflectToAttr": false,
+          "docs": "Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\nwith conditionally hidden previous items",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.0.0"
+            }
+          ],
+          "default": "'previous'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "ghost",
           "type": "boolean",
@@ -496,7 +522,7 @@
           "reflectToAttr": false,
           "docs": "Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)",
           "docsTags": [],
-          "default": "false",
+          "default": "true",
           "values": [
             {
               "type": "boolean"
@@ -577,9 +603,22 @@
       "docs": "",
       "docsTags": [],
       "encapsulation": "shadow",
-      "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {},
+      "dependents": [
+        "ix-breadcrumb"
+      ],
+      "dependencies": [
+        "ix-icon",
+        "ix-spinner"
+      ],
+      "dependencyGraph": {
+        "ix-breadcrumb-item": [
+          "ix-icon",
+          "ix-spinner"
+        ],
+        "ix-breadcrumb": [
+          "ix-breadcrumb-item"
+        ]
+      },
       "props": [
         {
           "name": "icon",
@@ -8666,6 +8705,7 @@
       "docsTags": [],
       "encapsulation": "shadow",
       "dependents": [
+        "ix-breadcrumb-item",
         "ix-burger-menu",
         "ix-button",
         "ix-icon-button",
@@ -8677,6 +8717,9 @@
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "ix-breadcrumb-item": [
+          "ix-spinner"
+        ],
         "ix-burger-menu": [
           "ix-spinner"
         ],

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -139,6 +139,11 @@ export namespace Components {
         "label": string;
     }
     interface IxBreadcrumb {
+        /**
+          * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list with conditionally hidden previous items
+          * @since 2.0.0
+         */
+        "ariaLabelPreviousButton": string;
         /**
           * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
          */
@@ -153,14 +158,18 @@ export namespace Components {
         "visibleItemCount": number;
     }
     interface IxBreadcrumbItem {
+        "ghost": boolean;
         /**
           * Icon to be displayed next ot the label
          */
         "icon": string;
+        "isDropdownTrigger": boolean;
         /**
           * Breadcrumb label
          */
         "label": string;
+        "showChevron": boolean;
+        "visible": boolean;
     }
     interface IxBurgerMenu {
         /**
@@ -189,6 +198,7 @@ export namespace Components {
           * Icon name
          */
         "icon": string;
+        "iconSize": '12' | '16' | '24';
         /**
           * Loading button
           * @since 2.0.0
@@ -1974,6 +1984,10 @@ export interface IxBreadcrumbCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxBreadcrumbElement;
 }
+export interface IxBreadcrumbItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxBreadcrumbItemElement;
+}
 export interface IxCardAccordionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxCardAccordionElement;
@@ -2932,6 +2946,11 @@ declare namespace LocalJSX {
         "onCollapsedChange"?: (event: IxBlindCustomEvent<boolean>) => void;
     }
     interface IxBreadcrumb {
+        /**
+          * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list with conditionally hidden previous items
+          * @since 2.0.0
+         */
+        "ariaLabelPreviousButton"?: string;
         /**
           * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
          */
@@ -2954,14 +2973,19 @@ declare namespace LocalJSX {
         "visibleItemCount"?: number;
     }
     interface IxBreadcrumbItem {
+        "ghost"?: boolean;
         /**
           * Icon to be displayed next ot the label
          */
         "icon"?: string;
+        "isDropdownTrigger"?: boolean;
         /**
           * Breadcrumb label
          */
         "label"?: string;
+        "onItemClick"?: (event: IxBreadcrumbItemCustomEvent<string>) => void;
+        "showChevron"?: boolean;
+        "visible"?: boolean;
     }
     interface IxBurgerMenu {
         /**
@@ -2990,6 +3014,7 @@ declare namespace LocalJSX {
           * Icon name
          */
         "icon"?: string;
+        "iconSize"?: '12' | '16' | '24';
         /**
           * Loading button
           * @since 2.0.0

diff --git a/packages/core/src/components/breadcrumb-item/breadcrumb-item.scss b/packages/core/src/components/breadcrumb-item/breadcrumb-item.scss
@@ -8,9 +8,65 @@
  */
 
 @import 'mixins/shadow-dom/component';
+@import '../button/button-mixin';
+@import '../button/button';
+
+@include all-btn-variants;
 
 :host {
   @include ix-component;
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-right: 0.25rem;
+  max-width: 15rem;
+  min-width: 0;
+
+  li {
+    display: contents;
+  }
+
+  .btn {
+    pointer-events: all;
+    width: fit-content;
+    padding-right: 0;
+    padding-left: 0.25rem;
+  }
+
+  .chevron {
+    pointer-events: none;
+    margin-left: 0.5rem;
+    margin-right: 0rem;
+    --theme-color-std-text: var(--theme-color-soft-text);
+  }
+
+  ::slotted(a[href]) {
+    text-decoration: none !important;
+  }
+
+  ::slotted(a[href]:active) {
+    text-decoration: none !important;
+  }
+}
+
+:host(:last-child) {
+  .btn:not(.dropdown-trigger) {
+    color: var(--theme-color-soft-text);
+  }
+}
+
+:host(.hide-chevron) {
+  .btn {
+    padding-right: 0.5rem;
+  }
+}
+
+:host(.invisible) {
+  display: none;
+}
 
-  display: block;
+:host(:focus-visible) {
+  outline: none;
 }