From e445bdf7a7e2c0b99956e855e7e0c75ca73a57e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Tue, 8 Dec 2015 16:50:09 +0100
Subject: [PATCH] Set explicit aria-label to JStoolbar items

---
 app/assets/javascripts/jstoolbar/jstoolbar.js |  4 +---
 app/assets/stylesheets/_jstoolbar.sass        |  1 +
 .../ui_components/wiki-toolbar-directive.js   | 19 ++++++++++---------
 lib/redmine/wiki_formatting/textile/helper.rb |  9 +++------
 4 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/jstoolbar/jstoolbar.js b/app/assets/javascripts/jstoolbar/jstoolbar.js
index 229d966575..ebb2929afa 100644
--- a/app/assets/javascripts/jstoolbar/jstoolbar.js
+++ b/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+')';
diff --git a/app/assets/stylesheets/_jstoolbar.sass b/app/assets/stylesheets/_jstoolbar.sass
index 70a3016bdb..6bbbf954d5 100644
--- a/app/assets/stylesheets/_jstoolbar.sass
+++ b/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
diff --git a/frontend/app/ui_components/wiki-toolbar-directive.js b/frontend/app/ui_components/wiki-toolbar-directive.js
index 157dfbf04e..f2f2f24f74 100644
--- a/frontend/app/ui_components/wiki-toolbar-directive.js
+++ b/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(&quot;' + window.appBasePath + '/help/wiki_syntax&quot;, &quot;&quot;, ' +
                           '&quot;resizable=yes, location=no, width=600, height=640, ' +
                           'menubar=no, status=no, scrollbars=yes&quot;); 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);
       });
     };
diff --git a/lib/redmine/wiki_formatting/textile/helper.rb b/lib/redmine/wiki_formatting/textile/helper.rb
index a7f382411e..83fd9da7a4 100644
--- a/lib/redmine/wiki_formatting/textile/helper.rb
+++ b/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}'));