Merge pull request #24363 from rezkiy37/fix/24326-pdf-keyboard-scroll

User can scroll PDF by using the down/up arrow of keyboard

(cherry picked from commit 3f037a9)

src/components/PDFView/index.js

@@ -48,6 +48,7 @@ class PDFView extends Component {
         this.calculatePageHeight = this.calculatePageHeight.bind(this);
         this.calculatePageWidth = this.calculatePageWidth.bind(this);
         this.renderPage = this.renderPage.bind(this);
+        this.setListAttributes = this.setListAttributes.bind(this);
 
         const workerBlob = new Blob([pdfWorkerSource], {type: 'text/javascript'});
         pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(workerBlob);
@@ -97,6 +98,22 @@ class PDFView extends Component {
         });
     }
 
+    /**
+     * Sets attributes to list container.
+     * It unblocks a default scroll by keyboard of browsers.
+     * @param {Object|undefined} ref
+     */
+    setListAttributes(ref) {
+        if (!ref) {
+            return;
+        }
+
+        // Useful for elements that should not be navigated to directly using the "Tab" key,
+        // but need to have keyboard focus set to them.
+        // eslint-disable-next-line no-param-reassign
+        ref.tabIndex = -1;
+    }
+
     /**
      * Calculates a proper page height. The method should be called only when there are page viewports.
      * It is based on a ratio between the specific page viewport width and provided page width.
@@ -237,6 +254,7 @@ class PDFView extends Component {
                     >
                         {this.state.pageViewports.length > 0 && (
                             <List
+                                outerRef={this.setListAttributes}
                                 style={styles.PDFViewList}
                                 width={this.props.isSmallScreenWidth ? pageWidth : this.state.containerWidth}
                                 height={this.state.containerHeight}

src/styles/styles.js

@@ -2109,6 +2109,9 @@ const styles = {
 
     PDFViewList: {
         overflowX: 'hidden',
+        // There properties disable "focus" effect on list
+        boxShadow: 'none',
+        outline: 'none',
     },
 
     pdfPasswordForm: {