Block Editor: Change default URLInput autoFocus to false

packages/block-editor/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Master
 
+### Breaking Changes
+
+- The default `URLInput` `autoFocus` prop value has changed from `true` to `false`. If you relied on the auto-focus behavior of the input, you must explicitly assign an `autoFocus={ true }` prop. Note that (in accordance with the purpose of this change) it is usually inadvisable to auto-focus an input. Refer to the [component README](https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/url-input/README.md) for more information.
+
 ## 3.7.0 (2020-02-10)
 
 ### New Features

packages/block-editor/src/components/link-control/test/index.js

@@ -1211,6 +1211,11 @@ describe( 'Selecting links', () => {
 				const searchInput = getURLInput();
 				const form = container.querySelector( 'form' );
 
+				// Focus the input via DOM. The simulated events below don't operate
+				// on the DOM, but for LinkControl's focus preservation to work (and
+				// to verify it below), focus must be set in the real DOM.
+				searchInput.focus();
+
 				// Simulate searching for a term
 				act( () => {
 					Simulate.change( searchInput, {

packages/block-editor/src/components/url-input/README.md

@@ -131,9 +131,11 @@ Renders the URL input field used by the `URLInputButton` component. It can be us
 
 ### `autoFocus: Boolean`
 
-*Optional.* By default, the input will gain focus when it is rendered, as typically it is displayed conditionally. For example when clicking on `URLInputButton` or editing a block.
+*Optional.* Whether the input should receive focus as soon as it is rendered. Defaults to `false`.
 
-If you are not conditionally rendering this component set this property to `false`.
+Note that it is usually inadvisable to use `autoFocus`, since it can be a disorienting experience for keyboard usage and for users of assistive technology. It should typically only be used when the input is displayed temporarily and it is the intended user experience that the input should be focused immediately upon being shown (e.g. showing the input only after activating a toggle button).
+
+If you are using `URLInput` in the context of a dialog, you should consider instead to use the `focusOnMount` prop of the [`Popover`](https://github.com/WordPress/gutenberg/blob/master/packages/components/src/popover/README.md#focusonmount) or [`Modal`](https://github.com/WordPress/gutenberg/blob/master/packages/components/src/modal/README.md#focusonmount) components instead, as they achieve the same effective behavior.
 
 ### `className: String`
 

packages/block-editor/src/components/url-input/button.js

@@ -35,6 +35,11 @@ class URLInputButton extends Component {
 		const { expanded } = this.state;
 		const buttonLabel = url ? __( 'Edit link' ) : __( 'Insert link' );
 
+		// Disable reason: The rendered URLInput is toggled in response to a
+		// click on the button, and it is expected that toggling it to be
+		// visible should shift focus from the button into the input.
+
+		/* eslint-disable jsx-a11y/no-autofocus */
 		return (
 			<div className="block-editor-url-input__button">
 				<Button
@@ -57,6 +62,7 @@ class URLInputButton extends Component {
 								onClick={ this.toggle }
 							/>
 							<URLInput
+								autoFocus
 								value={ url || '' }
 								onChange={ onChange }
 							/>
@@ -70,6 +76,7 @@ class URLInputButton extends Component {
 				) }
 			</div>
 		);
+		/* eslint-enable jsx-a11y/no-autofocus */
 	}
 }
 

packages/block-editor/src/components/url-input/index.js

@@ -383,7 +383,7 @@ class URLInput extends Component {
 			__experimentalRenderSuggestions: renderSuggestions,
 			placeholder = __( 'Paste URL or type to search' ),
 			value = '',
-			autoFocus = true,
+			autoFocus = false,
 			__experimentalShowInitialSuggestions = false,
 		} = this.props;