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
*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 }}