[ADF-4970] Improve breadcrumb accessibility (#5187)

* [ADF-4970] improve accessibility for dropdown-breadcrumb

- allow keyboard only control

* [ADF-4970] add accessibility improvements to breadcrumb.component

* [ADF-4970] more fixes & preventDefault for click event

* [ADF-4970] better keyboard-only experience when selecting a breadcrumb option

* [ADF-4970] set focus color on content-node-selector breadcrumb

* [ADF-4970] set aria-current to location

* [ADF-4970] extra check - fix unit test

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

@@ -10,6 +10,7 @@
         tabindex="0"
         class="adf-breadcrumb-dropdown-trigger"
         (click)="open()"
+        [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate"
     >
         <div class="adf-breadcrumb-dropdown-trigger-icon">
             <mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
@@ -25,13 +26,13 @@
         #dropdown
         *ngIf="hasPreviousNodes()"
         class="adf-breadcrumb-dropdown-path"
-        tabindex="0"
+        tabindex="-1"
     >
         <mat-option
             *ngFor="let node of previousNodes"
             (click)="onRoutePathClick(node, $event)"
+            (onSelectionChange)="onRoutePathClick(node, $event)"
             class="adf-breadcrumb-path-option"
-            tabindex="0"
         >
             {{ node.name | translate }}
         </mat-option>
@@ -54,7 +55,7 @@
         </a>
 
         <div *ngSwitchCase="true" class="adf-breadcrumb-item-current"
-            [attr.aria-current]="'BREADCRUMB.ARIA-LABEL.CURRENT_PAGE' | translate">
+            aria-current="location">
             {{ item.name | translate }}
         </div>
 

lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss

@@ -147,11 +147,5 @@
                 white-space: nowrap;
             }
         }
-
-        &-path-option {
-            &.mat-option {
-                background-color: mat-color($background, card);
-            }
-        }
     }
 }

lib/content-services/src/lib/breadcrumb/breadcrumb.component.spec.ts

@@ -51,6 +51,7 @@ describe('Breadcrumb', () => {
 
     it('should prevent default click behavior', () => {
         const event = jasmine.createSpyObj('event', ['preventDefault']);
+        event.type = 'click';
         component.onRoutePathClick(null, event);
         expect(event.preventDefault).toHaveBeenCalled();
     });

lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts

@@ -131,6 +131,7 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
     open(): void {
         if (this.dropdown) {
             this.dropdown.open();
+            this.dropdown.focus();
         }
     }
 
@@ -178,7 +179,7 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     onRoutePathClick(route: PathElementEntity, event?: Event): void {
-        if (event) {
+        if (event && event.type === 'click') {
             event.preventDefault();
         }
 

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

@@ -1,9 +1,12 @@
-<ng-container *ngIf="route.length > 0" class="adf-dropdown-breadcrumb-container">
+<nav *ngIf="route.length > 0" class="adf-dropdown-breadcrumb-container"
+     role="navigation"
+     [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate">
 
     <button
-        tabindex="0"
+        [tabindex]="hasPreviousNodes() ? 0 : -1"
         class="adf-dropdown-breadcrumb-trigger"
         (click)="open()"
+        [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate"
         data-automation-id="dropdown-breadcrumb-trigger">
         <mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
     </button>
@@ -14,14 +17,14 @@
         <mat-select
             #dropdown
             *ngIf="hasPreviousNodes()"
-            tabindex="0"
+            tabindex="-1"
             data-automation-id="dropdown-breadcrumb-path">
 
             <mat-option
                 *ngFor="let node of previousNodes;"
                 (click)="onRoutePathClick(node, $event)"
+                (onSelectionChange)="onRoutePathClick(node, $event)"
                 class="adf-dropdown-breadcrumb-path-option"
-                tabindex="0"
                 data-automation-class="dropdown-breadcrumb-path-option">
                 {{ node.name | translate }}
             </mat-option>
@@ -31,6 +34,7 @@
     <span
         class="adf-current-folder"
         [class.adf-isRoot]="!hasPreviousNodes()"
-        data-automation-id="current-folder">{{ currentNode.name }}
+        data-automation-id="current-folder"
+        aria-current="location">{{ currentNode.name }}
     </span>
-</ng-container>
+</nav>

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss

@@ -37,6 +37,7 @@
             width: 25px;
 
             &:focus {
+                color: mat-color($primary);
                 outline: none;
             }
         }

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.ts

@@ -54,6 +54,7 @@ export class DropdownBreadcrumbComponent extends BreadcrumbComponent implements
     open(): void {
         if (this.dropdown) {
             this.dropdown.open();
+            this.dropdown.focus();
         }
     }
 

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss

@@ -74,6 +74,10 @@
                             color: mat-color($foreground, base, 0.65);
                         }
                     }
+
+                    &:focus .mat-icon {
+                        color: mat-color($primary);
+                    }
                 }
 
                 .adf-dropdown-breadcrumb-item-chevron {

lib/content-services/src/lib/i18n/en.json

@@ -387,7 +387,7 @@
   "BREADCRUMB": {
     "ARIA-LABEL": {
       "BREADCRUMB": "Breadcrumb",
-      "CURRENT_PAGE": "Page"
+      "DROPDOWN": "Dropdown"
     }
   },
   "NAME_COLUMN_LINK": {