feat: Added keyboard navigation to Compose Actions Menu

src/components/PopoverMenu/BasePopoverMenu.js

@@ -10,7 +10,10 @@ import {
     propTypes as createMenuPropTypes,
     defaultProps as defaultCreateMenuPropTypes,
 } from './popoverMenuPropTypes';
+import ArrowKeyFocusManager from '../ArrowKeyFocusManager';
 import Text from '../Text';
+import KeyboardShortcut from '../../libs/KeyboardShortcut';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Callback fired when the menu is completely closed */
@@ -26,13 +29,56 @@ const defaultProps = {
 };
 
 class BasePopoverMenu extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            focusedIndex: -1,
+        };
+        this.updateFocusedIndex = this.updateFocusedIndex.bind(this);
+    }
+
+    componentDidMount() {
+        if (!this.props.shouldEnableArrowKeysActions && !this.props.isVisible) {
+            return;
+        }
+
+        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ENTER;
+        this.unsubscribeEnterKey = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
+            if (this.state.focusedIndex === -1) {
+                return;
+            }
+            this.props.onItemSelected(this.props.menuItems[this.state.focusedIndex]);
+            this.updateFocusedIndex(-1); // Reset the focusedIndex on selecting any menu
+        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true);
+    }
+
+    componentWillUnmount() {
+        if (!this.unsubscribeEnterKey) {
+            return;
+        }
+        this.unsubscribeEnterKey();
+    }
+
+    /**
+     * @param {Number} index
+     */
+    updateFocusedIndex(index) {
+        if (!this.props.shouldEnableArrowKeysActions) {
+            return;
+        }
+        this.setState({focusedIndex: index});
+    }
+
     render() {
         return (
             <Popover
                 anchorPosition={this.props.anchorPosition}
                 onClose={this.props.onClose}
                 isVisible={this.props.isVisible}
-                onModalHide={this.props.onMenuHide}
+                onModalHide={() => {
+                    this.updateFocusedIndex(-1); // Reset the focusedIndex on modal hide
+                    this.props.onMenuHide();
+                }}
                 animationIn={this.props.animationIn}
                 animationOut={this.props.animationOut}
                 disableAnimation={this.props.disableAnimation}
@@ -48,17 +94,24 @@ class BasePopoverMenu extends PureComponent {
                             </Text>
                         </View>
                     )}
-                    {_.map(this.props.menuItems, item => (
-                        <MenuItem
-                            key={item.text}
-                            icon={item.icon}
-                            iconWidth={item.iconWidth}
-                            iconHeight={item.iconHeight}
-                            title={item.text}
-                            description={item.description}
-                            onPress={() => this.props.onItemSelected(item)}
-                        />
-                    ))}
+                    <ArrowKeyFocusManager
+                        focusedIndex={this.state.focusedIndex}
+                        maxIndex={this.props.menuItems.length - 1}
+                        onFocusedIndexChanged={this.updateFocusedIndex}
+                    >
+                        {_.map(this.props.menuItems, (item, menuIndex) => (
+                            <MenuItem
+                                key={item.text}
+                                icon={item.icon}
+                                iconWidth={item.iconWidth}
+                                iconHeight={item.iconHeight}
+                                title={item.text}
+                                description={item.description}
+                                onPress={() => this.props.onItemSelected(item)}
+                                focused={this.state.focusedIndex === menuIndex}
+                            />
+                        ))}
+                    </ArrowKeyFocusManager>
                 </View>
             </Popover>
         );

src/components/PopoverMenu/popoverMenuPropTypes.js

@@ -49,13 +49,17 @@ const propTypes = {
 
     /** Whether disable the animations */
     disableAnimation: PropTypes.bool,
+
+    /** Whether to allow arrow key actions on the list */
+    shouldEnableArrowKeysActions: PropTypes.bool,
 };
 
 const defaultProps = {
     animationIn: 'fadeIn',
     animationOut: 'fadeOut',
     headerText: undefined,
     disableAnimation: true,
+    shouldEnableArrowKeysActions: false,
 };
 
 export {propTypes, defaultProps};

src/pages/home/report/ReportActionCompose.js

@@ -573,6 +573,7 @@ class ReportActionCompose extends React.Component {
                                                 </Tooltip>
                                             </View>
                                             <PopoverMenu
+                                                shouldEnableArrowKeysActions
                                                 isVisible={this.state.isMenuVisible}
                                                 onClose={() => this.setMenuVisibility(false)}
                                                 onItemSelected={() => this.setMenuVisibility(false)}