Merge branch 'master' of https://github.com/primefaces/primeng

primefaces · Dec 1, 2023 · a5d3bf2 · a5d3bf2 · vercel · Dec 1, 2023
2 parents 0618958 + c4761b6
commit a5d3bf2
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 7 deletions.
diff --git a/src/app/components/carousel/carousel.ts b/src/app/components/carousel/carousel.ts
@@ -81,6 +81,9 @@ import { DomHandler } from 'primeng/dom';
                             <div
                                 *ngFor="let item of value; let index = index"
                                 [ngClass]="{ 'p-carousel-item': true, 'p-carousel-item-active': firstIndex() <= index && lastIndex() >= index, 'p-carousel-item-start': firstIndex() === index, 'p-carousel-item-end': lastIndex() === index }"
+                                [attr.aria-hidden]="!(totalShiftedItems * -1 === value.length)"
+                                [attr.aria-label]="ariaSlideNumber(index)"
+                                [attr.aria-roledescription]="ariaSlideLabel()"
                             >
                                 <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
                             </div>

diff --git a/src/app/components/galleria/galleria.ts b/src/app/components/galleria/galleria.ts
@@ -400,6 +400,7 @@ export class Galleria implements OnChanges, OnDestroy {
     template: `
         <div
             [attr.id]="id"
+            [attr.role]="'region'"
             *ngIf="value && value.length > 0"
             [ngClass]="{
                 'p-galleria p-component': true,

diff --git a/src/app/components/image/image.ts b/src/app/components/image/image.ts
@@ -23,7 +23,7 @@ import { FocusTrapModule } from 'primeng/focustrap';
     template: `
         <span [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
             <img [attr.src]="src" [attr.srcset]="srcSet" [attr.sizes]="sizes" [attr.alt]="alt" [attr.width]="width" [attr.height]="height" [attr.loading]="loading" [ngStyle]="imageStyle" [class]="imageClass" (error)="imageError($event)" />
-            <button *ngIf="preview" type="button" class="p-image-preview-indicator" (click)="onImageClick()" #previewButton [ngStyle]="{ height: height + 'px', width: width + 'px' }" style="border: 'none';">
+            <button *ngIf="preview" [attr.aria-label]="zoomImageAriaLabel" type="button" class="p-image-preview-indicator" (click)="onImageClick()" #previewButton [ngStyle]="{ height: height + 'px', width: width + 'px' }" style="border: 'none';">
                 <ng-container *ngIf="indicatorTemplate; else defaultTemplate">
                     <ng-container *ngTemplateOutlet="indicatorTemplate"></ng-container>
                 </ng-container>
@@ -376,6 +376,10 @@ export class Image implements AfterContentInit {
     imagePreviewStyle() {
         return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };
     }
+
+    get zoomImageAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.zoomImage : undefined;
+    }
 
     containerClass() {
         return {

diff --git a/src/app/components/messages/messages.ts b/src/app/components/messages/messages.ts
@@ -2,6 +2,7 @@ import { animate, style, transition, trigger } from '@angular/animations';
 import { CommonModule } from '@angular/common';
 import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, OnDestroy, Optional, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { Message, MessageService, PrimeTemplate } from 'primeng/api';
+import { PrimeNGConfig } from 'primeng/api';
 import { CheckIcon } from 'primeng/icons/check';
 import { ExclamationTriangleIcon } from 'primeng/icons/exclamationtriangle';
 import { InfoCircleIcon } from 'primeng/icons/infocircle';
@@ -42,7 +43,7 @@ import { Subscription, timer } from 'rxjs';
                             <span *ngIf="msg.summary" class="p-message-summary" [attr.data-pc-section]="'summary'">{{ msg.summary }}</span>
                             <span *ngIf="msg.detail" class="p-message-detail" [attr.data-pc-section]="'detail'">{{ msg.detail }}</span>
                         </ng-template>
-                        <button class="p-message-close p-link" (click)="removeMessage(i)" *ngIf="closable" type="button" pRipple [attr.aria-label]="'Close'" [attr.data-pc-section]="'closebutton'">
+                        <button class="p-message-close p-link" (click)="removeMessage(i)" *ngIf="closable" type="button" pRipple [attr.aria-label]="closeAriaLabel" [attr.data-pc-section]="'closebutton'">
                             <TimesIcon [styleClass]="'p-message-close-icon'" [attr.data-pc-section]="'closeicon'" />
                         </button>
                     </div>
@@ -143,7 +144,7 @@ export class Messages implements AfterContentInit, OnDestroy {
 
     contentTemplate: TemplateRef<any> | undefined;
 
-    constructor(@Optional() public messageService: MessageService, public el: ElementRef, public cd: ChangeDetectorRef) {}
+    constructor(@Optional() public messageService: MessageService, public el: ElementRef, public cd: ChangeDetectorRef, private config: PrimeNGConfig) {}
 
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
@@ -229,6 +230,9 @@ export class Messages implements AfterContentInit, OnDestroy {
 
         return null;
     }
+    get closeAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.close : undefined;
+    }
 
     ngOnDestroy() {
         if (this.messageSubscription) {

diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts
@@ -74,7 +74,7 @@ import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast
                     (keydown.enter)="onCloseIconClick($event)"
                     *ngIf="message?.closable !== false"
                     pRipple
-                    [attr.aria-label]="'Close'"
+                    [attr.aria-label]="closeAriaLabel"
                     [attr.data-pc-section]="'closebutton'"
                 >
                     <span *ngIf="message.closeIcon" [class]="'pt-1 text-base p-toast-message-icon pi ' + message.closeIcon"></span>
@@ -140,7 +140,7 @@ export class ToastItem implements AfterViewInit, OnDestroy {
 
     timeout: any;
 
-    constructor(private zone: NgZone) {}
+    constructor(private zone: NgZone,private config: PrimeNGConfig) {}
 
     ngAfterViewInit() {
         this.initTimeout();
@@ -185,9 +185,15 @@ export class ToastItem implements AfterViewInit, OnDestroy {
         event.preventDefault();
     }
 
+    get closeAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.close : undefined;
+    }
+
     ngOnDestroy() {
         this.clearTimeout();
     }
+
+
 }
 
 /**

diff --git a/src/app/showcase/doc/Image/accessibilitydoc.ts b/src/app/showcase/doc/Image/accessibilitydoc.ts
@@ -5,8 +5,7 @@ import { Component } from '@angular/core';
     template: ` <app-docsectiontext>
         <h3>Screen Reader</h3>
         <p>
-            The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the <a href="/configuration/#locale">locale</a> API by default, with <i>previewButtonProps</i>you may use
-            your own aria roles and attributes as any valid attribute is passed to the button element implicitly.
+            The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the <a href="/configuration/#locale">locale</a> API by default.
         </p>
         <p>When preview is active, <i>dialog</i> role with <i>aria-modal</i> is applied to the overlay image container.</p>
         <p>Button controls use <i>aria.rotateRight</i>, <i>aria.rotateLeft</i>, <i>aria.zoomIn</i>, <i>aria.zoomOut</i> and <i>aria.close</i> from the <a href="/configuration/#locale">locale</a> API as <i>aria-label</i>.</p>