From 52a24a4f0bcd6f7dc6e97b19565b85cf6943e8a1 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Sat, 20 Oct 2018 14:01:00 +0200 Subject: [PATCH 1/5] Fix link search field padding and spinner. --- packages/editor/src/components/url-input/style.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/components/url-input/style.scss b/packages/editor/src/components/url-input/style.scss index 3fe564178d683a..9d0363605ab90f 100644 --- a/packages/editor/src/components/url-input/style.scss +++ b/packages/editor/src/components/url-input/style.scss @@ -1,5 +1,5 @@ // Link input -$input-padding: 9px 8px; +$input-padding: 8px; $input-size: 300px; .editor-block-list__block .editor-url-input, @@ -28,8 +28,8 @@ $input-size: 300px; .components-spinner { position: absolute; - right: 0; - top: $input-padding; + right: $input-padding; + top: $input-padding + 1; margin: 0; } } @@ -41,6 +41,7 @@ $input-size: 300px; list-style: none; padding: 4px 0; width: $input-size + 2 * $icon-button-size; + overflow-y: auto; } // Hide suggestions on mobile until we @todo find a better way to show them @@ -53,7 +54,7 @@ $input-size: 300px; } .editor-url-input__suggestion { - padding: 4px #{ $icon-button-size + $input-padding } 4px $input-padding; + padding: 4px $input-padding; color: $dark-gray-300; // lightest we can use for contrast display: block; font-size: $default-font-size; From b3a5f1cea5187e5476ec08ff7dcb55bc768541f3 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Sat, 20 Oct 2018 16:31:57 +0200 Subject: [PATCH 2/5] Select the highlighted link when tabbing away, set focus when clicking, add speak message. --- .../editor/src/components/url-input/index.js | 21 +++++++++++++++---- packages/format-library/src/link/inline.js | 4 ++-- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/editor/src/components/url-input/index.js b/packages/editor/src/components/url-input/index.js index 23762991cddcff..d8102f9e1ed193 100644 --- a/packages/editor/src/components/url-input/index.js +++ b/packages/editor/src/components/url-input/index.js @@ -11,7 +11,7 @@ import scrollIntoView from 'dom-scroll-into-view'; import { __, sprintf, _n } from '@wordpress/i18n'; import { Component, Fragment, createRef } from '@wordpress/element'; import { decodeEntities } from '@wordpress/html-entities'; -import { UP, DOWN, ENTER } from '@wordpress/keycodes'; +import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes'; import { Spinner, withSpokenMessages, Popover } from '@wordpress/components'; import { withInstanceId } from '@wordpress/compose'; import apiFetch from '@wordpress/api-fetch'; @@ -29,6 +29,7 @@ class URLInput extends Component { this.onChange = this.onChange.bind( this ); this.onKeyDown = this.onKeyDown.bind( this ); this.autocompleteRef = autocompleteRef || createRef(); + this.inputRef = createRef(); this.updateSuggestions = throttle( this.updateSuggestions.bind( this ), 200 ); this.suggestionNodes = []; @@ -159,22 +160,33 @@ class URLInput extends Component { } ); break; } + case TAB: case ENTER: { if ( this.state.selectedSuggestion !== null ) { event.stopPropagation(); const post = this.state.posts[ this.state.selectedSuggestion ]; - this.selectLink( post ); + this.selectLink( post, event ); } + break; } } } - selectLink( post ) { + selectLink( post, event ) { this.props.onChange( post.url, post ); this.setState( { selectedSuggestion: null, showSuggestions: false, } ); + + // Announce a link has been selected when tabbing away from the input field. + if ( event.keyCode === TAB ) { + this.props.speak( __( 'Link selected' ) ); + return; + } + + // Move focus to the input field when a link suggestion is clicked. + this.inputRef.current.focus(); } render() { @@ -199,6 +211,7 @@ class URLInput extends Component { aria-autocomplete="list" aria-owns={ `editor-url-input-suggestions-${ instanceId }` } aria-activedescendant={ selectedSuggestion !== null ? `editor-url-input-suggestion-${ instanceId }-${ selectedSuggestion }` : undefined } + ref={ this.inputRef } /> { ( loading ) && } @@ -222,7 +235,7 @@ class URLInput extends Component { className={ classnames( 'editor-url-input__suggestion', { 'is-selected': index === selectedSuggestion, } ) } - onClick={ () => this.selectLink( post ) } + onClick={ ( event ) => this.selectLink( post, event ) } aria-selected={ index === selectedSuggestion } > { decodeEntities( post.title ) || __( '(no title)' ) } diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index 95fb1eb4045252..ef3ec4513adb53 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.js @@ -179,9 +179,9 @@ class InlineLinkUI extends Component { this.resetState(); if ( isActive ) { - speak( __( 'Link edited.' ), 'assertive' ); + speak( __( 'Link edited' ), 'assertive' ); } else { - speak( __( 'Link added.' ), 'assertive' ); + speak( __( 'Link inserted' ), 'assertive' ); } } From d09108ebf651e613f5375ceedd692060540ad06c Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Sat, 20 Oct 2018 18:18:43 +0200 Subject: [PATCH 3/5] Fix links suggestions popover position and size. --- .../editor/src/components/url-input/index.js | 16 +++++++++++++++- .../editor/src/components/url-input/style.scss | 5 ++--- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/components/url-input/index.js b/packages/editor/src/components/url-input/index.js index d8102f9e1ed193..bc1e735c3925c3 100644 --- a/packages/editor/src/components/url-input/index.js +++ b/packages/editor/src/components/url-input/index.js @@ -22,6 +22,15 @@ import { addQueryArgs } from '@wordpress/url'; // as being considered from the input. const stopEventPropagation = ( event ) => event.stopPropagation(); +function getAnchorRect( anchor ) { + /* + * The default getAnchorRect() gets the parent node to calculate the popover + * position. As the popover with the list of suggestions is now nested within + * another popover, we need to get the gran parent node. + */ + return anchor.parentNode.parentNode.getBoundingClientRect(); +} + class URLInput extends Component { constructor( { autocompleteRef } ) { super( ...arguments ); @@ -218,7 +227,12 @@ class URLInput extends Component { { showSuggestions && !! posts.length && - +
Date: Sun, 21 Oct 2018 19:01:05 +0200 Subject: [PATCH 4/5] Avoid events, they're bad. --- .../editor/src/components/url-input/index.js | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/editor/src/components/url-input/index.js b/packages/editor/src/components/url-input/index.js index bc1e735c3925c3..abb64e32f82116 100644 --- a/packages/editor/src/components/url-input/index.js +++ b/packages/editor/src/components/url-input/index.js @@ -150,6 +150,8 @@ class URLInput extends Component { return; } + const post = this.state.posts[ this.state.selectedSuggestion ]; + switch ( event.keyCode ) { case UP: { event.stopPropagation(); @@ -169,31 +171,34 @@ class URLInput extends Component { } ); break; } - case TAB: + case TAB: { + if ( this.state.selectedSuggestion !== null ) { + this.selectLink( post ); + // Announce a link has been selected when tabbing away from the input field. + this.props.speak( __( 'Link selected' ) ); + } + break; + } case ENTER: { if ( this.state.selectedSuggestion !== null ) { event.stopPropagation(); - const post = this.state.posts[ this.state.selectedSuggestion ]; - this.selectLink( post, event ); + this.selectLink( post ); } break; } } } - selectLink( post, event ) { + selectLink( post ) { this.props.onChange( post.url, post ); this.setState( { selectedSuggestion: null, showSuggestions: false, } ); + } - // Announce a link has been selected when tabbing away from the input field. - if ( event.keyCode === TAB ) { - this.props.speak( __( 'Link selected' ) ); - return; - } - + handleOnClick( post ) { + this.selectLink( post ); // Move focus to the input field when a link suggestion is clicked. this.inputRef.current.focus(); } @@ -249,7 +254,7 @@ class URLInput extends Component { className={ classnames( 'editor-url-input__suggestion', { 'is-selected': index === selectedSuggestion, } ) } - onClick={ ( event ) => this.selectLink( post, event ) } + onClick={ () => this.handleOnClick( post ) } aria-selected={ index === selectedSuggestion } > { decodeEntities( post.title ) || __( '(no title)' ) } From 6bd3ae2973449b6bf22f974d68916ba67b477d2e Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 22 Oct 2018 08:29:25 +0200 Subject: [PATCH 5/5] Revert custom getAnchorRect. --- .../editor/src/components/url-input/index.js | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/packages/editor/src/components/url-input/index.js b/packages/editor/src/components/url-input/index.js index abb64e32f82116..c841d1acf35991 100644 --- a/packages/editor/src/components/url-input/index.js +++ b/packages/editor/src/components/url-input/index.js @@ -22,15 +22,6 @@ import { addQueryArgs } from '@wordpress/url'; // as being considered from the input. const stopEventPropagation = ( event ) => event.stopPropagation(); -function getAnchorRect( anchor ) { - /* - * The default getAnchorRect() gets the parent node to calculate the popover - * position. As the popover with the list of suggestions is now nested within - * another popover, we need to get the gran parent node. - */ - return anchor.parentNode.parentNode.getBoundingClientRect(); -} - class URLInput extends Component { constructor( { autocompleteRef } ) { super( ...arguments ); @@ -232,12 +223,7 @@ class URLInput extends Component {
{ showSuggestions && !! posts.length && - +