diff --git a/src/components/AttachmentCarousel/CarouselActions/index.native.js b/src/components/AttachmentCarousel/CarouselActions.js
similarity index 69%
rename from src/components/AttachmentCarousel/CarouselActions/index.native.js
rename to src/components/AttachmentCarousel/CarouselActions.js
index d12cd6bfbb60..3946a613ee16 100644
--- a/src/components/AttachmentCarousel/CarouselActions/index.native.js
+++ b/src/components/AttachmentCarousel/CarouselActions.js
@@ -1,7 +1,8 @@
 import {useEffect} from 'react';
+import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import KeyboardShortcut from '../../../libs/KeyboardShortcut';
-import CONST from '../../../CONST';
+import KeyboardShortcut from '../../libs/KeyboardShortcut';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Callback to cycle through attachments */
@@ -13,7 +14,12 @@ const Carousel = (props) => {
         const shortcutLeftConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_LEFT;
         const unsubscribeLeftKey = KeyboardShortcut.subscribe(
             shortcutLeftConfig.shortcutKey,
-            () => {
+            (e) => {
+                if (lodashGet(e, 'target.blur')) {
+                    // prevents focus from highlighting around the modal
+                    e.target.blur();
+                }
+
                 props.onCycleThroughAttachments(-1);
             },
             shortcutLeftConfig.descriptionKey,
@@ -23,7 +29,12 @@ const Carousel = (props) => {
         const shortcutRightConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_RIGHT;
         const unsubscribeRightKey = KeyboardShortcut.subscribe(
             shortcutRightConfig.shortcutKey,
-            () => {
+            (e) => {
+                if (lodashGet(e, 'target.blur')) {
+                    // prevents focus from highlighting around the modal
+                    e.target.blur();
+                }
+
                 props.onCycleThroughAttachments(1);
             },
             shortcutRightConfig.descriptionKey,
diff --git a/src/components/AttachmentCarousel/CarouselActions/index.js b/src/components/AttachmentCarousel/CarouselActions/index.js
deleted file mode 100644
index 4ec551daa252..000000000000
--- a/src/components/AttachmentCarousel/CarouselActions/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import {useCallback, useEffect} from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-    /** Callback to cycle through attachments */
-    onCycleThroughAttachments: PropTypes.func.isRequired,
-};
-
-const Carousel = (props) => {
-    /**
-     * Listens for keyboard shortcuts and applies the action
-     *
-     * @param {Object} e
-     */
-    const handleKeyPress = useCallback((e) => {
-        // prevents focus from highlighting around the modal
-        e.target.blur();
-
-        if (e.key === 'ArrowLeft') {
-            props.onCycleThroughAttachments(-1);
-        }
-        if (e.key === 'ArrowRight') {
-            props.onCycleThroughAttachments(1);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
-
-        return () => {
-            document.removeEventListener('keydown', handleKeyPress);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    return null;
-};
-
-Carousel.propTypes = propTypes;
-
-export default Carousel;