diff --git a/src/i18n/en-US.properties b/src/i18n/en-US.properties index 38dc4e7d9..62c9236cb 100644 --- a/src/i18n/en-US.properties +++ b/src/i18n/en-US.properties @@ -58,6 +58,10 @@ find_previous=Find previous find_close=Close # Search input Aria-label attribute find_label=Search input +# Sidebar thumbnails aria-label attribute +thumbnail_label=Page thumbnails +# Document preview aria-label attribute +file_preview_label=File preview # Error messages # Default preview error message diff --git a/src/lib/shell.html b/src/lib/shell.html index 2653271b0..76131292b 100644 --- a/src/lib/shell.html +++ b/src/lib/shell.html @@ -59,7 +59,7 @@
-
+
diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js index ce40232bd..4bfd273f8 100644 --- a/src/lib/viewers/BaseViewer.js +++ b/src/lib/viewers/BaseViewer.js @@ -191,6 +191,9 @@ class BaseViewer extends EventEmitter { // From the perspective of viewers bp-content holds everything this.containerEl = container.querySelector(SELECTOR_BOX_PREVIEW_CONTENT); + // Set an aria-label for all files + this.containerEl.setAttribute('aria-label', __('file_preview_label')); + // Update the loading indicators this.setupLoading(); diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index 976e1a9b3..1f060bd85 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -163,9 +163,10 @@ class DocBaseViewer extends BaseViewer { this.startPageNum = this.getStartPage(this.startAt); if (this.options.enableThumbnailsSidebar) { - this.thumbnailsSidebarEl = document.createElement('div'); + this.thumbnailsSidebarEl = document.createElement('nav'); this.thumbnailsSidebarEl.className = `${CLASS_BOX_PREVIEW_THUMBNAILS_CONTAINER}`; this.thumbnailsSidebarEl.setAttribute('data-testid', 'thumbnails-sidebar'); + this.thumbnailsSidebarEl.setAttribute('aria-label', __('thumbnail_label')); this.thumbnailsSidebarEl.tabIndex = 0; this.rootEl.insertBefore(this.thumbnailsSidebarEl, this.containerEl); }