Proof of Concept: Improve Block Toolbar Semantics/Accessibility

docs/reference-guides/data/data-core-block-editor.md

@@ -588,6 +588,18 @@ _Properties_
 -   _isDisabled_ `boolean`: Whether or not the user should be prevented from inserting this item.
 -   _frecency_ `number`: Heuristic that combines frequency and recency.
 
+### getLastFocus
+
+Returns the element of the last element that had focus when focus left the editor canvas.
+
+_Parameters_
+
+-   _state_ `Object`: Block editor state.
+
+_Returns_
+
+-   `Object`: Element.
+
 ### getLastMultiSelectedBlockClientId
 
 Returns the client ID of the last block in the multi-selection set, or null if there is no multi-selection.
@@ -1651,6 +1663,18 @@ _Parameters_
 -   _clientId_ `string`: The block's clientId.
 -   _hasControlledInnerBlocks_ `boolean`: True if the block's inner blocks are controlled.
 
+### setLastFocus
+
+Action that sets the element that had focus when focus leaves the editor canvas.
+
+_Parameters_
+
+-   _lastFocus_ `Object`: The last focused element.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### setNavigationMode
 
 Action that enables or disables the navigation mode.

packages/block-editor/src/components/block-controls/slot.js

@@ -42,7 +42,7 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 		return null;
 	}
 
-	const slot = <Slot { ...props } bubblesVirtually fillProps={ fillProps } />;
+	const slot = <Slot { ...props } fillProps={ fillProps } />;
 
 	if ( group === 'default' ) {
 		return slot;

packages/block-editor/src/components/block-tools/block-contextual-toolbar.js

@@ -7,12 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	useLayoutEffect,
-	useEffect,
-	useRef,
-	useState,
-} from '@wordpress/element';
+import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
@@ -31,7 +26,10 @@ import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
 import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 
-function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
+function UnforwardBlockContextualToolbar(
+	{ focusOnMount, isFixed, ...props },
+	ref
+) {
 	// When the toolbar is fixed it can be collapsed
 	const [ isCollapsed, setIsCollapsed ] = useState( false );
 	const toolbarButtonRef = useRef();
@@ -82,77 +80,79 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 		setIsCollapsed( false );
 	}, [ selectedBlockClientId ] );
 
