From af37a6702575cf25bc74e6b88aa0b7a2383b5709 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
 <92744169+mehmetcetin01140@users.noreply.github.com>
Date: Wed, 14 Feb 2024 09:44:58 +0300
Subject: [PATCH] Fixed #14798 - ProgressSpinner | Unable to set aria-label

---
 src/app/components/progressspinner/progressspinner.ts | 7 ++++++-
 src/app/showcase/doc/progressspinner/basicdoc.ts      | 6 +++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/app/components/progressspinner/progressspinner.ts b/src/app/components/progressspinner/progressspinner.ts
index ff7179dffd9..07889a40c1a 100755
--- 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
index ed44e81a0d9..195eef17982 100644
--- 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';