Make accessible toolbar stable and deprecate old usage

packages/block-editor/src/components/navigable-toolbar/index.js

@@ -9,6 +9,7 @@ import {
 	useEffect,
 	useCallback,
 } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 import { focus } from '@wordpress/dom';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 
@@ -43,7 +44,13 @@ function useIsAccessibleToolbar( ref ) {
 
 	const determineIsAccessibleToolbar = useCallback( () => {
 		const tabbables = focus.tabbable.find( ref.current );
-		setIsAccessibleToolbar( hasOnlyToolbarItem( tabbables ) );
+		const onlyToolbarItem = hasOnlyToolbarItem( tabbables );
+		if ( ! onlyToolbarItem ) {
+			deprecated( 'Using custom components as toolbar controls', {
+				alternative: 'ToolbarItem or ToolbarButton components',
+			} );
+		}
+		setIsAccessibleToolbar( onlyToolbarItem );
 	}, [] );
 
 	useLayoutEffect( determineIsAccessibleToolbar, [] );
@@ -90,7 +97,7 @@ function NavigableToolbar( { children, focusOnMount, ...props } ) {
 	if ( isAccessibleToolbar ) {
 		return (
 			<Toolbar
-				__experimentalAccessibilityLabel={ props[ 'aria-label' ] }
+				accessibilityLabel={ props[ 'aria-label' ] }
 				ref={ wrapper }
 				{ ...props }
 			>

packages/block-library/src/heading/heading-level-dropdown.js

@@ -69,9 +69,7 @@ export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
 			renderContent={ () => (
 				<Toolbar
 					className="block-library-heading-level-toolbar"
-					__experimentalAccessibilityLabel={ __(
-						'Change heading level'
-					) }
+					accessibilityLabel={ __( 'Change heading level' ) }
 				>
 					<ToolbarGroup
 						isCollapsed={ false }

packages/components/src/toolbar-button/index.js

@@ -30,7 +30,8 @@ function ToolbarButton(
 	const accessibleToolbarState = useContext( ToolbarContext );
 
 	if ( ! accessibleToolbarState ) {
-		// This should be deprecated when <Toolbar __experimentalAccessibilityLabel="label">
+		// TODO
+		// This should be deprecated when <Toolbar accessibilityLabel="label">
 		// becomes stable.
 		return (
 			<ToolbarButtonContainer className={ containerClassName }>

packages/components/src/toolbar-button/stories/index.js

@@ -16,7 +16,7 @@ export const _default = () => {
 	const icon = text( 'Icon', 'wordpress' );
 
 	return (
-		<Toolbar __experimentalAccessibilityLabel="Example Toolbar">
+		<Toolbar accessibilityLabel="Example Toolbar">
 			<ToolbarButton icon={ icon } label={ label } />
 		</Toolbar>
 	);

packages/components/src/toolbar-group/toolbar-group-collapsed.js

@@ -12,7 +12,7 @@ import ToolbarItem from '../toolbar-item';
 
 function ToolbarGroupCollapsed( { controls = [], ...props } ) {
 	// It'll contain state if `ToolbarGroup` is being used within
-	// `<Toolbar __experimentalAccessibilityLabel="label" />`
+	// `<Toolbar accessibilityLabel="label" />`
 	const accessibleToolbarState = useContext( ToolbarContext );
 
 	const renderDropdownMenu = ( toggleProps ) => (

packages/components/src/toolbar/index.js

@@ -21,30 +21,27 @@ import ToolbarContainer from './toolbar-container';
  *
  * @param {Object} props                                    Component props.
  * @param {string} [props.className]                        Class to set on the container div.
- * @param {string} [props.__experimentalAccessibilityLabel] ARIA label for toolbar container.
+ * @param {string} [props.accessibilityLabel] ARIA label for toolbar container.
  * @param {Object} ref                                      React Element ref.
  */
-function Toolbar(
-	{ className, __experimentalAccessibilityLabel, ...props },
-	ref
-) {
-	if ( __experimentalAccessibilityLabel ) {
+function Toolbar( { className, accessibilityLabel, ...props }, ref ) {
+	if ( accessibilityLabel ) {
 		return (
 			<ToolbarContainer
 				// `ToolbarGroup` already uses components-toolbar for compatibility reasons
 				className={ classnames(
 					'components-accessible-toolbar',
 					className
 				) }
-				accessibilityLabel={ __experimentalAccessibilityLabel }
+				accessibilityLabel={ accessibilityLabel }
 				ref={ ref }
 				{ ...props }
 			/>
 		);
 	}
-	// When the __experimentalAccessibilityLabel prop is not passed, Toolbar will
-	// fallback to ToolbarGroup. This should be deprecated as soon as the new API
-	// gets stable.
+	// TODO
+	// When the accessibilityLabel prop is not passed, Toolbar will fallback to
+	// ToolbarGroup. This should be deprecated as soon as the new API gets stable.
 	// See https://github.com/WordPress/gutenberg/pull/20008#issuecomment-624503410
 	return <ToolbarGroup { ...props } className={ className } />;
 }

packages/components/src/toolbar/stories/index.js

@@ -41,10 +41,7 @@ function InlineImageIcon() {
 export const _default = () => {
 	return (
 		// id is required for server side rendering
-		<Toolbar
-			__experimentalAccessibilityLabel="Options"
-			id="options-toolbar"
-		>
+		<Toolbar accessibilityLabel="Options" id="options-toolbar">
 			<ToolbarGroup>
 				<ToolbarButton icon={ paragraph } label="Paragraph" />
 			</ToolbarGroup>
@@ -116,7 +113,7 @@ export const withoutGroup = () => {
 	return (
 		// id is required for server side rendering
 		<Toolbar
-			__experimentalAccessibilityLabel="Options"
+			accessibilityLabel="Options"
 			id="options-toolbar-without-group"
 		>
 			<ToolbarButton icon={ formatBold } label="Bold" isPressed />

packages/components/src/toolbar/test/index.js

@@ -13,7 +13,7 @@ describe( 'Toolbar', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render a toolbar with toolbar buttons', () => {
 			const { getByLabelText } = render(
-				<Toolbar __experimentalAccessibilityLabel="blocks">
+				<Toolbar accessibilityLabel="blocks">
 					<ToolbarButton label="control1" />
 					<ToolbarButton label="control2" />
 				</Toolbar>

packages/e2e-tests/specs/editor/various/is-typing.test.js

@@ -43,7 +43,7 @@ describe( 'isTyping', () => {
 	it( 'should not close the dropdown when typing in it', async () => {
 		// Adds a Dropdown with an input to all blocks
 		await page.evaluate( () => {
-			const { Dropdown, Button, Fill } = wp.components;
+			const { Dropdown, ToolbarButton, Fill } = wp.components;
 			const { createElement: el, Fragment } = wp.element;
 			function AddDropdown( BlockListBlock ) {
 				return ( props ) => {
@@ -56,7 +56,7 @@ describe( 'isTyping', () => {
 							el( Dropdown, {
 								renderToggle: ( { onToggle } ) =>
 									el(
-										Button,
+										ToolbarButton,
 										{
 											onClick: onToggle,
 											className: 'dropdown-open',