[ADF-3053] breadcrumb fixes (#3406)

* translate breadcrumb root in demo shell

* optional "max items" feature and style fixes

* should not be restricted by default

* style updates

* toolbar and breadcrumb layout fixes

* breadcrumb demo and testing page

* full toolbar scenario

* fix translation issue with the dropdown and custom root

* a11y fixes

* fix issue with duplicate id, remove unused attribute

lib/content-services/breadcrumb/breadcrumb.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="folderNode" data-automation-id="breadcrumb" class="adf-breadcrumb-container">
+<nav *ngIf="folderNode" data-automation-id="breadcrumb" class="adf-breadcrumb-container" role="list">
     <button
         *ngIf="hasPreviousNodes()"
         tabindex="0"
@@ -11,7 +11,7 @@
     </button>
 
     <mat-select
-        #select
+        #dropdown
         *ngIf="hasPreviousNodes()"
         class="adf-breadcrumb-dropdown-path"
         tabindex="0">
@@ -21,15 +21,16 @@
             (click)="onRoutePathClick(node, $event)"
             class="adf-breadcrumb-path-option"
             tabindex="0">
-            {{ node.name }}
+            {{ node.name | translate }}
         </mat-option>
     </mat-select>
 
-    <li *ngFor="let item of lastNodes; let last = last"
+    <div *ngFor="let item of lastNodes; let last = last"
         [class.active]="last"
         [ngSwitch]="last"
         title="{{ item.name | translate }}"
-        class="adf-breadcrumb-item">
+        class="adf-breadcrumb-item"
+        role="listitem">
 
         <a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + item.name"
             class="adf-breadcrumb-item-anchor"
@@ -44,13 +45,13 @@
         <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">
             chevron_right
         </mat-icon>
-    </li>
-</div>
+    </div>
+</nav>
 
-<div *ngIf="!folderNode && hasRoot" data-automation-id="breadcrumb">
-    <li class="adf-breadcrumb-item active">
+<nav *ngIf="!folderNode && hasRoot" data-automation-id="breadcrumb" role="navigation">
+    <div class="adf-breadcrumb-item active" role="listitem">
         <div class="adf-breadcrumb-item-current">
             {{ root | translate }}
         </div>
-    </li>
-</div>
+    </div>
+</nav>