From 66a865b44c4c2e04c732498e38758ba719c6678a Mon Sep 17 00:00:00 2001
From: Mike Crantea <mehigh@users.noreply.github.com>
Date: Tue, 18 Jul 2017 23:19:32 +0300
Subject: [PATCH] Insert link accessibility (#1933)

* Insert link accessibility

## Description
Fixes #694 by improving the screen reader accessibility of the element.
My updates apply to the add link and edit link pop-out elements,
handling the following aspects:

- The buttons (Apply, Edit, Remove) now have the aria-label attribute
added in for accessibility purposes. There is no visual change for them.
- The URL input now has an ID that makes use of the withInstanceId
feature from components
- The URL input now has a screen-reader-text label which uses the ID on
the for attribute to improve the screen reader accessibility of the
element. This label is not visible.

## How Has This Been Tested?
I used the browser's inspector (screenshots reflect that) to confirm
the presence of the a11y attributes and screen-reader-text elements on
both the add link and edit link forms.

The updates done in blocks/editable/format-toolbar.js were visible in
the add link / edit existing link workflow in the text block, just like
the screenshots show.

I wasn't able to figure out where is the
"blocks/library/button/index.js" actually used. It has in the edit
function a form with a class of editable-format-toolbar__link-modal,
just like the one generated with the insert/edit URL.

Locally only I tried adding an extra class on the
form.editable-format-toolbar__link-modal and trying to hunt it in the
browser, but I wasn't able to stumble upon it myself. That's why the
changes done on that file are minimal (added the button aria-label and
added a <label for> and added an ID to the URL input element itself,
without making use of withInstanceId - because there is no export
default I could add the withInstanceId call around).

## Screenshots:
Add link form:
![Add link](http://files.urldocs.com/share/add-link/add-link.jpg "Add
link form")

Edit link form:
![Edit link](http://files.urldocs.com/share/edit-link/edit-link.jpg
"Edit link form")

## Types of changes
New feature (non-breaking change which adds functionality).

## Checklist:
- [x] My code is tested.
- [x] My code follows the WordPress code style.

* 694 - Fix formatting

* 694 - Removed visually hidden labels, added aria-label attribute on the input

* 694 - Reverted the edit function declaration

* 694 - Dropped accessibility text comment
---
 blocks/editable/format-toolbar.js | 9 +++++----
 blocks/library/button/index.js    | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/blocks/editable/format-toolbar.js b/blocks/editable/format-toolbar.js
index 431a28b8406ee1..699fff752a2c2e 100644
--- a/blocks/editable/format-toolbar.js
+++ b/blocks/editable/format-toolbar.js
@@ -155,13 +155,14 @@ class FormatToolbar extends Component {
 							autoFocus
 							className="editable-format-toolbar__link-input"
 							type="url"
+							aria-label={ __( '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>
 				}
 
@@ -174,8 +175,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>
diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
index a8c87145858b36..8314c3fae3d3b3 100644
--- a/blocks/library/button/index.js
+++ b/blocks/library/button/index.js
@@ -63,12 +63,13 @@ registerBlockType( 'core/button', {
 						<input
 							className="editable-format-toolbar__link-input"
 							type="url"
+							aria-label={ __( '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>,