diff --git a/src/i18n/en-US.properties b/src/i18n/en-US.properties index d2493c78c1..d980eb8b39 100644 --- a/src/i18n/en-US.properties +++ b/src/i18n/en-US.properties @@ -56,6 +56,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 +document_preview_label=Document preview # Error messages # Default preview error message diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index d2100e4fe7..d16e5d3c8c 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -162,13 +162,19 @@ 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); } + if (this.containerEl) { + this.containerEl.setAttribute('aria-label', __('document_preview_label')); + this.containerEl.setAttribute('role', 'region'); + } + this.updateDiscoverabilityResinTag(); }