From f366ccf053b855e93ed518069d0cbdd66406f3a0 Mon Sep 17 00:00:00 2001 From: azaozz Date: Sat, 20 Jun 2015 02:15:04 +0000 Subject: [PATCH] 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 --- src/wp-includes/js/quicktags.js | 114 ++++++++++++++++++------------ src/wp-includes/script-loader.php | 31 ++++++-- 2 files changed, 96 insertions(+), 49 deletions(-) diff --git a/src/wp-includes/js/quicktags.js b/src/wp-includes/js/quicktags.js index 1799a5e288..b7b1ee73dc 100644 --- a/src/wp-includes/js/quicktags.js +++ b/src/wp-includes/js/quicktags.js @@ -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, ''' ); + } + 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 ''; + return ''; } else if ( this.id === 'dfw' ) { active = dfw && dfw.isActive() ? '' : ' disabled="disabled"'; on = dfw && dfw.isOn() ? ' active' : ''; - return ''; + return ''; } - return ''; + return ''; }; 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', '', ''); + var attr = { + ariaLabel: quicktagsL10n.link + }; + + qt.TagButton.call( this, 'link', 'link', '', '', '', '', '', 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 = ''; 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','',''); - edButtons[20] = new qt.TagButton('em','i','',''), - edButtons[30] = new qt.LinkButton(), // special case - edButtons[40] = new qt.TagButton('block','b-quote','\n\n
','
\n\n'), - edButtons[50] = new qt.TagButton('del','del','',''), - edButtons[60] = new qt.TagButton('ins','ins','',''), - edButtons[70] = new qt.ImgButton(), // special case - edButtons[80] = new qt.TagButton('ul','ul','\n\n'), - edButtons[90] = new qt.TagButton('ol','ol','
    \n','
\n\n'), - edButtons[100] = new qt.TagButton('li','li','\t
  • ','
    • \n'), - edButtons[110] = new qt.TagButton('code','code','',''), - edButtons[120] = new qt.TagButton('more','more','\n\n',''), + edButtons[10] = new qt.TagButton( 'strong', 'b', '', '', '', '', '', { ariaLabel: quicktagsL10n.strong, ariaLabelClose: quicktagsL10n.strongClose } ); + edButtons[20] = new qt.TagButton( 'em', 'i', '', '', '', '', '', { ariaLabel: quicktagsL10n.em, ariaLabelClose: quicktagsL10n.emClose } ); + edButtons[30] = new qt.LinkButton(); // special case + edButtons[40] = new qt.TagButton( 'block', 'b-quote', '\n\n
    ', '
    \n\n', '', '', '', { ariaLabel: quicktagsL10n.blockquote, ariaLabelClose: quicktagsL10n.blockquoteClose } ); + edButtons[50] = new qt.TagButton( 'del', 'del', '', '', '', '', '', { ariaLabel: quicktagsL10n.del, ariaLabelClose: quicktagsL10n.delClose } ); + edButtons[60] = new qt.TagButton( 'ins', 'ins', '', '', '', '', '', { ariaLabel: quicktagsL10n.ins, ariaLabelClose: quicktagsL10n.insClose } ); + edButtons[70] = new qt.ImgButton(); // special case + edButtons[80] = new qt.TagButton( 'ul', 'ul', '\n\n', '', '', '', { ariaLabel: quicktagsL10n.ul, ariaLabelClose: quicktagsL10n.ulClose } ); + edButtons[90] = new qt.TagButton( 'ol', 'ol', '
      \n', '
    \n\n', '', '', '', { ariaLabel: quicktagsL10n.ol, ariaLabelClose: quicktagsL10n.olClose } ); + edButtons[100] = new qt.TagButton( 'li', 'li', '\t
  • ', '
    • \n', '', '', '', { ariaLabel: quicktagsL10n.li, ariaLabelClose: quicktagsL10n.liClose } ); + edButtons[110] = new qt.TagButton( 'code', 'code', '', '', '', '', '', { ariaLabel: quicktagsL10n.code, ariaLabelClose: quicktagsL10n.codeClose } ); + edButtons[120] = new qt.TagButton( 'more', 'more', '\n\n', '', '', '', '', { ariaLabel: quicktagsL10n.more } ); edButtons[140] = new qt.CloseButton(); })(); diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index f01d4c701f..bd53a7b335 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -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' );