From 4446d561ff7b46fc0cf4a10f430fa6a84a64578f Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Thu, 10 Aug 2023 14:10:55 -0400
Subject: [PATCH] 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 3f037a9552358adaf08d5981ff0d00e7302a01cd)
---
 src/components/PDFView/index.js | 18 ++++++++++++++++++
 src/styles/styles.js            |  3 +++
 2 files changed, 21 insertions(+)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 26e117815ec1..2aede78d3780 100644
--- a/src/components/PDFView/index.js
+++ b/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}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 535d59bcd468..e5333dc6fb47 100644
--- a/src/styles/styles.js
+++ b/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: {