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.
Built from https://develop.svn.wordpress.org/trunk@30757


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

wp-includes/class-wp-editor.php

@@ -977,7 +977,7 @@ final class _WP_Editors {
 			/* translators: word count */
 			'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.' ),
 

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

@@ -193,8 +193,8 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 			title: 'Keyboard Shortcuts',
 			width: 450,
 			height: 420,
-			inline: 1,
+			classes: 'wp-help',
-			classes: 'wp-help'
+			buttons: { text: 'Close', onclick: 'close' }
 		});
 	});
 

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

@@ -302,6 +302,12 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		}, delay );
 	} );
 
+	function hide() {
+		if ( ! toolbarIsHidden ) {
+			floatingToolbar.hide();
+		}
+	}
+
 	floatingToolbar.on( 'show', function() {
 		var self = this;
 
@@ -320,11 +326,11 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		DOM.removeClass( this.getEl(), 'mce-inline-toolbar-grp-active' );
 	} );
 
-	function hide() {
+	floatingToolbar.on( 'keydown', function( event ) {
-		if ( ! toolbarIsHidden ) {
+		if ( event.keyCode === 27 ) {
-			floatingToolbar.hide();
+			hide();
-		}
 		}
+	} );
 
 	DOM.bind( window, 'resize scroll', function() {
 		if ( ! toolbarIsHidden && editorWrapParent.hasClass( 'wp-editor-expand' ) ) {

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

@@ -103,8 +103,7 @@ header('Content-Type: text/html; charset=' . get_bloginfo('charset'));
 		<tr><th>u</th><td><?php _e('Underline'); ?></td><th>1</th><td><?php _e('Heading 1'); ?></td></tr>
 		<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>6</th><td><?php _e('Heading 6'); ?></td><th>k</th><td><?php _e('Insert/edit link'); ?></td></tr>
-		<tr><th>k</th><td><?php _e('Insert/edit link'); ?></td><th> </th><td>&nbsp;</td></tr>
 	</table>
 
 	<p><?php _e('The following shortcuts use different access keys: Alt + Shift + letter.'); ?></p>
@@ -120,6 +119,17 @@ header('Content-Type: text/html; charset=' . get_bloginfo('charset'));
 		<tr><th>p</th><td><?php _e('Insert Page Break tag'); ?></td><th>h</th><td><?php _e('Help'); ?></td></tr>
 		<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>
 
 </div>

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.1-beta2-30756';
+$wp_version = '4.1-beta2-30757';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.