fix: aria-labels (#17448)

* fix: aria-labels * fix: remove debugging
primefaces · Jan 29, 2025 · ef391d5 · ef391d5
1 parent dc684c5
commit ef391d5
Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/packages/primeng/src/datepicker/datepicker.ts b/packages/primeng/src/datepicker/datepicker.ts
@@ -182,7 +182,7 @@ export const DATEPICKER_VALUE_ACCESSOR: any = {
                                     (onClick)="onPrevButtonClick($event)"
                                     [ngStyle]="{ visibility: i === 0 ? 'visible' : 'hidden' }"
                                     type="button"
-                                    [attr.aria-label]="prevIconAriaLabel"
+                                    [ariaLabel]="prevIconAriaLabel"
                                 >
                                     <ChevronLeftIcon *ngIf="!previousIconTemplate && !_previousIconTemplate" />
                                     <span *ngIf="previousIconTemplate || !_previousIconTemplate">
@@ -227,7 +227,7 @@ export const DATEPICKER_VALUE_ACCESSOR: any = {
                                     styleClass="p-datepicker-next-button p-button-icon-only"
                                     (onClick)="onNextButtonClick($event)"
                                     [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
-                                    [attr.aria-label]="nextIconAriaLabel"
+                                    [ariaLabel]="nextIconAriaLabel"
                                 >
                                     <ChevronRightIcon *ngIf="!nextIconTemplate && !_nextIconTemplate" />
 

diff --git a/packages/primeng/src/message/message.ts b/packages/primeng/src/message/message.ts
@@ -54,7 +54,7 @@ import { MessageStyle } from './style/messagestyle';
                         </span>
                     }
                     @if (closable) {
-                        <button pRipple type="button" class="p-message-close-button" (click)="close($event)">
+                        <button pRipple type="button" class="p-message-close-button" (click)="close($event)" [attr.aria-label]="closeAriaLabel">
                             @if (closeIcon) {
                                 <i class="p-message-close-icon" [ngClass]="closeIcon"></i>
                             }
@@ -172,6 +172,10 @@ export class Message extends BaseComponent implements AfterContentInit {
      */
     @Output() onClose: EventEmitter<{ originalEvent: Event }> = new EventEmitter<{ originalEvent: Event }>();
 
+    get closeAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.close : undefined;
+    }
+
     get containerClass(): string {
         const variantClass = this.variant === 'outlined' ? 'p-message-outlined' : this.variant === 'simple' ? 'p-message-simple' : '';
         const sizeClass = this.size === 'small' ? 'p-message-sm' : this.size === 'large' ? 'p-message-lg' : '';

diff --git a/packages/primeng/src/multiselect/multiselect.ts b/packages/primeng/src/multiselect/multiselect.ts
@@ -99,7 +99,7 @@ export const MULTISELECT_VALUE_ACCESSOR: any = {
             (click)="onOptionClick($event)"
             (mouseenter)="onOptionMouseEnter($event)"
         >
-            <p-checkbox [ngModel]="selected" [binary]="true" [tabindex]="-1" [variant]="variant">
+            <p-checkbox [ngModel]="selected" [binary]="true" [tabindex]="-1" [variant]="variant" [ariaLabel]="label">
                 <ng-container *ngIf="itemCheckboxIconTemplate">
                     <ng-template #icon let-klass="class">
                         <ng-template *ngTemplateOutlet="itemCheckboxIconTemplate; context: { checked: selected, class: klass }"></ng-template>
@@ -294,7 +294,7 @@ export class MultiSelectItem extends BaseComponent {
                             <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: filterOptions }"></ng-container>
                         </ng-container>
                         <ng-template #builtInFilterElement>
-                            <p-checkbox [ngModel]="allSelected()" [binary]="true" (onChange)="onToggleAll($event)" *ngIf="showToggleAll && !selectionLimit" [variant]="variant" [disabled]="disabled" #headerCheckbox>
+                            <p-checkbox [ngModel]="allSelected()" [ariaLabel]="toggleAllAriaLabel" [binary]="true" (onChange)="onToggleAll($event)" *ngIf="showToggleAll && !selectionLimit" [variant]="variant" [disabled]="disabled" #headerCheckbox>
                                 <ng-template #checkboxicon let-klass="class">
                                     <CheckIcon *ngIf="!headerCheckboxIconTemplate && !_headerCheckboxIconTemplate && allSelected()" [styleClass]="klass" [attr.data-pc-section]="'icon'" />
                                     <ng-template

diff --git a/packages/primeng/src/toast/toast.ts b/packages/primeng/src/toast/toast.ts
@@ -5,6 +5,7 @@ import {
     ChangeDetectionStrategy,
     Component,
     ContentChild,
+    ContentChildren,
     ElementRef,
     EventEmitter,
     Input,
@@ -13,14 +14,13 @@ import {
     OnDestroy,
     OnInit,
     Output,
+    QueryList,
     TemplateRef,
     ViewChild,
     ViewEncapsulation,
     booleanAttribute,
     inject,
-    numberAttribute,
-    ContentChildren,
-    QueryList
+    numberAttribute
 } from '@angular/core';
 import { isEmpty, setAttribute, uuid } from '@primeuix/utils';
 import { MessageService, PrimeTemplate, SharedModule, ToastMessageOptions } from 'primeng/api';
@@ -93,7 +93,7 @@ import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast
                     </ng-container>
                     <ng-container *ngTemplateOutlet="template; context: { $implicit: message }"></ng-container>
                     @if (message?.closable !== false) {
-                        <p-button [styleClass]="cx('closeButton')" (onClick)="onCloseIconClick($event)" (keydown.enter)="onCloseIconClick($event)" [attr.ariaLabel]="closeAriaLabel" [attr.data-pc-section]="'closebutton'" rounded text>
+                        <p-button [styleClass]="cx('closeButton')" (onClick)="onCloseIconClick($event)" (keydown.enter)="onCloseIconClick($event)" [ariaLabel]="closeAriaLabel" [attr.data-pc-section]="'closebutton'" rounded text>
                             @if (message.closeIcon) {
                                 <span *ngIf="message.closeIcon" [ngClass]="cx('closeIcon')"></span>
                             } @else {