Accessibility: Move focus back to the modal dialog to More Menu when …

…it was used to get there
WordPress · Sep 4, 2019 · 7bdecb5 · 7bdecb5
1 parent 0e55ef6
commit 7bdecb5
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 17 deletions.
diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js
@@ -49,10 +49,14 @@ class Dropdown extends Component {
 	 * Closes the dropdown if a focus leaves the dropdown wrapper. This is
 	 * intentionally distinct from `onClose` since focus loss from the popover
 	 * is expected to occur when using the Dropdown's toggle button, in which
-	 * case the correct behavior is to keep the dropdown closed.
+	 * case the correct behavior is to keep the dropdown closed. The same applies
+	 * in case when focus is moved to the modal dialog.
 	 */
 	closeIfFocusOutside() {
-		if ( ! this.containerRef.current.contains( document.activeElement ) ) {
+		if (
+			! this.containerRef.current.contains( document.activeElement ) &&
+			! document.activeElement.closest( '[role="dialog"]' )
+		) {
 			this.close();
 		}
 	}

diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
@@ -36,7 +36,7 @@ const MoreMenu = () => (
 				<PluginMoreMenuGroup.Slot fillProps={ { onClose } } />
 				<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
 				<MenuGroup>
-					<OptionsMenuItem onSelect={ onClose } />
+					<OptionsMenuItem />
 				</MenuGroup>
 			</>
 		) }

diff --git a/packages/edit-post/src/components/header/options-menu-item/index.js b/packages/edit-post/src/components/header/options-menu-item/index.js
@@ -5,11 +5,10 @@ import { withDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
 
-export function OptionsMenuItem( { openModal, onSelect } ) {
+export function OptionsMenuItem( { openModal } ) {
 	return (
 		<MenuItem
 			onClick={ () => {
-				onSelect();
 				openModal( 'edit-post/options' );
 			} }
 		>

diff --git a/packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js b/packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js
@@ -6,11 +6,10 @@ import { withDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { displayShortcut } from '@wordpress/keycodes';
 
-export function KeyboardShortcutsHelpMenuItem( { openModal, onSelect } ) {
+export function KeyboardShortcutsHelpMenuItem( { openModal } ) {
 	return (
 		<MenuItem
 			onClick={ () => {
-				onSelect();
 				openModal( 'edit-post/keyboard-shortcut-help' );
 			} }
 			shortcut={ displayShortcut.access( 'h' ) }

diff --git a/packages/edit-post/src/plugins/manage-blocks-menu-item/index.js b/packages/edit-post/src/plugins/manage-blocks-menu-item/index.js
@@ -1,22 +1,16 @@
-/**
- * External dependencies
- */
-import { flow } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { MenuItem } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
-export function ManageBlocksMenuItem( { onSelect, openModal } ) {
+export function ManageBlocksMenuItem( { openModal } ) {
 	return (
 		<MenuItem
-			onClick={ flow( [
-				onSelect,
-				() => openModal( 'edit-post/manage-blocks' ),
-			] ) }
+			onClick={ () => {
+				openModal( 'edit-post/manage-blocks' );
+			} }
 		>
 			{ __( 'Block Manager' ) }
 		</MenuItem>