fix: add descriptive attributes (#1421)

box · Aug 31, 2021 · 01b497b · 01b497b
1 parent 55df0a0
commit 01b497b
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -59,7 +59,7 @@
         </div>
     </div>
     <div class="bp" data-testid="bp" tabindex="-1">
-        <div class="bp-content" data-testid="bp-content" tabindex="-1">
+        <div class="bp-content" data-testid="bp-content" tabindex="-1" role="region">
             <div class="bp-loading-wrapper">
                 <div class="bp-loading">
                     <div class="bp-icon bp-icon-file"></div>

diff --git 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
@@ -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);
         }