Changeset 30757

Timestamp:

12/06/2014 11:52:25 PM (12 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>