inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds loading state accessibility (#10926)

Browse Source 
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.
This commit is contained in:
Michaela
2025-06-11 15:48:08 +02:00
committed by GitHub
parent e2693f9304
commit 2c4764f89e
3 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
lib/core/src/lib/i18n/en.json
View File

@@ -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",

3
lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.html
View File

@@ -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>

9
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html
View File

@@ -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>