From af36c261e38ac53a07825132a5c5388cbc2462ee Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Fri, 16 Oct 2015 23:01:58 +0000
Subject: [PATCH] Sample permalink: Improve accessibility of changing the
 permalink on Edit Post screen.

Props afercia.
Fixes #34255.

git-svn-id: https://develop.svn.wordpress.org/trunk@35229 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/edit.css         |  3 +++
 src/wp-admin/includes/post.php    |  2 +-
 src/wp-admin/js/post.js           | 31 +++++++++++++++----------------
 src/wp-includes/script-loader.php |  3 ++-
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css
index 8bad99c4f2..375f643498 100644
--- a/src/wp-admin/css/edit.css
+++ b/src/wp-admin/css/edit.css
@@ -104,7 +104,10 @@ input#link_url {
 
 #edit-slug-box .cancel {
 	margin-right: 10px;
+	padding: 0;
 	font-size: 11px;
+	text-decoration: underline;
+	color: #0073aa;
 }
 
 #comment-link-box {
diff --git a/src/wp-admin/includes/post.php b/src/wp-admin/includes/post.php
index edd243d4c9..fa86377dbe 100644
--- a/src/wp-admin/includes/post.php
+++ b/src/wp-admin/includes/post.php
@@ -1346,7 +1346,7 @@ function get_sample_permalink_html( $id, $new_title = null, $new_slug = null ) {
 		$return = '<strong>' . __( 'Permalink:' ) . "</strong>\n";
 		$return .= '<span id="sample-permalink"><a href="' . esc_url( $view_link ) . '"' . $preview_target . '>' . $display_link . "</a></span>\n";
 		$return .= '&lrm;'; // Fix bi-directional text display defect in RTL languages.
-		$return .= '<span id="edit-slug-buttons"><button type="button" class="edit-slug button button-small hide-if-no-js">' . __( 'Edit' ) . "</button></span>\n";
+		$return .= '<span id="edit-slug-buttons"><button type="button" class="edit-slug button button-small hide-if-no-js" aria-label="' . __( 'Edit permalink' ) . '">' . __( 'Edit' ) . "</button></span>\n";
 		$return .= '<span id="editable-post-name-full">' . $post_name . "</span>\n";
 	}
 
diff --git a/src/wp-admin/js/post.js b/src/wp-admin/js/post.js
index ea85134eb7..4e70250508 100644
--- a/src/wp-admin/js/post.js
+++ b/src/wp-admin/js/post.js
@@ -741,10 +741,10 @@ jQuery(document).ready( function($) {
 		$el = $( '#editable-post-name' );
 		revert_e = $el.html();
 
-		buttons.html('<button type="button" class="save button button-small">'+postL10n.ok+'</button> <a class="cancel" href="#">'+postL10n.cancel+'</a>');
-		buttons.children('.save').click( function( e ) {
+		buttons.html( '<button type="button" class="save button button-small">' + postL10n.ok + '</button> <button type="button" class="cancel button-link">' + postL10n.cancel + '</button>' );
+		buttons.children( '.save' ).click( function() {
 			var new_slug = $el.children( 'input' ).val();
-			e.preventDefault();
+
 			if ( new_slug == $('#editable-post-name-full').text() ) {
 				buttons.children('.cancel').click();
 				return;
@@ -768,11 +768,11 @@ jQuery(document).ready( function($) {
 				permalink.html(permalinkOrig);
 				real_slug.val(new_slug);
 				$( '.edit-slug' ).focus();
+				wp.a11y.speak( postL10n.permalinkSaved );
 			});
 		});
 
-		buttons.children('.cancel').click( function( e ) {
-			e.preventDefault();
+		buttons.children( '.cancel' ).click( function() {
 			$('#view-post-btn').show();
 			$el.html(revert_e);
 			buttons.html(buttonsOrig);
@@ -787,23 +787,22 @@ jQuery(document).ready( function($) {
 		}
 
 		slug_value = ( c > full.length / 4 ) ? '' : full;
-		$el.html( '<input type="text" id="new-post-slug" value="'+slug_value+'" autocomplete="off" />').children('input').keypress(function(e) {
-			var key = e.keyCode || 0;
-			// on enter, just save the new slug, don't save the post
-			if ( 13 == key ) {
-				buttons.children('.save').click();
-				return false;
+		$el.html( '<input type="text" id="new-post-slug" value="' + slug_value + '" autocomplete="off" />' ).children( 'input' ).keydown( function( e ) {
+			var key = e.which;
+			// On enter, just save the new slug, don't save the post.
+			if ( 13 === key ) {
+				e.preventDefault();
+				buttons.children( '.save' ).click();
 			}
-			if ( 27 == key ) {
-				buttons.children('.cancel').click();
-				return false;
+			if ( 27 === key ) {
+				buttons.children( '.cancel' ).click();
 			}
 		} ).keyup( function() {
-			real_slug.val(this.value);
+			real_slug.val( this.value );
 		}).focus();
 	}
 
-	$('#edit-slug-box').on( 'click', '.edit-slug', function() {
+	$( '#titlediv' ).on( 'click', '.edit-slug', function() {
 		editPermalink();
 	});
 
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
index cb88adcdf7..b889cf5351 100644
--- a/src/wp-includes/script-loader.php
+++ b/src/wp-includes/script-loader.php
@@ -500,7 +500,7 @@ function wp_default_scripts( &$scripts ) {
 			'tagDelimiter' => _x( ',', 'tag delimiter' ),
 		) );
 
-		$scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'underscore', 'word-count' ), false, 1 );
+		$scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'underscore', 'word-count', 'wp-a11y' ), false, 1 );
 		did_action( 'init' ) && $scripts->localize( 'post', 'postL10n', array(
 			'ok' => __('OK'),
 			'cancel' => __('Cancel'),
@@ -524,6 +524,7 @@ function wp_default_scripts( &$scripts ) {
 			'published' => __('Published'),
 			'saveAlert' => __('The changes you made will be lost if you navigate away from this page.'),
 			'savingText' => __('Saving Draft&#8230;'),
+			'permalinkSaved' => __( 'Permalink saved' ),
 		) );
 
 		$scripts->add( 'press-this', "/wp-admin/js/press-this$suffix.js", array( 'jquery', 'tags-box' ), false, 1 );