Changeset 30757

Timestamp:

12/06/2014 11:52:25 PM (10 years ago)

Author:

azaozz

Message:

TinyMCE, improve accessibility:

• Return focus to the editor on pressing Escape while the image toolbar is focused.
• Add a Close button to the Help modal and close it on Escape.
• Override the title on the editor iframe (read by screen reader apps), replace with the Alt+Shift+H shortcut.
• Add focus shortcuts descriptions to the Help modal.

Fixes #27642.

Location:

trunk/src/wp-includes

Files:

• class-wp-editor.php (modified) (1 diff)
• js/tinymce/plugins/wordpress/plugin.js (modified) (1 diff)
• js/tinymce/plugins/wpeditimage/plugin.js (modified) (2 diffs)
• js/tinymce/wp-mce-help.php (modified) (2 diffs)

trunk/src/wp-includes/class-wp-editor.php

@@ -978 +978 @@
             'Words: {0}' => sprintf( __( 'Words: %s' ), '{0}' ),
             'Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.' => __( 'Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.' ) . "\n\n" . __( 'If you’re looking to paste rich content from Microsoft Word, try turning this option off. The editor will clean up text pasted from Word automatically.' ),
-            'Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help' => __( 'Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help' ),
+            'Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help' => __( 'Rich Text Area. Press Alt-Shift-H for help' ),
             'You have unsaved changes are you sure you want to navigate away?' => __( 'The changes you made will be lost if you navigate away from this page.' ),
             'Your browser doesn\'t support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.' => __( 'Your browser does not support direct access to the clipboard. Please use keyboard shortcuts or your browser’s edit menu instead.' ),

trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

@@ -194 +194 @@
             width: 450,
             height: 420,
-            inline: 1,
-            classes: 'wp-help'
+            classes: 'wp-help',
+            buttons: { text: 'Close', onclick: 'close' }
         });
     });

trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

@@ -303 +303 @@
     } );
 
+    function hide() {
+        if ( ! toolbarIsHidden ) {
+            floatingToolbar.hide();
+        }
+    }
+
     floatingToolbar.on( 'show', function() {
         var self = this;
@@ -321 +327 @@
     } );
 
-    function hide() {
-        if ( ! toolbarIsHidden ) {
-            floatingToolbar.hide();
-        }
-    }
+    floatingToolbar.on( 'keydown', function( event ) {
+        if ( event.keyCode === 27 ) {
+            hide();
+        }
+    } );
 
     DOM.bind( window, 'resize scroll', function() {

trunk/src/wp-includes/js/tinymce/wp-mce-help.php

@@ -104 +104 @@
         <tr><th>2</th><td><?php _e('Heading 2'); ?></td><th>3</th><td><?php _e('Heading 3'); ?></td></tr>
         <tr><th>4</th><td><?php _e('Heading 4'); ?></td><th>5</th><td><?php _e('Heading 5'); ?></td></tr>
-        <tr><th>6</th><td><?php _e('Heading 6'); ?></td><th>9</th><td><?php _e('Address'); ?></td></tr>
-        <tr><th>k</th><td><?php _e('Insert/edit link'); ?></td><th> </th><td>&nbsp;</td></tr>
+        <tr><th>6</th><td><?php _e('Heading 6'); ?></td><th>k</th><td><?php _e('Insert/edit link'); ?></td></tr>
     </table>
 
@@ -121 +120 @@
         <tr><th>x</th><td><?php _e('Add/remove code tag'); ?></td><th> </th><td>&nbsp;</td></tr>
     </table>
+
+    <p><?php _e('Focus shortcuts:'); ?></p>
+
+    <table class="keys focus">
+        <tr><th class="left">Alt + F8</th><td><?php _e('Image toolbar (when an image is selected)'); ?></td></tr>
+        <tr><th class="left">Alt + F9</th><td><?php _e('Editor menu (when enabled)'); ?></td></tr>
+        <tr><th class="left">Alt + F10</th><td><?php _e('Editor toolbar'); ?></td></tr>
+        <tr><th class="left">Alt + F11</th><td><?php _e('Elements path'); ?></td></tr>
+    </table>
+
+    <p><?php _e('To move focus to other buttons use Tab or the arrow keys. To return focus to the editor press Escape or use one of the buttons.'); ?></p>
 </div>