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
parent
8dbc2ed36d
commit
f366ccf053
@ -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, '<' ).replace( />/g, '>' ).replace( /"/g, '"' ).replace( /'/g, ''' );
|
||||
}
|
||||
|
||||
qt.instances = {};
|
||||
|
||||
qt.getInstance = function(id) {
|
||||
@ -327,9 +333,10 @@ function edButton(id, display, tagStart, tagEnd, access) {
|
||||
* @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 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.
|
||||
*/
|
||||
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;
|
||||
|
||||
if ( !id || !display ) {
|
||||
@ -338,12 +345,13 @@ function edButton(id, display, tagStart, tagEnd, access) {
|
||||
|
||||
priority = priority || 0;
|
||||
arg2 = arg2 || '';
|
||||
attr = attr || {};
|
||||
|
||||
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;
|
||||
} 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 {
|
||||
return;
|
||||
}
|
||||
@ -399,59 +407,69 @@ function edButton(id, display, tagStart, tagEnd, access) {
|
||||
};
|
||||
|
||||
// a plain, dumb button
|
||||
qt.Button = function(id, display, access, title, instance) {
|
||||
var t = this;
|
||||
t.id = id;
|
||||
t.display = display;
|
||||
t.access = '';
|
||||
t.title = title || '';
|
||||
t.instance = instance || '';
|
||||
qt.Button = function( id, display, access, title, instance, attr ) {
|
||||
this.id = id;
|
||||
this.display = display;
|
||||
this.access = '';
|
||||
this.title = title || '';
|
||||
this.instance = instance || '';
|
||||
this.attr = attr || {};
|
||||
};
|
||||
qt.Button.prototype.html = function(idPrefix) {
|
||||
var title = this.title ? ' title="' + this.title + '"' : '',
|
||||
active, on, wp,
|
||||
var 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;
|
||||
|
||||
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' ) {
|
||||
active = dfw && dfw.isActive() ? '' : ' disabled="disabled"';
|
||||
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(){};
|
||||
|
||||
// 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;
|
||||
qt.Button.call(t, id, display, access, title, instance);
|
||||
qt.Button.call( t, id, display, access, title, instance, attr );
|
||||
t.tagStart = tagStart;
|
||||
t.tagEnd = tagEnd;
|
||||
};
|
||||
qt.TagButton.prototype = new qt.Button();
|
||||
qt.TagButton.prototype.openTag = function(e, ed) {
|
||||
var t = this;
|
||||
|
||||
qt.TagButton.prototype.openTag = function( element, ed ) {
|
||||
if ( ! ed.openTags ) {
|
||||
ed.openTags = [];
|
||||
}
|
||||
if ( t.tagEnd ) {
|
||||
ed.openTags.push(t.id);
|
||||
e.value = '/' + e.value;
|
||||
|
||||
if ( this.tagEnd ) {
|
||||
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) {
|
||||
var t = this, i = t.isOpen(ed);
|
||||
qt.TagButton.prototype.closeTag = function( element, ed ) {
|
||||
var i = this.isOpen(ed);
|
||||
|
||||
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
|
||||
qt.TagButton.prototype.isOpen = function (ed) {
|
||||
@ -544,7 +562,7 @@ function edButton(id, display, tagStart, tagEnd, access) {
|
||||
|
||||
// the close tags button
|
||||
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();
|
||||
@ -575,7 +593,11 @@ function edButton(id, display, tagStart, tagEnd, access) {
|
||||
|
||||
// the link button
|
||||
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.callback = function(e, c, ed, defaultValue) {
|
||||
@ -591,7 +613,7 @@ function edButton(id, display, tagStart, tagEnd, access) {
|
||||
}
|
||||
|
||||
if ( t.isOpen(ed) === false ) {
|
||||
URL = prompt(quicktagsL10n.enterURL, defaultValue);
|
||||
URL = prompt( quicktagsL10n.enterURL, defaultValue );
|
||||
if ( URL ) {
|
||||
t.tagStart = '<a href="' + URL + '">';
|
||||
qt.TagButton.prototype.callback.call(t, e, c, ed);
|
||||
@ -603,7 +625,11 @@ function edButton(id, display, tagStart, tagEnd, access) {
|
||||
|
||||
// the img button
|
||||
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.callback = function(e, c, ed, defaultValue) {
|
||||
@ -633,7 +659,7 @@ function edButton(id, display, tagStart, tagEnd, access) {
|
||||
};
|
||||
|
||||
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.callback = function(e, c) {
|
||||
@ -649,18 +675,18 @@ function edButton(id, display, tagStart, tagEnd, access) {
|
||||
};
|
||||
|
||||
// ensure backward compatibility
|
||||
edButtons[10] = new qt.TagButton('strong','b','<strong>','</strong>');
|
||||
edButtons[20] = new qt.TagButton('em','i','<em>','</em>'),
|
||||
edButtons[30] = new qt.LinkButton(), // special case
|
||||
edButtons[40] = new qt.TagButton('block','b-quote','\n\n<blockquote>','</blockquote>\n\n'),
|
||||
edButtons[50] = new qt.TagButton('del','del','<del datetime="' + _datetime + '">','</del>'),
|
||||
edButtons[60] = new qt.TagButton('ins','ins','<ins datetime="' + _datetime + '">','</ins>'),
|
||||
edButtons[70] = new qt.ImgButton(), // special case
|
||||
edButtons[80] = new qt.TagButton('ul','ul','<ul>\n','</ul>\n\n'),
|
||||
edButtons[90] = new qt.TagButton('ol','ol','<ol>\n','</ol>\n\n'),
|
||||
edButtons[100] = new qt.TagButton('li','li','\t<li>','</li>\n'),
|
||||
edButtons[110] = new qt.TagButton('code','code','<code>','</code>'),
|
||||
edButtons[120] = new qt.TagButton('more','more','<!--more-->\n\n',''),
|
||||
edButtons[10] = new qt.TagButton( 'strong', 'b', '<strong>', '</strong>', '', '', '', { ariaLabel: quicktagsL10n.strong, ariaLabelClose: quicktagsL10n.strongClose } );
|
||||
edButtons[20] = new qt.TagButton( 'em', 'i', '<em>', '</em>', '', '', '', { ariaLabel: quicktagsL10n.em, ariaLabelClose: quicktagsL10n.emClose } );
|
||||
edButtons[30] = new qt.LinkButton(); // special case
|
||||
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>', '', '', '', { ariaLabel: quicktagsL10n.del, ariaLabelClose: quicktagsL10n.delClose } );
|
||||
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[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', '', '', '', { ariaLabel: quicktagsL10n.ol, ariaLabelClose: quicktagsL10n.olClose } );
|
||||
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>', '', '', '', { ariaLabel: quicktagsL10n.code, ariaLabelClose: quicktagsL10n.codeClose } );
|
||||
edButtons[120] = new qt.TagButton( 'more', 'more', '<!--more-->\n\n', '', '', '', '', { ariaLabel: quicktagsL10n.more } );
|
||||
edButtons[140] = new qt.CloseButton();
|
||||
|
||||
})();
|
||||
|
||||
@ -89,14 +89,35 @@ function wp_default_scripts( &$scripts ) {
|
||||
|
||||
$scripts->add( 'quicktags', "/wp-includes/js/quicktags$suffix.js", array(), false, 1 );
|
||||
did_action( 'init' ) && $scripts->localize( 'quicktags', 'quicktagsL10n', array(
|
||||
'closeAllOpenTags' => esc_attr__( 'Close all open tags' ),
|
||||
'closeTags' => esc_attr__( 'close tags' ),
|
||||
'closeAllOpenTags' => __( 'Close all open tags' ),
|
||||
'closeTags' => __( 'close tags' ),
|
||||
'enterURL' => __( 'Enter the URL' ),
|
||||
'enterImageURL' => __( 'Enter the URL of the image' ),
|
||||
'enterImageDescription' => __( 'Enter a description of the image' ),
|
||||
'textdirection' => esc_attr__( 'text direction' ),
|
||||
'toggleTextdirection' => esc_attr__( 'Toggle Editor Text Direction' ),
|
||||
'dfw' => esc_attr__( 'Distraction-free writing mode' )
|
||||
'textdirection' => __( 'text direction' ),
|
||||
'toggleTextdirection' => __( 'Toggle Editor Text Direction' ),
|
||||
'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' );
|
||||
|
||||
Loading…
Reference in New Issue
Block a user