From 105252ac249e57f9890cf6a570c3eab2219d291d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Wed, 13 Mar 2024 14:44:09 +0300
Subject: [PATCH] Fixed #1497 - Chip | Add aria-label to remove icon

---
 src/app/components/api/primengconfig.ts |  3 ++-
 src/app/components/api/translation.ts   |  1 +
 src/app/components/chip/chip.ts         | 16 +++++++++++-----
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/app/components/api/primengconfig.ts b/src/app/components/api/primengconfig.ts
index 0a8e3d25735..392b3c305f7 100644
--- 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
index 9968041be67..bdbc8861547 100644
--- 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
index 020073ea7bb..58de712b7f7 100755
--- 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() {