Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Insert link accessibility #1575

Closed
wants to merge 13 commits into from
Closed

Insert link accessibility #1575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
cc23407
694 - Add visually hidden screen reader labels to the link form input
mehigh Jun 29, 2017
3768ec4
694 - Added aria-label to all link-related buttons (submit / edit / u…
mehigh Jun 29, 2017
2a995c0
694 - Applied suggestions for aria-label wordings.
mehigh Jun 29, 2017
f969bc7
694 - Added translatable strings for the "URL" in the screen reader l…
mehigh Jun 29, 2017
5ec1744
Merge remote-tracking branch 'WordPress/master' into feature/694
mehigh Jun 29, 2017
e4ada8e
Merge remote-tracking branch 'WordPress/master' into feature/694
mehigh Jul 1, 2017
7aef002
Adding withInstanceId - Fails to work
mehigh Jul 1, 2017
e793377
Updated the usage of InstanceId according to suggestions
mehigh Jul 1, 2017
a7322b1
Merge pull request #1 from xwp/feature/694-instanceId
mehigh Jul 1, 2017
a44fc71
Merge remote-tracking branch 'WordPress/master' into feature/694
mehigh Jul 17, 2017
1439741
694 - Improve formatting of label element
mehigh Jul 17, 2017
0b2df35
694 - Added withInstanceId to the button link form
mehigh Jul 17, 2017
70c53dd
Formatting update
mehigh Jul 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions blocks/editable/format-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import { __ } from 'i18n';
import { Component } from 'element';
import { IconButton, Toolbar } from 'components';
import { IconButton, Toolbar, withInstanceId } from 'components';
import { ESCAPE } from 'utils/keycodes';

const FORMATTING_CONTROLS = [
Expand Down Expand Up @@ -119,10 +119,11 @@ class FormatToolbar extends Component {
}

render() {
const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS } = this.props;
const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, instanceId } = this.props;
const linkStyle = focusPosition
? { position: 'absolute', ...focusPosition }
: null;
const linkInputId = 'editable-format-toolbar__link-input-' + instanceId;

const toolbarControls = FORMATTING_CONTROLS
.filter( control => enabledControls.indexOf( control.format ) !== -1 )
Expand Down Expand Up @@ -151,17 +152,24 @@ class FormatToolbar extends Component {
className="editable-format-toolbar__link-modal"
style={ linkStyle }
onSubmit={ this.submitLink }>
<label
className="screen-reader-text"
htmlFor={ linkInputId }
>
{ __( 'URL' ) }
</label>
<input
autoFocus
className="editable-format-toolbar__link-input"
id={ linkInputId }
type="url"
required
value={ this.state.linkValue }
onChange={ this.updateLinkValue }
placeholder={ __( 'Paste URL or type' ) }
/>
<IconButton icon="editor-break" type="submit" />
<IconButton icon="editor-unlink" onClick={ this.dropLink } />
<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
<IconButton icon="editor-unlink" label={ __( 'Remove link' ) } onClick={ this.dropLink } />
</form>
}

Expand All @@ -174,8 +182,8 @@ class FormatToolbar extends Component {
>
{ this.state.linkValue && decodeURI( this.state.linkValue ) }
</a>
<IconButton icon="edit" onClick={ this.editLink } />
<IconButton icon="editor-unlink" onClick={ this.dropLink } />
<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ this.editLink } />
<IconButton icon="editor-unlink" label={ __( 'Remove link' ) } onClick={ this.dropLink } />
</div>
}
</div>
Expand All @@ -184,4 +192,5 @@ class FormatToolbar extends Component {
}
}

export default FormatToolbar;
export default withInstanceId( FormatToolbar );

16 changes: 12 additions & 4 deletions blocks/library/button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { __ } from 'i18n';
import { IconButton } from 'components';
import { IconButton, withInstanceId } from 'components';

/**
* Internal dependencies
Expand Down Expand Up @@ -36,9 +36,10 @@ registerBlockType( 'core/button', {
}
},

edit( { attributes, setAttributes, focus, setFocus, className } ) {
edit: withInstanceId( ( { attributes, setAttributes, focus, setFocus, className, instanceId } ) => {
const { text, url, title, align } = attributes;
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
const linkInputId = `editable-format-toolbar__button-link-input-${ instanceId }`;

return [
focus && (
Expand All @@ -60,20 +61,27 @@ registerBlockType( 'core/button', {
<form
className="editable-format-toolbar__link-modal"
onSubmit={ ( event ) => event.preventDefault() }>
<label
className="screen-reader-text"
htmlFor={ linkInputId }
>
{ __( 'URL' ) }
</label>
<input
className="editable-format-toolbar__link-input"
id={ linkInputId }
type="url"
required
value={ url }
onChange={ ( event ) => setAttributes( { url: event.target.value } ) }
placeholder={ __( 'Paste URL or type' ) }
/>
<IconButton icon="editor-break" type="submit" />
<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
</form>
}
</span>,
];
},
} ),

save( { attributes } ) {
const { url, text, title, align = 'none' } = attributes;
Expand Down