Fix template footer click to focus canvas

packages/base-styles/_mixins.scss

@@ -597,3 +597,17 @@
 		}
 	}
 }
+
+@mixin selected-block-outline() {
+	content: "";
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	outline-color: var(--wp-admin-theme-color);
+	outline-style: solid;
+	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+	outline-offset: calc((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+}

packages/block-editor/README.md

@@ -108,6 +108,7 @@ _Parameters_
 
 -   _props_ `Object`: Component props.
 -   _props.rootLabelText_ `string`: Translated label for the root element of the breadcrumb trail.
+-   _props.focusableWrapperRef_ `Object`: Ref of the element to focus when the breadcrumb is clicked.
 
 _Returns_
 

packages/block-editor/src/components/block-breadcrumb/index.js

@@ -16,11 +16,12 @@ import { unlock } from '../../lock-unlock';
 /**
  * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
  *
- * @param {Object} props               Component props.
- * @param {string} props.rootLabelText Translated label for the root element of the breadcrumb trail.
- * @return {Element}                   Block Breadcrumb.
+ * @param {Object} props                     Component props.
+ * @param {string} props.rootLabelText       Translated label for the root element of the breadcrumb trail.
+ * @param {Object} props.focusableWrapperRef Ref of the element to focus when the breadcrumb is clicked.
+ * @return {Element}                         Block Breadcrumb.
  */
-function BlockBreadcrumb( { rootLabelText } ) {
+function BlockBreadcrumb( { rootLabelText, focusableWrapperRef } ) {
 	const { selectBlock, clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { clientId, parents, hasSelection } = useSelect( ( select ) => {
 		const {
@@ -60,7 +61,12 @@ function BlockBreadcrumb( { rootLabelText } ) {
 					<Button
 						className="block-editor-block-breadcrumb__button"
 						variant="tertiary"
-						onClick={ clearSelectedBlock }
+						onClick={ () => {
+							clearSelectedBlock();
+
+							// Focus the editor iframe.
+							focusableWrapperRef.current?.focus();
+						} }
 					>
 						{ rootLabel }
 					</Button>

packages/block-editor/src/components/block-canvas/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useMergeRefs } from '@wordpress/compose';
-import { useRef } from '@wordpress/element';
+import { useRef, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,13 +16,27 @@ import { useMouseMoveTypingReset } from '../observe-typing';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useBlockCommands } from '../use-block-commands';
 
+const FocusableWrapper = forwardRef( ( { children }, ref ) => {
+	return (
+		<div
+			className="block-editor-accessible-wrapper"
+			tabIndex="-1"
+			aria-label="Block canvas"
+			ref={ ref }
+		>
+			{ children }
+		</div>
+	);
+} );
+
 export function ExperimentalBlockCanvas( {
 	shouldIframe = true,
 	height = '300px',
 	children = <BlockList />,
 	styles,
 	contentRef: contentRefProp,
 	iframeProps,
+	focusableWrapperRef,
 } ) {
 	useBlockCommands();
 	const resetTypingRef = useMouseMoveTypingReset();
@@ -49,7 +63,9 @@ export function ExperimentalBlockCanvas( {
 						width: '100%',
 					} }
 				>
-					{ children }
+					<FocusableWrapper ref={ focusableWrapperRef }>
+						{ children }
+					</FocusableWrapper>
 				</WritingFlow>
 			</BlockTools>
 		);
@@ -70,7 +86,9 @@ export function ExperimentalBlockCanvas( {
 				name="editor-canvas"
 			>
 				<EditorStyles styles={ styles } />
-				{ children }
+				<FocusableWrapper ref={ focusableWrapperRef }>
+					{ children }
+				</FocusableWrapper>
 			</Iframe>
 		</BlockTools>
 	);

packages/block-editor/src/components/block-list/content.scss

@@ -17,20 +17,6 @@
 	}
 }
 
-@mixin selectedOutline() {
-	content: "";
-	position: absolute;
-	pointer-events: none;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	outline-color: var(--wp-admin-theme-color);
-	outline-style: solid;
-	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-	outline-offset: calc((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-}
-
 // Hide selections on this element, otherwise Safari will include it stacked
 // under your actual selection.
 // This uses a CSS hack to show the rules to Safari only. Failing here is okay,
@@ -101,7 +87,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		// We're using a pseudo element to overflow placeholder borders
 		// and any border inside the block itself.
 		&::after {
-			@include selectedOutline();
+			@include selected-block-outline();
 			z-index: 1;
 
 			// Show a light color for dark themes.
@@ -281,7 +267,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	&:not(.rich-text):not([contenteditable="true"]).is-selected {
 
 		&::after {
-			@include selectedOutline();
+			@include selected-block-outline();
 		}
 	}
 }

packages/block-editor/src/components/iframe/content.scss

@@ -65,3 +65,13 @@
 		}
 	}
 }
+
+.block-editor-accessible-wrapper:focus-visible {
+	outline: none;
+
+	&::after {
+		content: "";
+		@include selected-block-outline();
+		position: fixed;
+	}
+}

packages/editor/src/components/editor-interface/index.js

@@ -17,7 +17,7 @@ import {
 } from '@wordpress/block-editor';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useViewportMatch } from '@wordpress/compose';
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -116,6 +116,7 @@ export default function EditorInterface( {
 		},
 		[ entitiesSavedStatesCallback ]
 	);
+	const focusableWrapperRef = useRef();
 
 	return (
 		<InterfaceSkeleton
@@ -191,6 +192,9 @@ export default function EditorInterface( {
 											// eslint-disable-next-line jsx-a11y/no-autofocus
 											autoFocus={ autoFocus }
 											iframeProps={ iframeProps }
+											focusableWrapperRef={
+												focusableWrapperRef
+											}
 										/>
 									) }
 									{ children }
@@ -208,7 +212,10 @@ export default function EditorInterface( {
 				isRichEditingEnabled &&
 				blockEditorMode !== 'zoom-out' &&
 				mode === 'visual' && (
-					<BlockBreadcrumb rootLabelText={ documentLabel } />
+					<BlockBreadcrumb
+						rootLabelText={ documentLabel }
+						focusableWrapperRef={ focusableWrapperRef }
+					/>
 				)
 			}
 			actions={

packages/editor/src/components/visual-editor/index.js

@@ -104,6 +104,7 @@ function VisualEditor( {
 	iframeProps,
 	contentRef,
 	className,
+	focusableWrapperRef,
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const isMobileViewport = useViewportMatch( 'small', '<' );
@@ -407,6 +408,7 @@ function VisualEditor( {
 							...deviceStyles,
 						},
 					} }
+					focusableWrapperRef={ focusableWrapperRef }
 				>
 					{ themeSupportsLayout &&
 						! themeHasDisabledLayoutStyles &&