sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Editor: add ARIA labels to the Quicktags buttons to improve accessibility. 

Props afercia, azaozz. Fixes #31522.

git-svn-id: https://develop.svn.wordpress.org/trunk@32883 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
azaozz 2015-06-20 02:15:04 +00:00
parent 8dbc2ed36d
commit f366ccf053
2 changed files with 96 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/wp-includes/js/quicktags.js
View File

@ -236,6 +236,12 @@ function edButton(id, display, tagStart, tagEnd, access) {
} }
}; };
function _escape( text ) {
text = text || '';
text = text.replace( /&([^#])(?![a-z1-4]{1,8};)/gi, '&$1' );
return text.replace( /</g, '&lt;' ).replace( />/g, '&gt;' ).replace( /"/g, '&quot;' ).replace( /'/g, '&#039;' );
}
qt.instances = {}; qt.instances = {};
qt.getInstance = function(id) { qt.getInstance = function(id) {
@ -327,9 +333,10 @@ function edButton(id, display, tagStart, tagEnd, access) {
* @param string title Optional. Button's title="..." * @param string title Optional. Button's title="..."
* @param int priority Optional. Number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc. * @param int priority Optional. Number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc.
* @param string instance Optional. Limit the button to a specific instance of Quicktags, add to all instances if not present. * @param string instance Optional. Limit the button to a specific instance of Quicktags, add to all instances if not present.
* @param attr object Optional. Used to pass additional attributes. Currently supports `ariaLabel` and `ariaLabelClose` (for "close tag" state)
* @return mixed null or the button object that is needed for back-compat. * @return mixed null or the button object that is needed for back-compat.
*/ */
qt.addButton = function( id, display, arg1, arg2, access_key, title, priority, instance ) { qt.addButton = function( id, display, arg1, arg2, access_key, title, priority, instance, attr ) {
var btn; var btn;
if ( !id || !display ) { if ( !id || !display ) {
@ -338,12 +345,13 @@ function edButton(id, display, tagStart, tagEnd, access) {
priority = priority || 0; priority = priority || 0;
arg2 = arg2 || ''; arg2 = arg2 || '';
attr = attr || {};
if ( typeof(arg1) === 'function' ) { if ( typeof(arg1) === 'function' ) {
btn = new qt.Button(id, display, access_key, title, instance); btn = new qt.Button( id, display, access_key, title, instance, attr );
btn.callback = arg1; btn.callback = arg1;
} else if ( typeof(arg1) === 'string' ) { } else if ( typeof(arg1) === 'string' ) {
btn = new qt.TagButton(id, display, arg1, arg2, access_key, title, instance); btn = new qt.TagButton( id, display, arg1, arg2, access_key, title, instance, attr );
} else { } else {
return; return;
} }
@ -399,59 +407,69 @@ function edButton(id, display, tagStart, tagEnd, access) {
}; };
// a plain, dumb button // a plain, dumb button
qt.Button = function(id, display, access, title, instance) { qt.Button = function( id, display, access, title, instance, attr ) {
var t = this; this.id = id;
t.id = id; this.display = display;
t.display = display; this.access = '';
t.access = ''; this.title = title || '';
t.title = title || ''; this.instance = instance || '';
t.instance = instance || ''; this.attr = attr || {};
}; };
qt.Button.prototype.html = function(idPrefix) { qt.Button.prototype.html = function(idPrefix) {
var title = this.title ? ' title="' + this.title + '"' : '', var active, on, wp,
active, on, wp, title = this.title ? ' title="' + _escape( this.title ) + '"' : '',
ariaLabel = this.attr && this.attr.ariaLabel ? ' aria-label="' + _escape( this.attr.ariaLabel ) + '"' : '',
val = this.display ? ' value="' + _escape( this.display ) + '"' : '',
id = this.id ? ' id="' + _escape( idPrefix + this.id ) + '"' : '',
dfw = ( wp = window.wp ) && wp.editor && wp.editor.dfw; dfw = ( wp = window.wp ) && wp.editor && wp.editor.dfw;
if ( this.id === 'fullscreen' ) { if ( this.id === 'fullscreen' ) {
return '<button type="button" id="' + idPrefix + this.id + '" class="ed_button qt-dfw qt-fullscreen"' + title + '></button>'; return '<button type="button"' + id + ' class="ed_button qt-dfw qt-fullscreen"' + title + ariaLabel + '></button>';
} else if ( this.id === 'dfw' ) { } else if ( this.id === 'dfw' ) {
active = dfw && dfw.isActive() ? '' : ' disabled="disabled"'; active = dfw && dfw.isActive() ? '' : ' disabled="disabled"';
on = dfw && dfw.isOn() ? ' active' : ''; on = dfw && dfw.isOn() ? ' active' : '';
return '<button type="button" id="' + idPrefix + this.id + '" class="ed_button qt-dfw' + on + '"' + title + active + '></button>'; return '<button type="button"' + id + ' class="ed_button qt-dfw' + on + '"' + title + ariaLabel + active + '></button>';
} }
return '<input type="button" id="' + idPrefix + this.id + '" class="ed_button button button-small"' + title + ' value="' + this.display + '" />'; return '<input type="button"' + id + ' class="ed_button button button-small"' + title + ariaLabel + val + ' />';
}; };
qt.Button.prototype.callback = function(){}; qt.Button.prototype.callback = function(){};
// a button that inserts HTML tag // a button that inserts HTML tag
qt.TagButton = function(id, display, tagStart, tagEnd, access, title, instance) { qt.TagButton = function( id, display, tagStart, tagEnd, access, title, instance, attr ) {
var t = this; var t = this;
qt.Button.call(t, id, display, access, title, instance); qt.Button.call( t, id, display, access, title, instance, attr );
t.tagStart = tagStart; t.tagStart = tagStart;
t.tagEnd = tagEnd; t.tagEnd = tagEnd;
}; };
qt.TagButton.prototype = new qt.Button(); qt.TagButton.prototype = new qt.Button();
qt.TagButton.prototype.openTag = function(e, ed) { qt.TagButton.prototype.openTag = function( element, ed ) {
var t = this;
if ( ! ed.openTags ) { if ( ! ed.openTags ) {
ed.openTags = []; ed.openTags = [];
} }
if ( t.tagEnd ) {
ed.openTags.push(t.id); if ( this.tagEnd ) {
e.value = '/' + e.value; ed.openTags.push( this.id );
element.value = '/' + element.value;
if ( this.attr.ariaLabelClose ) {
element.setAttribute( 'aria-label', this.attr.ariaLabelClose );
}
} }
}; };
qt.TagButton.prototype.closeTag = function(e, ed) { qt.TagButton.prototype.closeTag = function( element, ed ) {
var t = this, i = t.isOpen(ed); var i = this.isOpen(ed);
if ( i !== false ) { if ( i !== false ) {
ed.openTags.splice(i, 1); ed.openTags.splice( i, 1 );
} }
e.value = t.display; element.value = this.display;
if ( this.attr.ariaLabel ) {
element.setAttribute( 'aria-label', this.attr.ariaLabel );
}
}; };
// whether a tag is open or not. Returns false if not open, or current open depth of the tag // whether a tag is open or not. Returns false if not open, or current open depth of the tag
qt.TagButton.prototype.isOpen = function (ed) { qt.TagButton.prototype.isOpen = function (ed) {
@ -544,7 +562,7 @@ function edButton(id, display, tagStart, tagEnd, access) {
// the close tags button // the close tags button
qt.CloseButton = function() { qt.CloseButton = function() {
qt.Button.call(this, 'close', quicktagsL10n.closeTags, '', quicktagsL10n.closeAllOpenTags); qt.Button.call( this, 'close', quicktagsL10n.closeTags, '', quicktagsL10n.closeAllOpenTags );
}; };
qt.CloseButton.prototype = new qt.Button(); qt.CloseButton.prototype = new qt.Button();
@ -575,7 +593,11 @@ function edButton(id, display, tagStart, tagEnd, access) {
// the link button // the link button
qt.LinkButton = function() { qt.LinkButton = function() {
qt.TagButton.call(this, 'link', 'link', '', '</a>'); var attr = {
ariaLabel: quicktagsL10n.link
};
qt.TagButton.call( this, 'link', 'link', '', '</a>', '', '', '', attr );
}; };
qt.LinkButton.prototype = new qt.TagButton(); qt.LinkButton.prototype = new qt.TagButton();
qt.LinkButton.prototype.callback = function(e, c, ed, defaultValue) { qt.LinkButton.prototype.callback = function(e, c, ed, defaultValue) {
@ -591,7 +613,7 @@ function edButton(id, display, tagStart, tagEnd, access) {
} }
if ( t.isOpen(ed) === false ) { if ( t.isOpen(ed) === false ) {
URL = prompt(quicktagsL10n.enterURL, defaultValue); URL = prompt( quicktagsL10n.enterURL, defaultValue );
if ( URL ) { if ( URL ) {
t.tagStart = '<a href="' + URL + '">'; t.tagStart = '<a href="' + URL + '">';
qt.TagButton.prototype.callback.call(t, e, c, ed); qt.TagButton.prototype.callback.call(t, e, c, ed);
@ -603,7 +625,11 @@ function edButton(id, display, tagStart, tagEnd, access) {
// the img button // the img button
qt.ImgButton = function() { qt.ImgButton = function() {
qt.TagButton.call(this, 'img', 'img', '', ''); var attr = {
ariaLabel: quicktagsL10n.image
};
qt.TagButton.call( this, 'img', 'img', '', '', '', '', '', attr );
}; };
qt.ImgButton.prototype = new qt.TagButton(); qt.ImgButton.prototype = new qt.TagButton();
qt.ImgButton.prototype.callback = function(e, c, ed, defaultValue) { qt.ImgButton.prototype.callback = function(e, c, ed, defaultValue) {
@ -633,7 +659,7 @@ function edButton(id, display, tagStart, tagEnd, access) {
}; };
qt.TextDirectionButton = function() { qt.TextDirectionButton = function() {
qt.Button.call(this, 'textdirection', quicktagsL10n.textdirection, '', quicktagsL10n.toggleTextdirection); qt.Button.call( this, 'textdirection', quicktagsL10n.textdirection, '', quicktagsL10n.toggleTextdirection );
}; };
qt.TextDirectionButton.prototype = new qt.Button(); qt.TextDirectionButton.prototype = new qt.Button();
qt.TextDirectionButton.prototype.callback = function(e, c) { qt.TextDirectionButton.prototype.callback = function(e, c) {
@ -649,18 +675,18 @@ function edButton(id, display, tagStart, tagEnd, access) {
}; };
// ensure backward compatibility // ensure backward compatibility
edButtons[10] = new qt.TagButton('strong','b','<strong>','</strong>'); edButtons[10] = new qt.TagButton( 'strong', 'b', '<strong>', '</strong>', '', '', '', { ariaLabel: quicktagsL10n.strong, ariaLabelClose: quicktagsL10n.strongClose } );
edButtons[20] = new qt.TagButton('em','i','<em>','</em>'), edButtons[20] = new qt.TagButton( 'em', 'i', '<em>', '</em>', '', '', '', { ariaLabel: quicktagsL10n.em, ariaLabelClose: quicktagsL10n.emClose } );
edButtons[30] = new qt.LinkButton(), // special case edButtons[30] = new qt.LinkButton(); // special case
edButtons[40] = new qt.TagButton('block','b-quote','\n\n<blockquote>','</blockquote>\n\n'), edButtons[40] = new qt.TagButton( 'block', 'b-quote', '\n\n<blockquote>', '</blockquote>\n\n', '', '', '', { ariaLabel: quicktagsL10n.blockquote, ariaLabelClose: quicktagsL10n.blockquoteClose } );
edButtons[50] = new qt.TagButton('del','del','<del datetime="' + _datetime + '">','</del>'), edButtons[50] = new qt.TagButton( 'del', 'del', '<del datetime="' + _datetime + '">', '</del>', '', '', '', { ariaLabel: quicktagsL10n.del, ariaLabelClose: quicktagsL10n.delClose } );
edButtons[60] = new qt.TagButton('ins','ins','<ins datetime="' + _datetime + '">','</ins>'), edButtons[60] = new qt.TagButton( 'ins', 'ins', '<ins datetime="' + _datetime + '">', '</ins>', '', '', '', { ariaLabel: quicktagsL10n.ins, ariaLabelClose: quicktagsL10n.insClose } );
edButtons[70] = new qt.ImgButton(), // special case edButtons[70] = new qt.ImgButton(); // special case
edButtons[80] = new qt.TagButton('ul','ul','<ul>\n','</ul>\n\n'), edButtons[80] = new qt.TagButton( 'ul', 'ul', '<ul>\n', '</ul>\n\n', '', '', '', { ariaLabel: quicktagsL10n.ul, ariaLabelClose: quicktagsL10n.ulClose } );
edButtons[90] = new qt.TagButton('ol','ol','<ol>\n','</ol>\n\n'), edButtons[90] = new qt.TagButton( 'ol', 'ol', '<ol>\n', '</ol>\n\n', '', '', '', { ariaLabel: quicktagsL10n.ol, ariaLabelClose: quicktagsL10n.olClose } );
edButtons[100] = new qt.TagButton('li','li','\t<li>','</li>\n'), edButtons[100] = new qt.TagButton( 'li', 'li', '\t<li>', '</li>\n', '', '', '', { ariaLabel: quicktagsL10n.li, ariaLabelClose: quicktagsL10n.liClose } );
edButtons[110] = new qt.TagButton('code','code','<code>','</code>'), edButtons[110] = new qt.TagButton( 'code', 'code', '<code>', '</code>', '', '', '', { ariaLabel: quicktagsL10n.code, ariaLabelClose: quicktagsL10n.codeClose } );
edButtons[120] = new qt.TagButton('more','more','<!--more-->\n\n',''), edButtons[120] = new qt.TagButton( 'more', 'more', '<!--more-->\n\n', '', '', '', '', { ariaLabel: quicktagsL10n.more } );
edButtons[140] = new qt.CloseButton(); edButtons[140] = new qt.CloseButton();
})(); })();

31
src/wp-includes/script-loader.php
View File

@ -89,14 +89,35 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'quicktags', "/wp-includes/js/quicktags$suffix.js", array(), false, 1 ); $scripts->add( 'quicktags', "/wp-includes/js/quicktags$suffix.js", array(), false, 1 );
did_action( 'init' ) && $scripts->localize( 'quicktags', 'quicktagsL10n', array( did_action( 'init' ) && $scripts->localize( 'quicktags', 'quicktagsL10n', array(
'closeAllOpenTags' => esc_attr__( 'Close all open tags' ), 'closeAllOpenTags' => __( 'Close all open tags' ),
'closeTags' => esc_attr__( 'close tags' ), 'closeTags' => __( 'close tags' ),
'enterURL' => __( 'Enter the URL' ), 'enterURL' => __( 'Enter the URL' ),
'enterImageURL' => __( 'Enter the URL of the image' ), 'enterImageURL' => __( 'Enter the URL of the image' ),
'enterImageDescription' => __( 'Enter a description of the image' ), 'enterImageDescription' => __( 'Enter a description of the image' ),
'textdirection' => esc_attr__( 'text direction' ), 'textdirection' => __( 'text direction' ),
'toggleTextdirection' => esc_attr__( 'Toggle Editor Text Direction' ), 'toggleTextdirection' => __( 'Toggle Editor Text Direction' ),
'dfw' => esc_attr__( 'Distraction-free writing mode' ) 'dfw' => __( 'Distraction-free writing mode' ),
'strong' => __( 'Bold' ),
'strongClose' => __( 'Close bold tag' ),
'em' => __( 'Italic' ),
'emClose' => __( 'Close italic tag' ),
'link' => __( 'Insert link' ),
'blockquote' => __( 'Blockquote' ),
'blockquoteClose' => __( 'Close blockquote tag' ),
'del' => __( 'Deleted text (strikethrough)' ),
'delClose' => __( 'Close deleted text tag' ),
'ins' => __( 'Inserted text' ),
'insClose' => __( 'Close inserted text tag' ),
'image' => __( 'Insert image' ),
'ul' => __( 'Bulleted list' ),
'ulClose' => __( 'Close bulleted list tag' ),
'ol' => __( 'Numbered list' ),
'olClose' => __( 'Close numbered list tag' ),
'li' => __( 'List item' ),
'liClose' => __( 'Close list item tag' ),
'code' => __( 'Code' ),
'codeClose' => __( 'Close code tag' ),
'more' => __( 'Insert Read More tag' ),
) ); ) );
$scripts->add( 'colorpicker', "/wp-includes/js/colorpicker$suffix.js", array('prototype'), '3517m' ); $scripts->add( 'colorpicker', "/wp-includes/js/colorpicker$suffix.js", array('prototype'), '3517m' );