Merge pull request #15034 from primefaces/issue-14973

Fixed #1497 - Chip | Add aria-label to remove icon
primefaces · Mar 13, 2024 · 6c9a863 · 6c9a863
2 parents c90dc03 + 105252a
commit 6c9a863
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/app/components/api/primengconfig.ts b/src/app/components/api/primengconfig.ts
@@ -138,7 +138,8 @@ export class PrimeNGConfig {
             rotateRight: 'Rotate Right',
             rotateLeft: 'Rotate Left',
             listLabel: 'Option List',
-            selectColor: 'Select a color'
+            selectColor: 'Select a color',
+            removeLabel: 'Remove'
         }
     };
 

diff --git a/src/app/components/api/translation.ts b/src/app/components/api/translation.ts
@@ -129,4 +129,5 @@ export interface Aria {
     rotateLeft?: string;
     listLabel?: string;
     selectColor?: string;
+    removeLabel?: string;
 }
diff --git a/src/app/components/chip/chip.ts b/src/app/components/chip/chip.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
-import { PrimeTemplate, SharedModule } from 'primeng/api';
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, inject } from '@angular/core';
+import { PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api';
 import { TimesCircleIcon } from 'primeng/icons/timescircle';
 /**
  * Chip represents people using icons, labels and images.
@@ -16,10 +16,10 @@ import { TimesCircleIcon } from 'primeng/icons/timescircle';
             <div class="p-chip-text" *ngIf="label" [attr.data-pc-section]="'label'">{{ label }}</div>
             <ng-container *ngIf="removable">
                 <ng-container *ngIf="!removeIconTemplate">
-                    <span tabindex="0" *ngIf="removeIcon" [class]="removeIcon" [ngClass]="'pi-chip-remove-icon'" [attr.data-pc-section]="'removeicon'" (click)="close($event)" (keydown)="onKeydown($event)"></span>
-                    <TimesCircleIcon tabindex="0" *ngIf="!removeIcon" [class]="'pi-chip-remove-icon'" [attr.data-pc-section]="'removeicon'" (click)="close($event)" (keydown)="onKeydown($event)" />
+                    <span tabindex="0" *ngIf="removeIcon" [class]="removeIcon" [ngClass]="'pi-chip-remove-icon'" [attr.data-pc-section]="'removeicon'" (click)="close($event)" (keydown)="onKeydown($event)" [attr.aria-label]="removeAriaLabel"></span>
+                    <TimesCircleIcon tabindex="0" *ngIf="!removeIcon" [class]="'pi-chip-remove-icon'" [attr.data-pc-section]="'removeicon'" (click)="close($event)" (keydown)="onKeydown($event)" [attr.aria-label]="removeAriaLabel" />
                 </ng-container>
-                <span *ngIf="removeIconTemplate" tabindex="0" [attr.data-pc-section]="'removeicon'" class="pi-chip-remove-icon" (click)="close($event)" (keydown)="onKeydown($event)">
+                <span *ngIf="removeIconTemplate" tabindex="0" [attr.data-pc-section]="'removeicon'" class="pi-chip-remove-icon" (click)="close($event)" (keydown)="onKeydown($event)" [attr.aria-label]="removeAriaLabel">
                     <ng-template *ngTemplateOutlet="removeIconTemplate"></ng-template>
                 </span>
             </ng-container>
@@ -81,10 +81,16 @@ export class Chip implements AfterContentInit {
      */
     @Output() onImageError: EventEmitter<Event> = new EventEmitter<Event>();
 
+    config = inject(PrimeNGConfig);
+
     visible: boolean = true;
 
     removeIconTemplate: TemplateRef<any> | undefined;
 
+    get removeAriaLabel() {
+        return this.config.getTranslation(TranslationKeys.ARIA)['removeLabel'];
+    }
+
     @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;
 
     ngAfterContentInit() {