Fix: Allow scrollable viewers to accept keyboard input when focused

box · Apr 8, 2019 · 47eadd9 · 47eadd9
1 parent 2f191b8
commit 47eadd9
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 2 deletions.
diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -115,6 +115,7 @@ class DocBaseViewer extends BaseViewer {
 
         this.docEl = this.createViewer(document.createElement('div'));
         this.docEl.classList.add('bp-doc');
+        this.docEl.tabIndex = '0';
 
         if (Browser.getName() === 'Safari') {
             this.docEl.classList.add(IS_SAFARI_CLASS);

diff --git a/src/lib/viewers/image/ImageBaseViewer.js b/src/lib/viewers/image/ImageBaseViewer.js
@@ -365,7 +365,6 @@ class ImageBaseViewer extends BaseViewer {
         // If this is a CTRL or CMD click, then ignore
         if ((typeof button !== 'number' || button < 2) && !ctrlKey && !metaKey) {
             this.startPanning(clientX, clientY);
-            event.preventDefault();
         }
     }
 
@@ -389,7 +388,6 @@ class ImageBaseViewer extends BaseViewer {
                 // click mouse up. In that case reset the image size, mimicking single-click-unzoom.
                 this.zoom('reset');
             }
-            event.preventDefault();
         }
     }
 

diff --git a/src/lib/viewers/image/MultiImageViewer.js b/src/lib/viewers/image/MultiImageViewer.js
@@ -38,6 +38,7 @@ class MultiImageViewer extends ImageBaseViewer {
 
         this.wrapperEl = this.createViewer(document.createElement('div'));
         this.wrapperEl.classList.add(CSS_CLASS_IMAGE_WRAPPER);
+        this.wrapperEl.tabIndex = '0';
 
         this.imageEl = this.wrapperEl.appendChild(document.createElement('div'));
         this.imageEl.classList.add(CSS_CLASS_IMAGE);

diff --git a/src/lib/viewers/text/PlainTextViewer.js b/src/lib/viewers/text/PlainTextViewer.js
@@ -115,6 +115,7 @@ class PlainTextViewer extends TextBaseViewer {
         this.textEl = this.createViewer(document.createElement('pre'));
         this.textEl.className = 'bp-text bp-text-plain hljs';
         this.textEl.classList.add(CLASS_HIDDEN);
+        this.textEl.tabIndex = '0';
 
         this.codeEl = this.textEl.appendChild(document.createElement('code'));
         this.codeEl.classList.add(this.options.file.extension);