diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index d681f0f85e350a..a675dba2adc6f6 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/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 diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 759e1b47a43bb5..dac8e4c6eb1cae 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/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, { diff --git a/packages/block-editor/src/components/url-input/README.md b/packages/block-editor/src/components/url-input/README.md index d78a1cb09d56a8..fde7cbdb7862aa 100644 --- a/packages/block-editor/src/components/url-input/README.md +++ b/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` diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js index c90332f1ff1846..9381e335ffd1b4 100644 --- a/packages/block-editor/src/components/url-input/button.js +++ b/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 (
); + /* eslint-enable jsx-a11y/no-autofocus */ } } diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 7c2f403d28938e..3c6e047e775487 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/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;