diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css
index 701680fc7c..b89e93907e 100644
--- a/src/wp-includes/css/editor.css
+++ b/src/wp-includes/css/editor.css
@@ -121,46 +121,41 @@
}
.mce-window .wp-editor-help {
- width: 440px;
- padding: 10px 15px 0;
+ padding: 10px 10px 0 20px;
}
+.mce-window .wp-editor-help h2,
.mce-window .wp-editor-help p {
margin: 8px 0;
white-space: normal;
+ font-size: 14px;
+ font-weight: normal;
}
.mce-window .wp-editor-help table {
- width: 420px;
+ width: 100%;
margin-bottom: 20px;
}
.mce-window .wp-editor-help td,
.mce-window .wp-editor-help th {
font-size: 13px;
- vertical-align: middle;
-}
-
-.mce-window .wp-editor-help td {
padding: 5px;
+ vertical-align: middle;
word-wrap: break-word;
white-space: normal;
}
.mce-window .wp-editor-help th {
font-weight: bold;
- padding: 5px 0 0;
-}
-
-.mce-window .wp-editor-help .wp-help-th-center th {
- text-align: center;
+ padding-bottom: 0;
}
.mce-window .wp-editor-help kbd {
font-family: monospace;
- padding: 2px 7px;
+ padding: 2px 7px 3px;
font-weight: bold;
- margin: 0 1px;
+ margin: 0;
background: #eaeaea;
background: rgba(0,0,0,0.08);
}
@@ -170,7 +165,8 @@
padding: 0 5px;
}
-.mce-window .wp-help-header td:nth-child(odd) {
+.mce-window .wp-help-th-center td:nth-child(odd),
+.mce-window .wp-help-th-center th:nth-child(odd) {
text-align: center;
}
diff --git a/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js b/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js
index 0bb068f6e5..ba75e39d00 100644
--- a/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js
+++ b/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js
@@ -205,7 +205,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
meta = tinymce.Env.mac ? __( 'Cmd + letter:' ) : __( 'Ctrl + letter:' ),
table1 = [],
table2 = [],
- header, html;
+ header, html, dialog, $wrap;
each( [
{ c: 'Copy', x: 'Cut' },
@@ -238,9 +238,9 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
each( row, function( text, key ) {
if ( ! text ) {
- out += '
| | ';
+ out += ' | | ';
} else {
- out += '' + key + ' | ' + __( text ) + ' | ';
+ out += '' + key + ' | ' + __( text ) + ' | ';
}
});
@@ -248,18 +248,18 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
}
header = [ __( 'Letter' ), __( 'Action' ), __( 'Letter' ), __( 'Action' ) ];
- header = '';
+ header = '' + header.join( ' | ' ) + ' |
';
html = '';
// Main section, default and additional shortcuts
html = html +
- '
' + __( 'Default shortcuts,' ) + ' ' + meta + '
' +
+ '
' + __( 'Default shortcuts,' ) + ' ' + meta + '
' +
'
' +
header +
table1.join('') +
'
' +
- '
' + __( 'Additional shortcuts,' ) + ' ' + access + '
' +
+ '
' + __( 'Additional shortcuts,' ) + ' ' + access + '
' +
'
' +
header +
table2.join('') +
@@ -268,7 +268,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
if ( editor.plugins.wptextpattern ) {
// Text pattern section
html = html +
- '' + __( 'When starting a new paragraph with one of these patterns followed by a space, the formatting will be applied automatically. Press Backspace or Escape to undo.' ) + '
' +
+ '' + __( 'When starting a new paragraph with one of these patterns followed by a space, the formatting will be applied automatically. Press Backspace or Escape to undo.' ) + '
' +
'' +
tr({ '* -': 'Bullet list' }) +
tr({ '1. 1)': 'Numbered list' }) +
@@ -283,7 +283,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
// Focus management section
html = html +
- '' + __( 'Focus shortcuts:' ) + '
' +
+ '' + __( 'Focus shortcuts:' ) + '
' +
'' +
tr({ 'Alt + F8': 'Inline toolbar (when an image, link or preview is selected)' }) +
tr({ 'Alt + F9': 'Editor menu (when enabled)' }) +
@@ -294,7 +294,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
html += '';
- editor.windowManager.open( {
+ dialog = editor.windowManager.open( {
title: 'Keyboard Shortcuts',
items: {
type: 'container',
@@ -306,6 +306,23 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
onclick: 'close'
}
} );
+
+ if ( dialog.$el ) {
+ dialog.$el.find( 'div[role="application"]' ).attr( 'role', 'document' );
+ $wrap = dialog.$el.find( '.mce-wp-help' );
+
+ if ( $wrap[0] ) {
+ $wrap.attr( 'tabindex', '0' ).attr( 'role', 'tab' );
+ $wrap[0].focus();
+ $wrap.on( 'keydown', function( event ) {
+ // Prevent use of: page up, page down, end, home, left arrow, up arrow, right arrow, down arrow
+ // in the dialog keydown handler.
+ if ( event.keyCode >= 33 && event.keyCode <= 40 ) {
+ event.stopPropagation();
+ }
+ });
+ }
+ }
} );
editor.addCommand( 'WP_Medialib', function() {