From 1900d91a9e7214fb1bb8d8af33b0f6f7a6329c41 Mon Sep 17 00:00:00 2001
From: Taneli Tuomola <taneli.tuomola@ruokavirasto.fi>
Date: Wed, 13 Mar 2024 09:42:53 +0200
Subject: [PATCH] fix #15024 table filter row aria-labels

---
 src/app/components/table/table.ts          | 15 ++++++++++++---
 src/app/showcase/doc/table/filterrowdoc.ts |  4 ++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
index a0187193892..aaf9466bd28 100644
--- a/src/app/components/table/table.ts
+++ b/src/app/components/table/table.ts
@@ -4945,6 +4945,7 @@ export class ReorderableRow implements AfterViewInit {
                 class="p-fluid"
                 [type]="type"
                 [field]="field"
+                [ariaLabel]="ariaLabel"
                 [filterConstraint]="dt.filters[field]"
                 [filterTemplate]="filterTemplate"
                 [placeholder]="placeholder"
@@ -5203,6 +5204,11 @@ export class ColumnFilter implements AfterContentInit {
      * @group Props
      */
     @Input() showButtons: boolean = true;
+    /**
+     * Defines the aria-label of the form element.
+     * @group Props
+     */
+    @Input() ariaLabel: string | undefined;
 
     @ViewChild('icon') icon: Nullable<ElementRef>;
 
@@ -5735,7 +5741,7 @@ export class ColumnFilter implements AfterContentInit {
         </ng-container>
         <ng-template #builtInElement>
             <ng-container [ngSwitch]="type">
-                <input *ngSwitchCase="'text'" type="text" pInputText [value]="filterConstraint?.value" (input)="onModelChange($event.target.value)" (keydown.enter)="onTextInputEnterKeyDown($event)" [attr.placeholder]="placeholder" />
+                <input *ngSwitchCase="'text'" type="text" [ariaLabel]="ariaLabel" pInputText [value]="filterConstraint?.value" (input)="onModelChange($event.target.value)" (keydown.enter)="onTextInputEnterKeyDown($event)" [attr.placeholder]="placeholder" />
                 <p-inputNumber
                     *ngSwitchCase="'numeric'"
                     [ngModel]="filterConstraint?.value"
@@ -5744,6 +5750,7 @@ export class ColumnFilter implements AfterContentInit {
                     [showButtons]="showButtons"
                     [minFractionDigits]="minFractionDigits"
                     [maxFractionDigits]="maxFractionDigits"
+                    [ariaLabel]="ariaLabel"
                     [prefix]="prefix"
                     [suffix]="suffix"
                     [placeholder]="placeholder"
@@ -5754,8 +5761,8 @@ export class ColumnFilter implements AfterContentInit {
                     [currencyDisplay]="currencyDisplay"
                     [useGrouping]="useGrouping"
                 ></p-inputNumber>
-                <p-triStateCheckbox *ngSwitchCase="'boolean'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)"></p-triStateCheckbox>
-                <p-calendar *ngSwitchCase="'date'" [placeholder]="placeholder" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" appendTo="body"></p-calendar>
+                <p-triStateCheckbox [ariaLabel]="ariaLabel" *ngSwitchCase="'boolean'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)"></p-triStateCheckbox>
+                <p-calendar [ariaLabel]="ariaLabel" *ngSwitchCase="'date'" [placeholder]="placeholder" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" appendTo="body"></p-calendar>
             </ng-container>
         </ng-template>
     `,
@@ -5793,6 +5800,8 @@ export class ColumnFilterFormElement implements OnInit {
 
     @Input() useGrouping: boolean = true;
 
+    @Input() ariaLabel:  string | undefined;
+
     get showButtons(): boolean {
         return this.colFilter.showButtons;
     }
diff --git a/src/app/showcase/doc/table/filterrowdoc.ts b/src/app/showcase/doc/table/filterrowdoc.ts
index 217bc54521c..e3551e91b4d 100644
--- a/src/app/showcase/doc/table/filterrowdoc.ts
+++ b/src/app/showcase/doc/table/filterrowdoc.ts
@@ -42,10 +42,10 @@ import { CustomerService } from '../../service/customerservice';
                         </tr>
                         <tr>
                             <th>
-                                <p-columnFilter type="text" field="name"></p-columnFilter>
+                                <p-columnFilter type="text" field="name" ariaLabel="Filter Name"></p-columnFilter>
                             </th>
                             <th>
-                                <p-columnFilter type="text" field="country.name"></p-columnFilter>
+                                <p-columnFilter type="text" field="country.name" ariaLabel="Filter Country"></p-columnFilter>
                             </th>
                             <th>
                                 <p-columnFilter field="representative" matchMode="in" [showMenu]="false">