Inserter: Allow focus to move to the toggle when opening the inserter…

…, so that the browser can correctly handle focus-visible on the tabs (#62513)

packages/editor/src/components/document-tools/index.js

@@ -28,10 +28,6 @@ import { store as editorStore } from '../../store';
 import EditorHistoryRedo from '../editor-history/redo';
 import EditorHistoryUndo from '../editor-history/undo';
 
-const preventDefault = ( event ) => {
-	event.preventDefault();
-};
-
 function DocumentTools( { className, disableBlockTools = false } ) {
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
@@ -72,6 +68,19 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 		};
 	}, [] );
 
+	const preventDefault = ( event ) => {
+		// Because the inserter behaves like a dialog,
+		// if the inserter is opened already then when we click on the toggle button
+		// then the initial click event will close the inserter and then be propagated
+		// to the inserter toggle and it will open it again.
+		// To prevent this we need to stop the propagation of the event.
+		// This won't be necessary when the inserter no longer behaves like a dialog.
+
+		if ( isInserterOpened ) {
+			event.preventDefault();
+		}
+	};
+
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );