Try/2031 manual focus

blocks/api/registration.js

@@ -92,7 +92,7 @@ export function registerBlockType( name, settings ) {
 		);
 		return;
 	}
-	const block = Object.assign( { name }, settings );
+	const block = { name, ...settings };
 	blocks[ name ] = block;
 	return block;
 }

blocks/library/code/index.js

@@ -49,12 +49,13 @@ registerBlockType( 'core/code', {
 		],
 	},
 
-	edit( { attributes, setAttributes, className } ) {
+	edit( { attributes, setAttributes, className, setFocus } ) {
 		return (
 			<TextareaAutosize
 				className={ className }
 				value={ attributes.content }
 				onChange={ ( event ) => setAttributes( { content: event.target.value } ) }
+				onFocus={ ( ) => setFocus() }
 				placeholder={ __( 'Write code…' ) }
 			/>
 		);

blocks/library/gallery/index.js

@@ -101,6 +101,7 @@ registerBlockType( 'core/gallery', {
 									buttonProps={ {
 										className: 'components-icon-button components-toolbar__control',
 										'aria-label': __( 'Edit Gallery' ),
+										tabIndex: -1,
 									} }
 									onSelect={ onSelectImages }
 									type="image"

blocks/library/image/block.js

@@ -116,6 +116,7 @@ class ImageBlock extends Component {
 								buttonProps={ {
 									className: 'components-icon-button components-toolbar__control',
 									'aria-label': __( 'Edit image' ),
+									tabIndex: '-1',
 								} }
 								onSelect={ this.onSelectImage }
 								type="image"
@@ -124,7 +125,7 @@ class ImageBlock extends Component {
 								<Dashicon icon="edit" />
 							</MediaUploadButton>
 						</li>
-						<UrlInputButton onChange={ this.onSetHref } url={ href } />
+						<UrlInputButton onChange={ this.onSetHref } url={ href } tabIndex="-1" />
 					</Toolbar>
 				</BlockControls>
 			)

blocks/library/table/table-block.js

@@ -122,6 +122,7 @@ export default class TableBlock extends Component {
 										...control,
 										onClick: () => control.onClick( this.state.editor ),
 									} ) ) }
+								tabIndex="-1"
 							/>
 						</li>
 					</Toolbar>

blocks/url-input/button.js

@@ -36,7 +36,7 @@ class UrlInputButton extends Component {
 	}
 
 	render() {
-		const { url, onChange } = this.props;
+		const { url, onChange, tabIndex } = this.props;
 		const { expanded } = this.state;
 
 		return (
@@ -48,6 +48,7 @@ class UrlInputButton extends Component {
 					className={ classnames( 'components-toolbar__control', {
 						'is-active': url,
 					} ) }
+					tabIndex={ tabIndex }
 				/>
 				{ expanded &&
 					<form

components/dropdown-menu/index.js

@@ -60,6 +60,7 @@ export class DropdownMenu extends Component {
 	closeMenu() {
 		this.setState( {
 			open: false,
+			activeIndex: null,
 		} );
 	}
 
@@ -83,10 +84,11 @@ export class DropdownMenu extends Component {
 
 	toggleMenu() {
 		const open = ! this.state.open;
+		const activeIndex = open ? 0 : null;
 		if ( open ) {
 			this.calculateMenuPosition();
 		}
-		this.setState( { open } );
+		this.setState( { open, activeIndex } );
 	}
 
 	focusIndex( activeIndex ) {
@@ -137,8 +139,13 @@ export class DropdownMenu extends Component {
 		if ( this.state.open ) {
 			switch ( keydown.keyCode ) {
 				case TAB:
+					keydown.preventDefault();
 					keydown.stopPropagation();
-					this.closeMenu();
+					if ( keydown.shiftKey ) {
+						this.focusPrevious();
+					} else {
+						this.focusNext();
+					}
 					break;
 
 				case LEFT:
@@ -173,12 +180,7 @@ export class DropdownMenu extends Component {
 	}
 
 	componentDidUpdate( prevProps, prevState ) {
-		const { open, activeIndex } = this.state;
-
-		// Focus the first item when the menu opens.
-		if ( ! prevState.open && open ) {
-			this.focusIndex( 0 );
-		}
+		const { activeIndex } = this.state;
 
 		// Change focus to active index
 		const { menu } = this.nodes;
@@ -195,6 +197,7 @@ export class DropdownMenu extends Component {
 			label,
 			menuLabel,
 			controls,
+			tabIndex,
 		} = this.props;
 		const {
 			open,
@@ -231,6 +234,7 @@ export class DropdownMenu extends Component {
 					aria-haspopup="true"
 					aria-expanded={ open }
 					label={ label }
+					tabIndex={ tabIndex }
 					ref={ this.bindReferenceNode( 'toggle' ) }
 				>
 					<Dashicon icon="arrow-down" />

components/dropdown-menu/test/index.js

@@ -131,11 +131,12 @@ describe( 'DropdownMenu', () => {
 
 			assertKeyDown( RIGHT, 1 );
 			assertKeyDown( DOWN, 2 );
-			assertKeyDown( DOWN, 3 );
+			assertKeyDown( TAB, 3 );
 			assertKeyDown( DOWN, 0 ); // Reset to beginning
 			assertKeyDown( DOWN, 1 );
 			assertKeyDown( LEFT, 0 );
 			assertKeyDown( UP, 3 ); // Reset to end
+			assertKeyDown( TAB, 0 );
 		} );
 
 		it( 'should close menu on escape', () => {
@@ -166,21 +167,5 @@ describe( 'DropdownMenu', () => {
 
 			expect( wrapper.state( 'open' ) ).toBe( false );
 		} );
-
-		it( 'should close menu on tab', () => {
-			const wrapper = shallow( <DropdownMenu controls={ controls } /> );
-
-			// Open menu
-			wrapper.find( '> IconButton' ).simulate( 'click' );
-
-			// Close menu by tab
-			wrapper.simulate( 'keydown', {
-				stopPropagation: () => {},
-				preventDefault: () => {},
-				keyCode: TAB,
-			} );
-
-			expect( wrapper.state( 'open' ) ).toBe( false );
-		} );
 	} );
 } );

components/toolbar/index.js

@@ -33,6 +33,7 @@ function Toolbar( { controls = [], children, className } ) {
 						className={ setIndex > 0 && controlIndex === 0 ? 'has-left-divider' : null }
 					>
 						<IconButton
+							tabIndex="-1"
 							icon={ control.icon }
 							label={ control.title }
 							data-subscript={ control.subscript }

editor/block-mover/index.js

@@ -39,6 +39,7 @@ function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, blockType, f
 					-1,
 				) }
 				aria-disabled={ isFirst }
+				tabIndex="-1"
 			/>
 			<IconButton
 				className="editor-block-mover__control"
@@ -54,6 +55,7 @@ function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, blockType, f
 					1,
 				) }
 				aria-disabled={ isLast }
+				tabIndex="-1"
 			/>
 		</div>
 	);

editor/block-settings-menu/index.js

@@ -32,12 +32,14 @@ function BlockSettingsMenu( { onDelete, onSelect, isSidebarOpened, toggleSidebar
 				onClick={ toggleInspector }
 				icon="admin-generic"
 				label={ __( 'Show inspector' ) }
+				tabIndex="-1"
 			/>
 			<IconButton
 				className="editor-block-settings-menu__control"
 				onClick={ onDelete }
 				icon="trash"
 				label={ __( 'Delete the block' ) }
+				tabIndex="-1"
 			/>
 		</div>
 	);

editor/block-switcher/index.js

@@ -3,14 +3,13 @@
  */
 import { connect } from 'react-redux';
 import { uniq, get, reduce, find } from 'lodash';
-import clickOutside from 'react-click-outside';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Dashicon, IconButton } from '@wordpress/components';
+import { Toolbar, DropdownMenu } from '@wordpress/components';
 import { getBlockType, getBlockTypes, switchToBlockType } from '@wordpress/blocks';
 
 /**
@@ -21,33 +20,9 @@ import { replaceBlocks } from '../actions';
 import { getBlock } from '../selectors';
 
 class BlockSwitcher extends Component {
-	constructor() {
-		super( ...arguments );
-		this.toggleMenu = this.toggleMenu.bind( this );
-		this.state = {
-			open: false,
-		};
-	}
-
-	handleClickOutside() {
-		if ( ! this.state.open ) {
-			return;
-		}
-
-		this.toggleMenu();
-	}
-
-	toggleMenu() {
-		this.setState( ( state ) => ( {
-			open: ! state.open,
-		} ) );
-	}
 
 	switchBlockType( name ) {
 		return () => {
-			this.setState( {
-				open: false,
-			} );
 			this.props.onTransform( this.props.block, name );
 		};
 	}
@@ -72,38 +47,21 @@ class BlockSwitcher extends Component {
 		}
 
 		return (
-			<div className="editor-block-switcher">
-				<IconButton
-					className="editor-block-switcher__toggle"
-					icon={ blockType.icon }
-					onClick={ this.toggleMenu }
-					aria-haspopup="true"
-					aria-expanded={ this.state.open }
-					label={ __( 'Change block type' ) }
-				>
-					<Dashicon icon="arrow-down" />
-				</IconButton>
-				{ this.state.open &&
-					<div
-						className="editor-block-switcher__menu"
-						role="menu"
-						tabIndex="0"
-						aria-label={ __( 'Block types' ) }
-					>
-						{ allowedBlocks.map( ( { name, title, icon } ) => (
-							<IconButton
-								key={ name }
-								onClick={ this.switchBlockType( name ) }
-								className="editor-block-switcher__menu-item"
-								icon={ icon }
-								role="menuitem"
-							>
-								{ title }
-							</IconButton>
-						) ) }
-					</div>
-				}
-			</div>
+			<Toolbar>
+				<li>
+					<DropdownMenu
+						icon={ blockType.icon }
+						label={ __( 'Change block type' ) }
+						controls={
+						allowedBlocks.map( ( { name, title, icon } ) => ( {
+							icon,
+							title,
+							onClick: this.switchBlockType( name ),
+						} ) )	}
+						tabIndex="-1"
+					/>
+				</li>
+			</Toolbar>
 		);
 	}
 }
@@ -120,4 +78,4 @@ export default connect(
 			) );
 		},
 	} )
-)( clickOutside( BlockSwitcher ) );
+)( BlockSwitcher );