Changeset 21310

Timestamp:

07/23/2012 11:46:27 PM (13 years ago)

Author:

azaozz

Message:

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

Location:

trunk/wp-admin

Files:

• js/common.dev.js (modified) (1 diff)
• plugin-editor.php (modified) (2 diffs)
• theme-editor.php (modified) (1 diff)

trunk/wp-admin/js/common.dev.js

@@ -322 +322 @@
     // tab in textareas
     $('#newcontent').bind('keydown.wpevent_InsertTab', function(e) {
-        if ( e.keyCode != 9 )
-            return true;
-
-        var el = e.target, selStart = el.selectionStart, selEnd = el.selectionEnd, val = el.value, scroll, sel;
+        var el = e.target, selStart, selEnd, val, 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 {

trunk/wp-admin/plugin-editor.php

@@ -227 +227 @@
 <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) ?>" />
@@ -257 +258 @@
 </div>
 <script type="text/javascript">
-/* <![CDATA[ */
 jQuery(document).ready(function($){
     $('#template').submit(function(){ $('#scrollto').val( $('#newcontent').scrollTop() ); });
     $('#newcontent').scrollTop( $('#scrollto').val() );
 });
-/* ]]> */
 </script>
 <?php

trunk/wp-admin/theme-editor.php

@@ -199 +199 @@
     <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>
-         <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() ); ?>" />
-         <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
-         </div>
+        <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() ); ?>" />
+        <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
+        </div>
     <?php if ( ! empty( $functions ) ) : ?>
         <div id="documentation" class="hide-if-no-js">