Merge pull request #15025 from TaneliTuomola/issue-15024

fix #15024 table filter row aria-labels
primefaces · Mar 19, 2024 · 1d69273 · 1d69273
2 parents af54f03 + 1900d91
commit 1d69273
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -4953,6 +4953,7 @@ export class ReorderableRow implements AfterViewInit {
                 class="p-fluid"
                 [type]="type"
                 [field]="field"
+                [ariaLabel]="ariaLabel"
                 [filterConstraint]="dt.filters[field]"
                 [filterTemplate]="filterTemplate"
                 [placeholder]="placeholder"
@@ -5211,6 +5212,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>;
 
@@ -5745,7 +5751,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"
@@ -5754,6 +5760,7 @@ export class ColumnFilter implements AfterContentInit {
                     [showButtons]="showButtons"
                     [minFractionDigits]="minFractionDigits"
                     [maxFractionDigits]="maxFractionDigits"
+                    [ariaLabel]="ariaLabel"
                     [prefix]="prefix"
                     [suffix]="suffix"
                     [placeholder]="placeholder"
@@ -5764,8 +5771,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>
     `,
@@ -5803,6 +5810,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
@@ -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">