Fixed #14798 - ProgressSpinner | Unable to set aria-label

primefaces · Feb 14, 2024 · af37a67 · af37a67
1 parent d78077f
commit af37a67
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/app/components/progressspinner/progressspinner.ts b/src/app/components/progressspinner/progressspinner.ts
@@ -7,7 +7,7 @@ import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation
 @Component({
     selector: 'p-progressSpinner',
     template: `
-        <div class="p-progress-spinner" [ngStyle]="style" [ngClass]="styleClass" role="progressbar" [attr.aria-busy]="true" [attr.data-pc-name]="'progressspinner'" [attr.data-pc-section]="'root'">
+        <div class="p-progress-spinner" [ngStyle]="style" [ngClass]="styleClass" role="progressbar" [attr.aria-label]="ariaLabel" [attr.aria-busy]="true" [attr.data-pc-name]="'progressspinner'" [attr.data-pc-section]="'root'">
             <svg class="p-progress-spinner-svg" viewBox="25 25 50 50" [style.animation-duration]="animationDuration" [attr.data-pc-section]="'root'">
                 <circle class="p-progress-spinner-circle" cx="50" cy="50" r="20" [attr.fill]="fill" [attr.stroke-width]="strokeWidth" stroke-miterlimit="10" />
             </svg>
@@ -46,6 +46,11 @@ export class ProgressSpinner {
      * @group Props
      */
     @Input() animationDuration: string = '2s';
+    /**
+     * Used to define a aria label attribute the current element.
+     * @group Props
+     */
+    @Input() ariaLabel: string | undefined;
 }
 
 @NgModule({

diff --git a/src/app/showcase/doc/progressspinner/basicdoc.ts b/src/app/showcase/doc/progressspinner/basicdoc.ts
@@ -8,16 +8,16 @@ import { Code } from '../../domain/code';
             <p>An infinite spin animation is displayed by default.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-progressSpinner aria-label="loading"></p-progressSpinner>
+            <p-progressSpinner ariaLabel="loading"></p-progressSpinner>
         </div>
         <app-code [code]="code" selector="progress-spinner-basic-demo"></app-code>
     `
 })
 export class BasicDoc {
     code: Code = {
-        basic: `<p-progressSpinner></p-progressSpinner>`,
+        basic: `<p-progressSpinner ariaLabel="loading"></p-progressSpinner>`,
         html: `<div class="card flex justify-content-center">
-    <p-progressSpinner></p-progressSpinner>
+    <p-progressSpinner ariaLabel="loading"></p-progressSpinner>
 </div>`,
         typescript: `
 import { Component } from '@angular/core';