TinyMCE: fix accessibility for the keyboard shortcuts help dialog.

Props afercia, azaozz. Fixes #33031.
Built from https://develop.svn.wordpress.org/trunk@33429


git-svn-id: http://core.svn.wordpress.org/trunk@33396 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2015-07-26 19:14:26 +00:00
parent 63dc60ee7b
commit 170eef2e93
8 changed files with 52 additions and 43 deletions

View File

@ -121,46 +121,41 @@
}
.mce-window .wp-editor-help {
width: 440px;
padding: 10px 15px 0;
padding: 10px 20px 0 10px;
}
.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;
}

File diff suppressed because one or more lines are too long

View File

@ -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;
}

File diff suppressed because one or more lines are too long

View File

@ -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 += '<th></th><td></td>';
out += '<td></td><td></td>';
} else {
out += '<th><kbd>' + key + '</kbd></th><td>' + __( text ) + '</td>';
out += '<td><kbd>' + key + '</kbd></td><td>' + __( text ) + '</td>';
}
});
@ -248,18 +248,18 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
}
header = [ __( 'Letter' ), __( 'Action' ), __( 'Letter' ), __( 'Action' ) ];
header = '<tr class="wp-help-header"><td>' + header.join( '</td><td>' ) + '</td></tr>';
header = '<tr><th>' + header.join( '</th><th>' ) + '</th></tr>';
html = '<div class="wp-editor-help">';
// Main section, default and additional shortcuts
html = html +
'<p>' + __( 'Default shortcuts,' ) + ' ' + meta + '</p>' +
'<h2>' + __( 'Default shortcuts,' ) + ' ' + meta + '</h2>' +
'<table class="wp-help-th-center">' +
header +
table1.join('') +
'</table>' +
'<p>' + __( 'Additional shortcuts,' ) + ' ' + access + '</p>' +
'<h2>' + __( 'Additional shortcuts,' ) + ' ' + access + '</h2>' +
'<table class="wp-help-th-center">' +
header +
table2.join('') +
@ -268,7 +268,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
if ( editor.plugins.wptextpattern ) {
// Text pattern section
html = html +
'<p>' + __( '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.' ) + '</p>' +
'<h2>' + __( '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.' ) + '</h2>' +
'<table>' +
tr({ '*</kbd>&nbsp;<kbd>-': 'Bullet list' }) +
tr({ '1.</kbd>&nbsp;<kbd>1)': 'Numbered list' }) +
@ -283,7 +283,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
// Focus management section
html = html +
'<p>' + __( 'Focus shortcuts:' ) + '</p>' +
'<h2>' + __( 'Focus shortcuts:' ) + '</h2>' +
'<table>' +
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 += '</div>';
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() {

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.3-beta4-33428';
$wp_version = '4.3-beta4-33429';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.