Set explicit aria-label to JStoolbar items

app/assets/javascripts/jstoolbar/jstoolbar.js

@@ -81,11 +81,9 @@ jsButton.prototype.draw = function() {
 
   var button = document.createElement('button');
   button.setAttribute('type','button');
+  button.setAttribute('aria-label', this.title);
   if (this.className) button.className = this.className;
   button.title = this.title;
-  var span = document.createElement('span');
-  span.appendChild(document.createTextNode(this.title));
-  button.appendChild(span);
 
   if (this.icon != undefined) {
     button.style.backgroundImage = 'url('+this.icon+')';

app/assets/stylesheets/_jstoolbar.sass

@@ -90,6 +90,7 @@ $jstoolbar--icon-active-background: #eee
     font-size: 0.8125rem
     padding: 0.35rem
     line-height: 1rem
+    @extend .icon-help1
 
     &:before
       color: $body-font-color

frontend/app/ui_components/wiki-toolbar-directive.js

@@ -27,24 +27,24 @@
 //++
 
 module.exports = function() {
+  var help_link_title = I18n.t('js.inplace.link_formatting_help');
   var HELP_LINK_ONCLICK = 'window.open("' + window.appBasePath + '/help/wiki_syntax", "", ' +
                           '"resizable=yes, location=no, width=600, height=640, ' +
                           'menubar=no, status=no, scrollbars=yes"); return false;',
-      HELP_LINK_HTML = jQuery('<button title="' + I18n.t('js.inplace.link_formatting_help') + '"' +
-                              ' class="jstb_help icon icon-help1 icon-small" ' +
+      HELP_LINK_HTML = jQuery('<button title="' + help_link_title + '"' +
+                              ' class="jstb_help" ' +
                               ' type="button" ' +
-                              'onclick="' + HELP_LINK_ONCLICK + '">' +
-                              '<span class="hidden-for-sighted">' +
-                              I18n.t('js.inplace.link_formatting_help') +
-                              '</span></button>')[0],
+                              ' aria-label="' + help_link_title + '"' +
+                              'onclick="' + HELP_LINK_ONCLICK + '"></button>')[0],
       PREVIEW_ENABLE_TEXT = I18n.t('js.inplace.btn_preview_enable'),
       PREVIEW_DISABLE_TEXT = I18n.t('js.inplace.btn_preview_disable'),
       PREVIEW_BUTTON_CLASS = 'jstb_preview',
       PREVIEW_BUTTON_ATTRIBUTES = {
         'class': PREVIEW_BUTTON_CLASS + ' icon-preview icon-small',
-        type: 'button',
-        title: PREVIEW_ENABLE_TEXT,
-        text: ''
+        'type': 'button',
+        'title': PREVIEW_ENABLE_TEXT,
+        'aria-label': PREVIEW_ENABLE_TEXT,
+        'text': ''
       };
 
   function link(scope, element) {
@@ -64,6 +64,7 @@ module.exports = function() {
 
         element.closest('.inplace-edit--write-value')
                .find('.' + PREVIEW_BUTTON_CLASS).attr('title', title)
+                                                .attr('aria-label', title)
                                                 .toggleClass(toggledClasses);
       });
     };

lib/redmine/wiki_formatting/textile/helper.rb

@@ -39,13 +39,10 @@ module Redmine
           help_button = content_tag :button,
                                     '',
                                     type: 'button',
-                                    class: 'jstb_help icon icon-help',
+                                    class: 'jstb_help',
                                     onclick: open_help,
-                                    title: l(:setting_text_formatting) do
-                                      content_tag :span, class: 'hidden-for-sighted' do
-                                        l(:setting_text_formatting)
-                                      end
-                                    end
+                                    'aria-label': l(:setting_text_formatting),
+                                    title: l(:setting_text_formatting)
 
           javascript_tag(<<-EOF)
             var wikiToolbar = new jsToolBar($('#{field_id}'));