Fixed #10669 - Breadcrumb | aria-label support for Home Icon

primefaces · Sep 24, 2021 · 4b9ea75 · 4b9ea75
1 parent 829264b
commit 4b9ea75
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/app/components/breadcrumb/breadcrumb.ts b/src/app/components/breadcrumb/breadcrumb.ts
@@ -10,15 +10,15 @@ import {TooltipModule} from 'primeng/tooltip';
         <div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-breadcrumb p-component'">
             <ul>
                 <li [class]="home.styleClass" [ngClass]="{'p-breadcrumb-home': true, 'p-disabled':home.disabled}" [ngStyle]="home.style" *ngIf="home" pTooltip [tooltipOptions]="home.tooltipOptions">
-                    <a *ngIf="!home.routerLink" [href]="home.url ? home.url : null" class="p-menuitem-link" (click)="itemClick($event, home)"
+                    <a *ngIf="!home.routerLink" [attr.aria-label]="homeAriaLabel" [href]="home.url ? home.url : null" class="p-menuitem-link" (click)="itemClick($event, home)"
                         [attr.target]="home.target" [attr.title]="home.title" [attr.id]="home.id" [attr.tabindex]="home.disabled ? null : '0'">
                         <span *ngIf="home.icon" class="p-menuitem-icon" [ngClass]="home.icon||'pi pi-home'"></span>
                         <ng-container *ngIf="home.label">
                             <span *ngIf="home.escape !== false; else htmlHomeLabel" class="p-menuitem-text">{{home.label}}</span>
                             <ng-template #htmlHomeLabel><span class="p-menuitem-text" [innerHTML]="home.label"></span></ng-template>
                         </ng-container>
                     </a>
-                    <a *ngIf="home.routerLink" [routerLink]="home.routerLink" [queryParams]="home.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="home.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link" (click)="itemClick($event, home)"
+                    <a *ngIf="home.routerLink" [routerLink]="home.routerLink" [attr.aria-label]="homeAriaLabel" [queryParams]="home.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="home.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link" (click)="itemClick($event, home)"
                         [attr.target]="home.target" [attr.title]="home.title" [attr.id]="home.id" [attr.tabindex]="home.disabled ? null : '0'"
                         [fragment]="home.fragment" [queryParamsHandling]="home.queryParamsHandling" [preserveFragment]="home.preserveFragment" [skipLocationChange]="home.skipLocationChange" [replaceUrl]="home.replaceUrl" [state]="home.state">
                         <span *ngIf="home.icon" class="p-menuitem-icon" [ngClass]="home.icon||'pi pi-home'"></span>
@@ -71,6 +71,8 @@ export class Breadcrumb {
 
     @Input() home: MenuItem;
 
+    @Input() homeAriaLabel: string;
+
     @Output() onItemClick: EventEmitter<any> = new EventEmitter();
 
     itemClick(event, item: MenuItem) {

diff --git a/src/app/showcase/components/breadcrumb/breadcrumbdemo.html b/src/app/showcase/components/breadcrumb/breadcrumbdemo.html
@@ -28,12 +28,12 @@ <h5>MenuModel API</h5>
 
             <h5>Getting Started</h5>
             <p>Breadcrumb requires a collection of menuitems connected to its model property.</p>
-            
+
 <app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
 export class BreadcrumbDemo implements OnInit &#123;
 
     private items: MenuItem[];
-    
+
     ngOnInit() &#123;
         this.items = [
             &#123;label:'Categories'&#125;,
@@ -89,6 +89,12 @@ <h5>Properties</h5>
                             <td>null</td>
                             <td>Style class of the component.</td>
                         </tr>
+                        <tr>
+                            <td>homeAriaLabel</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines a string that labels the home icon for accessibility.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -161,9 +167,9 @@ <h5>Dependencies</h5>
 export class BreadcrumbDemo implements OnInit &#123;
 
     items: MenuItem[];
-    
+
     home: MenuItem;
-    
+
     ngOnInit() &#123;
         this.items = [
             &#123;label: 'Computer'&#125;,
@@ -172,10 +178,10 @@ <h5>Dependencies</h5>
             &#123;label: 'Backpacks'&#125;,
             &#123;label: 'Item'&#125;
         ];
-        
+
         this.home = &#123;icon: 'pi pi-home', routerLink: '/'&#125;;
     &#125;
-    
+
 &#125;
 </app-code>
 
@@ -189,4 +195,4 @@ <h5>Dependencies</h5>
             </ng-template>
         </p-tabPanel>
     </p-tabView>
-</div>
+</div>