diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index f0b9b7448e3f..c4e9587bb667 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -34,6 +34,9 @@ const propTypes = { }), withoutOverlay: PropTypes.bool, + + /** Should we announce the Modal visibility changes? */ + shouldSetModalVisibility: PropTypes.bool, }; const defaultProps = { @@ -44,6 +47,7 @@ const defaultProps = { }, anchorRef: () => {}, withoutOverlay: false, + shouldSetModalVisibility: true, }; function PopoverMenu(props) { @@ -89,6 +93,7 @@ function PopoverMenu(props) { disableAnimation={props.disableAnimation} fromSidebarMediumScreen={props.fromSidebarMediumScreen} withoutOverlay={props.withoutOverlay} + shouldSetModalVisibility={props.shouldSetModalVisibility} > {!_.isEmpty(props.headerText) && {props.headerText}} diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js index f0cee6fdea2f..c07a3fc8ee44 100644 --- a/src/components/ThreeDotsMenu/index.js +++ b/src/components/ThreeDotsMenu/index.js @@ -11,6 +11,7 @@ import * as Expensicons from '../Icon/Expensicons'; import ThreeDotsMenuItemPropTypes from './ThreeDotsMenuItemPropTypes'; import CONST from '../../CONST'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; +import * as Browser from '../../libs/Browser'; const propTypes = { /** Tooltip for the popup icon */ @@ -48,6 +49,9 @@ const propTypes = { /** Whether the popover menu should overlay the current view */ shouldOverlay: PropTypes.bool, + + /** Should we announce the Modal visibility changes? */ + shouldSetModalVisibility: PropTypes.bool, }; const defaultProps = { @@ -61,9 +65,10 @@ const defaultProps = { vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP }, shouldOverlay: false, + shouldSetModalVisibility: true, }; -function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, shouldOverlay}) { +function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, shouldOverlay, shouldSetModalVisibility}) { const [isPopupMenuVisible, setPopupMenuVisible] = useState(false); const buttonRef = useRef(null); const {translate} = useLocalize(); @@ -91,6 +96,13 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me onIconPress(); } }} + onMouseDown={(e) => { + /* Keep the focus state on mWeb like we did on the native apps. */ + if (!Browser.isMobile()) { + return; + } + e.preventDefault(); + }} ref={buttonRef} style={[styles.touchableButtonImage, ...iconStyles]} accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} @@ -111,6 +123,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me onItemSelected={hidePopoverMenu} menuItems={menuItems} withoutOverlay={!shouldOverlay} + shouldSetModalVisibility={shouldSetModalVisibility} anchorRef={buttonRef} /> diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js index f052116697b3..d89c9bc7a953 100755 --- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js +++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js @@ -118,7 +118,6 @@ function BaseVideoChatButtonAndMenu(props) { left: videoChatIconPosition.x - 150, top: videoChatIconPosition.y + 40, }} - shouldSetModalVisibility={false} withoutOverlay anchorRef={videoChatButtonRef} > diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 5e68e852c60b..8ddbf066a774 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -255,6 +255,7 @@ function HeaderView(props) { )}