Make it possible to tab out of the plugin and theme editors textareas by pressing Esc followed by Tab, fixes #21347

git-svn-id: http://core.svn.wordpress.org/trunk@21310 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/common.dev.js

@@ -321,10 +321,24 @@ $(document).ready( function() {
 
 	// tab in textareas
 	$('#newcontent').bind('keydown.wpevent_InsertTab', function(e) {
-		if ( e.keyCode != 9 )
+		var el = e.target, selStart, selEnd, val, scroll, sel;
-			return true;
 
-		var el = e.target, selStart = el.selectionStart, selEnd = el.selectionEnd, val = el.value, scroll, sel;
+		if ( e.keyCode == 27 ) { // escape key
+			$(el).data('tab-out', true);
+			return;
+		}
+
+		if ( e.keyCode != 9 || e.ctrlKey || e.altKey || e.shiftKey ) // tab key
+			return;
+
+		if ( $(el).data('tab-out') ) {
+			$(el).data('tab-out', false);
+			return;
+		}
+
+		selStart = el.selectionStart;
+		selEnd = el.selectionEnd;
+		val = el.value;
 
 		try {
 			this.lastKey = 9; // not a standard DOM property, lastKey is to help stop Opera tab event. See blur handler below.

wp-admin/plugin-editor.php

@@ -226,7 +226,8 @@ foreach ( $plugin_files as $plugin_file ) :
 </div>
 <form name="template" id="template" action="plugin-editor.php" method="post">
 	<?php wp_nonce_field('edit-plugin_' . $file) ?>
-		<div><textarea cols="70" rows="25" name="newcontent" id="newcontent" tabindex="1"><?php echo $content ?></textarea>
+		<div><textarea cols="70" rows="25" name="newcontent" id="newcontent" aria-describedby="newcontent-description" tabindex="1"><?php echo $content ?></textarea>
+		<span id="newcontent-description" class="screen-reader-text"><?php _e('Content of the edited file. The Tab key enters a tab character, to move below this area, press the Esc key followed by the Tab key. Shift + Tab works as expected.'); ?></span>
 		<input type="hidden" name="action" value="update" />
 		<input type="hidden" name="file" value="<?php echo esc_attr($file) ?>" />
 		<input type="hidden" name="plugin" value="<?php echo esc_attr($plugin) ?>" />
@@ -256,12 +257,10 @@ foreach ( $plugin_files as $plugin_file ) :
 <br class="clear" />
 </div>
 <script type="text/javascript">
-/* <![CDATA[ */
 jQuery(document).ready(function($){
 	$('#template').submit(function(){ $('#scrollto').val( $('#newcontent').scrollTop() ); });
 	$('#newcontent').scrollTop( $('#scrollto').val() );
 });
-/* ]]> */
 </script>
 <?php
 	break;

wp-admin/theme-editor.php

@@ -198,7 +198,8 @@ if ( $allowed_files ) :
 else : ?>
 	<form name="template" id="template" action="theme-editor.php" method="post">
 	<?php wp_nonce_field( 'edit-theme_' . $file . $stylesheet ); ?>
-		 <div><textarea cols="70" rows="30" name="newcontent" id="newcontent" tabindex="1"><?php echo $content ?></textarea>
+		<div><textarea cols="70" rows="30" name="newcontent" id="newcontent" aria-describedby="newcontent-description" tabindex="1"><?php echo $content ?></textarea>
+		<span id="newcontent-description" class="screen-reader-text"><?php _e('Content of the edited file. The Tab key enters a tab character, to move below this area, press the Esc key followed by the Tab key. Shift + Tab works as expected.'); ?></span>
 		<input type="hidden" name="action" value="update" />
 		<input type="hidden" name="file" value="<?php echo esc_attr( $relative_file ); ?>" />
 		<input type="hidden" name="theme" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" />