From b176a43fba11c57d4113afc716df8c7187475f12 Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Mon, 12 Aug 2019 18:28:53 +0300
Subject: [PATCH] [ADF-4497] ARIA role must be appropriate for the Breadcrumb
 element (#4986)

* breadcrumb accessibility

* translation
---
 .../breadcrumb/breadcrumb.component.html      | 51 +++++++++++++------
 lib/content-services/i18n/en.json             |  8 ++-
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/lib/content-services/breadcrumb/breadcrumb.component.html b/lib/content-services/breadcrumb/breadcrumb.component.html
index 041493e662..ee09d8ab9e 100644
--- a/lib/content-services/breadcrumb/breadcrumb.component.html
+++ b/lib/content-services/breadcrumb/breadcrumb.component.html
@@ -1,12 +1,23 @@
-<nav *ngIf="folderNode" data-automation-id="breadcrumb" class="adf-breadcrumb-container" role="list">
+<nav
+    *ngIf="folderNode"
+    data-automation-id="breadcrumb"
+    class="adf-breadcrumb-container"
+    role="navigation"
+    [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
+>
     <button
         *ngIf="hasPreviousNodes()"
         tabindex="0"
         class="adf-breadcrumb-dropdown-trigger"
-        (click)="open()">
+        (click)="open()"
+    >
         <div class="adf-breadcrumb-dropdown-trigger-icon">
             <mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
-            <mat-icon [class.adf-isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow">arrow_drop_down</mat-icon>
+            <mat-icon
+                [class.adf-isRoot]="!hasPreviousNodes()"
+                class="adf-breadcrumb-dropdown-trigger-arrow"
+                >arrow_drop_down</mat-icon
+            >
         </div>
     </button>
 
@@ -14,31 +25,36 @@
         #dropdown
         *ngIf="hasPreviousNodes()"
         class="adf-breadcrumb-dropdown-path"
-        tabindex="0">
-
+        tabindex="0"
+    >
         <mat-option
-            *ngFor="let node of previousNodes;"
+            *ngFor="let node of previousNodes"
             (click)="onRoutePathClick(node, $event)"
             class="adf-breadcrumb-path-option"
-            tabindex="0">
+            tabindex="0"
+        >
             {{ node.name | translate }}
         </mat-option>
     </mat-select>
 
-    <div *ngFor="let item of lastNodes; let last = last"
+    <div
+        *ngFor="let item of lastNodes; let last = last"
         [class.adf-active]="last"
         [ngSwitch]="last"
         title="{{ item.name | translate }}"
-        class="adf-breadcrumb-item"
-        role="listitem">
-
-        <a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + item.name"
+        class="adf-breadcrumb-item">
+        <a
+            *ngSwitchDefault
+            href="#"
+            [attr.data-automation-id]="'breadcrumb_' + item.name"
             class="adf-breadcrumb-item-anchor"
-            (click)="onRoutePathClick(item, $event)">
+            (click)="onRoutePathClick(item, $event)"
+        >
             {{ item.name | translate }}
         </a>
 
-        <div *ngSwitchCase="true" class="adf-breadcrumb-item-current">
+        <div *ngSwitchCase="true" class="adf-breadcrumb-item-current"
+            [attr.aria-current]="'BREADCRUMB.ARIA-LABEL.CURRENT_PAGE' | translate">
             {{ item.name | translate }}
         </div>
 
@@ -48,7 +64,12 @@
     </div>
 </nav>
 
-<nav *ngIf="!folderNode && hasRoot" data-automation-id="breadcrumb" role="navigation">
+<nav
+    *ngIf="!folderNode && hasRoot"
+    data-automation-id="breadcrumb"
+    role="navigation"
+    [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
+>
     <div class="adf-breadcrumb-item adf-active" role="listitem">
         <div class="adf-breadcrumb-item-current">
             {{ root | translate }}
diff --git a/lib/content-services/i18n/en.json b/lib/content-services/i18n/en.json
index 89e5dc7f17..f29539e22a 100644
--- a/lib/content-services/i18n/en.json
+++ b/lib/content-services/i18n/en.json
@@ -316,7 +316,7 @@
       "ADD-ACTION": "ADD",
       "CLOSE-ACTION": "CLOSE",
       "BASE-DIALOG-TITLE": "Search a group or people to add...",
-      "EVERYONE" : "EVERYONE"
+      "EVERYONE": "EVERYONE"
     },
     "ERROR": {
       "DUPLICATE-PERMISSION": "One or more of the permissions you have set is already present : {{list}}",
@@ -369,5 +369,11 @@
     "SUCCESS": {
       "LIBRARY_UPDATED": "Library properties updated"
     }
+  },
+  "BREADCRUMB": {
+    "ARIA-LABEL": {
+      "BREADCRUMB": "Breadcrumb",
+      "CURRENT_PAGE": "page"
+    }
   }
 }