From 2c4764f89e214ee83aa0e631abe2f4908e50e6a3 Mon Sep 17 00:00:00 2001
From: Michaela <85624192+mkrbr@users.noreply.github.com>
Date: Wed, 11 Jun 2025 15:48:08 +0200
Subject: [PATCH] Adds loading state accessibility (#10926)

Improves accessibility by adding screen reader support to loading indicators.

This ensures that users with disabilities are informed when the document is loading, improving the overall user experience.
---
 lib/core/src/lib/i18n/en.json                            | 3 ++-
 .../components/pdf-viewer/pdf-viewer.component.html      | 3 ++-
 .../viewer-render/viewer-render.component.html           | 9 ++++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json
index 7b78720b0d..06550092a1 100644
--- a/lib/core/src/lib/i18n/en.json
+++ b/lib/core/src/lib/i18n/en.json
@@ -452,7 +452,8 @@
       "CANCEL": "Cancel",
       "RESET": "Reset",
       "THUMBNAILS": "Document thumbnails",
-      "THUMBNAILS_PANLEL_CLOSE": "Close thumbnails panel"
+      "THUMBNAILS_PANLEL_CLOSE": "Close thumbnails panel",
+      "LOADING": "Document is loading"
     },
     "PAGE_LABEL": {
       "SHOWING": "Showing",
diff --git a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.html b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.html
index defce60eb2..0a57422f87 100644
--- a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.html
+++ b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.html
@@ -33,7 +33,8 @@
                  aria-expanded="true">
                 <div id="loader-container" class="adf-loader-container">
                     <div class="adf-loader-item">
-                        <mat-progress-bar class="adf-loader-item-progress-bar" mode="indeterminate" />
+                        <mat-progress-bar [attr.aria-label]="'ADF_VIEWER.ARIA.LOADING' | translate"
+                                          class="adf-loader-item-progress-bar" mode="indeterminate" />
                     </div>
                 </div>
             </div>
diff --git a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html
index 31b7f67586..55193b43c4 100644
--- a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html
+++ b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html
@@ -2,9 +2,10 @@
     <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
         <div class="adf-viewer-render-content-container">
             <div class="adf-viewer-render__loading-screen">
-                <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
+                <h2 id="loading-spinner-label">{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
                 <div>
-                    <mat-spinner class="adf-viewer-render__loading-screen__spinner" />
+                    <mat-spinner attr.aria-labelledby="loading-spinner-label"
+                                 class="adf-viewer-render__loading-screen__spinner" />
                 </div>
             </div>
         </div>
@@ -103,5 +104,7 @@
     </div>
 }
 <ng-container *ngIf="viewerTemplateExtensions">
-    <ng-template [ngTemplateOutlet]="viewerTemplateExtensions" [ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension, markAsLoaded: markAsLoaded.bind(this) }" [ngTemplateOutletInjector]="injector" />
+    <ng-template [ngTemplateOutlet]="viewerTemplateExtensions"
+                 [ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension, markAsLoaded: markAsLoaded.bind(this) }"
+                 [ngTemplateOutletInjector]="injector" />
 </ng-container>