inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4497] ARIA role must be appropriate for the Breadcrumb element (#4986)

Browse Source 
* breadcrumb accessibility

* translation
This commit is contained in:
Cilibiu Bogdan
2019-08-12 18:28:53 +03:00
committed by Eugenio Romano
parent eb2811fdd0
commit b176a43fba
2 changed files with 43 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
lib/content-services/breadcrumb/breadcrumb.component.html
View File

@@ -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 <button
*ngIf="hasPreviousNodes()" *ngIf="hasPreviousNodes()"
tabindex="0" tabindex="0"
class="adf-breadcrumb-dropdown-trigger" class="adf-breadcrumb-dropdown-trigger"
(click)="open()"> (click)="open()"
>
<div class="adf-breadcrumb-dropdown-trigger-icon"> <div class="adf-breadcrumb-dropdown-trigger-icon">
<mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-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> </div>
</button> </button>
@@ -14,31 +25,36 @@
#dropdown #dropdown
*ngIf="hasPreviousNodes()" *ngIf="hasPreviousNodes()"
class="adf-breadcrumb-dropdown-path" class="adf-breadcrumb-dropdown-path"
tabindex="0"> tabindex="0"
>
<mat-option <mat-option
*ngFor="let node of previousNodes;" *ngFor="let node of previousNodes"
(click)="onRoutePathClick(node, $event)" (click)="onRoutePathClick(node, $event)"
class="adf-breadcrumb-path-option" class="adf-breadcrumb-path-option"
tabindex="0"> tabindex="0"
>
{{ node.name | translate }} {{ node.name | translate }}
</mat-option> </mat-option>
</mat-select> </mat-select>
<div *ngFor="let item of lastNodes; let last = last" <div
*ngFor="let item of lastNodes; let last = last"
[class.adf-active]="last" [class.adf-active]="last"
[ngSwitch]="last" [ngSwitch]="last"
title="{{ item.name | translate }}" title="{{ item.name | translate }}"
class="adf-breadcrumb-item" class="adf-breadcrumb-item">
role="listitem"> <a
*ngSwitchDefault
<a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + item.name" href="#"
[attr.data-automation-id]="'breadcrumb_' + item.name"
class="adf-breadcrumb-item-anchor" class="adf-breadcrumb-item-anchor"
(click)="onRoutePathClick(item, $event)"> (click)="onRoutePathClick(item, $event)"
>
{{ item.name | translate }} {{ item.name | translate }}
</a> </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 }} {{ item.name | translate }}
</div> </div>
@@ -48,7 +64,12 @@
</div> </div>
</nav> </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 adf-active" role="listitem">
<div class="adf-breadcrumb-item-current"> <div class="adf-breadcrumb-item-current">
{{ root | translate }} {{ root | translate }}

6
lib/content-services/i18n/en.json
View File

@@ -369,5 +369,11 @@
"SUCCESS": { "SUCCESS": {
"LIBRARY_UPDATED": "Library properties updated" "LIBRARY_UPDATED": "Library properties updated"
} }
},
"BREADCRUMB": {
"ARIA-LABEL": {
"BREADCRUMB": "Breadcrumb",
"CURRENT_PAGE": "page"
}
} }
} }