-	const isLargerThanTabletViewport = useViewportMatch( 'large', '>=' );
-	const isFullscreen =
-		document.body.classList.contains( 'is-fullscreen-mode' );
-
-	useLayoutEffect( () => {
-		// don't do anything if not fixed toolbar
-		if ( ! isFixed || ! blockType ) {
-			return;
-		}
-
-		const blockToolbar = document.querySelector(
-			'.block-editor-block-contextual-toolbar'
-		);
-
-		if ( ! blockToolbar ) {
-			return;
-		}
-
-		if ( ! isLargerThanTabletViewport ) {
-			// set the width of the toolbar to auto
-			blockToolbar.style = {};
-			return;
-		}
-
-		if ( isCollapsed ) {
-			// set the width of the toolbar to auto
-			blockToolbar.style.width = 'auto';
-			return;
-		}
-
-		// get the width of the pinned items in the post editor
-		const pinnedItems = document.querySelector(
-			'.edit-post-header__settings'
-		);
-
-		// get the width of the left header in the site editor
-		const leftHeader = document.querySelector(
-			'.edit-site-header-edit-mode__end'
-		);
-
-		const computedToolbarStyle = window.getComputedStyle( blockToolbar );
-		const computedPinnedItemsStyle = pinnedItems
-			? window.getComputedStyle( pinnedItems )
-			: false;
-		const computedLeftHeaderStyle = leftHeader
-			? window.getComputedStyle( leftHeader )
-			: false;
-
-		const marginLeft = parseFloat( computedToolbarStyle.marginLeft );
-		const pinnedItemsWidth = computedPinnedItemsStyle
-			? parseFloat( computedPinnedItemsStyle.width )
-			: 0;
-		const leftHeaderWidth = computedLeftHeaderStyle
-			? parseFloat( computedLeftHeaderStyle.width )
-			: 0;
-
-		// set the new witdth of the toolbar
-		blockToolbar.style.width = `calc(100% - ${
-			leftHeaderWidth +
-			pinnedItemsWidth +
-			marginLeft +
-			( pinnedItems || leftHeader ? 2 : 0 ) + // Prevents button focus border from being cut off
-			( isFullscreen ? 0 : 160 ) // the width of the admin sidebar expanded
-		}px)`;
-	}, [
-		isFixed,
-		isLargerThanTabletViewport,
-		isCollapsed,
-		isFullscreen,
-		blockType,
-	] );
+	// TODO: Do we need all of this width calculation??
+
+	// const isLargerThanTabletViewport = useViewportMatch( 'large', '>=' );
+	// const isFullscreen =
+	// 	document.body.classList.contains( 'is-fullscreen-mode' );
+
+	// useLayoutEffect( () => {
+	// 	// don't do anything if not fixed toolbar
+	// 	if ( ! isFixed || ! blockType ) {
+	// 		return;
+	// 	}
+
+	// 	const blockToolbar = document.querySelector(
+	// 		'.block-editor-block-contextual-toolbar'
+	// 	);
+
+	// 	if ( ! blockToolbar ) {
+	// 		return;
+	// 	}
+
+	// 	if ( ! isLargerThanTabletViewport ) {
+	// 		// set the width of the toolbar to auto
+	// 		blockToolbar.style = {};
+	// 		return;
+	// 	}
+
+	// 	if ( isCollapsed ) {
+	// 		// set the width of the toolbar to auto
+	// 		blockToolbar.style.width = 'auto';
+	// 		return;
+	// 	}
+
+	// 	// get the width of the pinned items in the post editor
+	// 	const pinnedItems = document.querySelector(
+	// 		'.edit-post-header__settings'
+	// 	);
+
+	// 	// get the width of the left header in the site editor
+	// 	const leftHeader = document.querySelector(
+	// 		'.edit-site-header-edit-mode__end'
+	// 	);
+
+	// 	const computedToolbarStyle = window.getComputedStyle( blockToolbar );
+	// 	const computedPinnedItemsStyle = pinnedItems
+	// 		? window.getComputedStyle( pinnedItems )
+	// 		: false;
+	// 	const computedLeftHeaderStyle = leftHeader
+	// 		? window.getComputedStyle( leftHeader )
+	// 		: false;
+
+	// 	const marginLeft = parseFloat( computedToolbarStyle.marginLeft );
+	// 	const pinnedItemsWidth = computedPinnedItemsStyle
+	// 		? parseFloat( computedPinnedItemsStyle.width ) + 10 // 10 is the pinned items padding
+	// 		: 0;
+	// 	const leftHeaderWidth = computedLeftHeaderStyle
+	// 		? parseFloat( computedLeftHeaderStyle.width )
+	// 		: 0;
+
+	// 	// set the new witdth of the toolbar
+	//	blockToolbar.style.width = `calc(100% - ${
+	//		leftHeaderWidth +
+	//		pinnedItemsWidth +
+	// 		marginLeft +
+	// 		( pinnedItems || leftHeader ? 2 : 0 ) + // Prevents button focus border from being cut off
+	//		( isFullscreen ? 0 : 160 ) // the width of the admin sidebar expanded
+	//	}px)`;
+	// }, [
+	// 	isFixed,
+	// 	isLargerThanTabletViewport,
+	// 	isCollapsed,
+	// 	isFullscreen,
+	// 	blockType,
+	// ] );
 
 	const isToolbarEnabled =
 		! blockType ||
@@ -174,6 +174,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 
 	return (
 		<NavigableToolbar
+			ref={ ref }
 			focusOnMount={ focusOnMount }
 			className={ classes }
 			/* translators: accessibility text for the block toolbar */
@@ -209,4 +210,4 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	);
 }
 
-export default BlockContextualToolbar;
+export default forwardRef( UnforwardBlockContextualToolbar );