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
parent
63dc60ee7b
commit
170eef2e93
|
|
@ -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
|
|
@ -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
|
|
@ -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> <kbd>-': 'Bullet list' }) +
|
||||
tr({ '1.</kbd> <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
Binary file not shown.
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue