From 30d63dde4b887efd80e0c98f7581a8fb891f44fd Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Mon, 14 Mar 2016 20:54:58 +0000
Subject: [PATCH] wpLink: fix accessibility issues: - Add role=dialog and an
 aria-labelledby attribute to the modal container. - Change the modal title to
 h1. - Remove one `&nbsp;` that gets read out as `blank` by screen readers. -
 Replace the Cancel link with a button. - Clean up unused CSS.

Props afercia.
Fixes #30468.

git-svn-id: https://develop.svn.wordpress.org/trunk@36991 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/class-wp-editor.php | 12 ++---
 src/wp-includes/css/editor.css      | 78 ++++-------------------------
 src/wp-includes/js/wplink.js        |  2 +-
 3 files changed, 16 insertions(+), 76 deletions(-)

diff --git a/src/wp-includes/class-wp-editor.php b/src/wp-includes/class-wp-editor.php
index cfa62491d7..237ce507c5 100644
--- a/src/wp-includes/class-wp-editor.php
+++ b/src/wp-includes/class-wp-editor.php
@@ -1403,13 +1403,11 @@ final class _WP_Editors {
 		// display: none is required here, see #WP27605
 		?>
 		<div id="wp-link-backdrop" style="display: none"></div>
-		<div id="wp-link-wrap" class="wp-core-ui" style="display: none">
+		<div id="wp-link-wrap" class="wp-core-ui" style="display: none" role="dialog" aria-labelledby="link-modal-title">
 		<form id="wp-link" tabindex="-1">
 		<?php wp_nonce_field( 'internal-linking', '_ajax_linking_nonce', false ); ?>
-		<div id="link-modal-title">
-			<?php _e( 'Insert/edit link' ) ?>
-			<button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
-	 	</div>
+		<h1 id="link-modal-title"><?php _e( 'Insert/edit link' ) ?></h1>
+		<button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
 		<div id="link-selector">
 			<div id="link-options">
 				<div>
@@ -1421,14 +1419,14 @@ final class _WP_Editors {
 					<input id="wp-link-text" type="text" /></label>
 				</div>
 				<div class="link-target">
-					<label><span>&nbsp;</span>
+					<label><span></span>
 					<input type="checkbox" id="wp-link-target" /> <?php _e( 'Open link in a new tab' ); ?></label>
 				</div>
 			</div>
 		</div>
 		<div class="submitbox">
 			<div id="wp-link-cancel">
-				<a class="submitdelete deletion" href="#"><?php _e( 'Cancel' ); ?></a>
+				<button type="button" class="button"><?php _e( 'Cancel' ); ?></button>
 			</div>
 			<div id="wp-link-update">
 				<input type="submit" value="<?php esc_attr_e( 'Add Link' ); ?>" class="button button-primary" id="wp-link-submit" name="wp-link-submit">
diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css
index a5526acb79..2ef65d0c36 100644
--- a/src/wp-includes/css/editor.css
+++ b/src/wp-includes/css/editor.css
@@ -1074,7 +1074,7 @@ i.mce-i-wp_code:before {
 	padding: 10px;
 	margin: 1px 0 0;
 	line-height: 150%;
-	border: 0 none;
+	border: 0;
 	outline: none;
 	display: block;
 	resize: vertical;
@@ -1388,10 +1388,8 @@ i.mce-i-wp_code:before {
 	font-size: 18px;
 	font-weight: 600;
 	line-height: 36px;
+	margin: 0;
 	padding: 0 36px 0 16px;
-	top: 0;
-	right: 0;
-	left: 0;
 }
 
 #wp-link-close {
@@ -1438,10 +1436,6 @@ i.mce-i-wp_code:before {
 	padding: 0 16px 50px;
 }
 
-#wp-link-wrap.search-panel-visible #link-selector {
-	-webkit-overflow-scrolling: touch;
-}
-
 #wp-link ol,
 #wp-link ul {
 	list-style: none;
@@ -1494,61 +1488,6 @@ i.mce-i-wp_code:before {
 	max-width: 70%;
 }
 
-#wp-link li {
-	clear: both;
-	margin-bottom: 0;
-	border-bottom: 1px solid #f1f1f1;
-	color: #32373c;
-	padding: 4px 6px 4px 10px;
-	cursor: pointer;
-	position: relative;
-}
-
-#wp-link li:hover {
-	background: #eaf2fa;
-	color: #151515;
-}
-
-#wp-link li.unselectable {
-	border-bottom: 1px solid #ddd;
-}
-
-#wp-link li.unselectable:hover {
-	background: #fff;
-	cursor: auto;
-	color: #32373c;
-}
-
-#wp-link li.selected {
-	background: #ddd;
-	color: #32373c;
-}
-
-#wp-link li.selected .item-title {
-	font-weight: bold;
-}
-
-#wp-link li:last-child {
-	border: none;
-}
-
-#wp-link .item-title {
-	display: inline-block;
-	width: 80%;
-	width: -webkit-calc(100% - 68px);
-	width: calc(100% - 68px);
-	word-wrap: break-word;
-}
-
-#wp-link .item-info {
-	text-transform: uppercase;
-	color: #666;
-	font-size: 11px;
-	position: absolute;
-	right: 5px;
-	top: 5px;
-}
-
 #wp-link .submitbox {
 	padding: 8px 16px;
 	background: #fcfcfc;
@@ -1571,7 +1510,6 @@ i.mce-i-wp_code:before {
 
 #wp-link-submit {
 	float: right;
-	margin-bottom: 0;
 }
 
 @media screen and ( max-width: 782px ) {
@@ -1583,13 +1521,17 @@ i.mce-i-wp_code:before {
 		padding: 0 16px 60px;
 	}
 
-	#wp-link-wrap.search-panel-visible #link-selector {
-		bottom: 52px;
-	}
-
 	#wp-link-cancel {
 		line-height: 32px;
 	}
+
+	#wp-link .link-target {
+		padding-top: 10px;
+	}
+
+	#wp-link .submitbox .button {
+		margin-bottom: 0;
+	}
 }
 
 @media screen and ( max-width: 520px ) {
diff --git a/src/wp-includes/js/wplink.js b/src/wp-includes/js/wplink.js
index 3851c2fd59..ec8f09b1b3 100644
--- a/src/wp-includes/js/wplink.js
+++ b/src/wp-includes/js/wplink.js
@@ -35,7 +35,7 @@ var wpLink;
 				wpLink.update();
 			});
 
-			inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel a' ).click( function( event ) {
+			inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel button' ).click( function( event ) {
 				event.preventDefault();
 				wpLink.close();
 			});