Set explicit aria-label to JStoolbar items

pull/3989/head
Oliver Günther 9 years ago
parent 3662f26824
commit e445bdf7a7
  1. 4
      app/assets/javascripts/jstoolbar/jstoolbar.js
  2. 1
      app/assets/stylesheets/_jstoolbar.sass
  3. 19
      frontend/app/ui_components/wiki-toolbar-directive.js
  4. 9
      lib/redmine/wiki_formatting/textile/helper.rb

@ -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+')';

@ -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

@ -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);
});
};

@ -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}'));

Loading…
Cancel
Save