Replace tooltip by title and aria-label
As we display only text, it is more efficient to use title attribute. But we must also set aria-label because not all screen readers read the title. We add also the missing tooltip on some buttons. issue6828 review41201002
This commit is contained in:
Cédric Krier committed
1 parent
48f8d37e7e
commit
59918ccc77
5 files changed
+64
-47
No files matched your search
@@ -803,10 +803,8 @@
|
||||
tip = Sao.i18n.gettext('By: ') +
|
||||
users.join(Sao.i18n.gettext(', '));
|
||||
}
|
||||
counter.data('toggle', 'tooltip');
|
||||
counter.text(users.length || '');
|
||||
counter.attr('title', tip);
|
||||
counter.tooltip();
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
|
||||
+13
-10
@@ -45,7 +45,8 @@
|
||||
var but_submit = jQuery('<button/>', {
|
||||
'type': 'submit',
|
||||
'class': 'btn btn-default',
|
||||
'aria-label': Sao.i18n.gettext('Search')
|
||||
'aria-label': Sao.i18n.gettext("Search"),
|
||||
'title': Sao.i18n.gettext("Search"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-search'
|
||||
}));
|
||||
@@ -55,7 +56,8 @@
|
||||
'class': 'btn btn-default dropdown-toggle',
|
||||
'data-toggle': 'dropdown',
|
||||
'aria-expanded': false,
|
||||
'aria-label': Sao.i18n.gettext('Bookmarks'),
|
||||
'aria-label': Sao.i18n.gettext("Bookmarks"),
|
||||
'title': Sao.i18n.gettext("Bookmarks"),
|
||||
'id': 'bookmarks'
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-bookmark',
|
||||
@@ -115,7 +117,8 @@
|
||||
this.but_prev = jQuery('<button/>', {
|
||||
type: 'button',
|
||||
'class': 'btn btn-default',
|
||||
'aria-label': Sao.i18n.gettext('Previous')
|
||||
'aria-label': Sao.i18n.gettext("Previous"),
|
||||
'title': Sao.i18n.gettext("Previous"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-menu-left',
|
||||
'aria-hidden': true
|
||||
@@ -124,7 +127,8 @@
|
||||
this.but_next = jQuery('<button/>', {
|
||||
type: 'button',
|
||||
'class': 'btn btn-default',
|
||||
'aria-label': Sao.i18n.gettext('Next')
|
||||
'aria-label': Sao.i18n.gettext("Next"),
|
||||
'title': Sao.i18n.gettext("Next"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-menu-right',
|
||||
'aria-hidden': true
|
||||
@@ -201,17 +205,18 @@
|
||||
},
|
||||
set_star: function(star) {
|
||||
var glyphicon = this.but_star.children('span.glyphicon');
|
||||
var title;
|
||||
if (star) {
|
||||
glyphicon.removeClass('glyphicon-star-empty');
|
||||
glyphicon.addClass('glyphicon-star');
|
||||
this.but_star.attr('aria-label',
|
||||
Sao.i18n.gettext('Remove this bookmark'));
|
||||
title = Sao.i18n.gettext("Remove this bookmark");
|
||||
} else {
|
||||
glyphicon.removeClass('glyphicon-star');
|
||||
glyphicon.addClass('glyphicon-star-empty');
|
||||
this.but_star.attr('aria-label',
|
||||
Sao.i18n.gettext('Bookmark this filter'));
|
||||
title = Sao.i18n.gettext('Bookmark this filter');
|
||||
}
|
||||
this.but_star.attr('title', title);
|
||||
this.but_star.attr('aria-label', title);
|
||||
},
|
||||
get_star: function() {
|
||||
var glyphicon = this.but_star.children('span.glyphicon');
|
||||
@@ -307,7 +312,6 @@
|
||||
return;
|
||||
}
|
||||
var counter = this.tab_counter[idx];
|
||||
counter.data('toggle', 'tooltip');
|
||||
if (count === null) {
|
||||
counter.attr('title', '');
|
||||
counter.text('');
|
||||
@@ -319,7 +323,6 @@
|
||||
}
|
||||
counter.text(text);
|
||||
}
|
||||
counter.tooltip();
|
||||
},
|
||||
do_search: function() {
|
||||
return this.screen.search_filter(this.get_text());
|
||||
|
||||
+4
-11
@@ -217,10 +217,7 @@
|
||||
'class': 'glyphicon ' + item.icon,
|
||||
'aria-hidden': 'true'
|
||||
}))
|
||||
.appendTo(group)
|
||||
.data('toggle', 'tooltip')
|
||||
.data('placement', 'bottom')
|
||||
.tooltip();
|
||||
.appendTo(group);
|
||||
this.buttons[item.id].click(this[item.id].bind(this));
|
||||
};
|
||||
this.menu_def().forEach(add_button.bind(this));
|
||||
@@ -262,7 +259,7 @@
|
||||
if (!next.length) {
|
||||
next = tab.prevAll('li').first();
|
||||
}
|
||||
tab.tooltip('destroy').remove();
|
||||
tab.remove();
|
||||
content.remove();
|
||||
Sao.Tab.tabs.splice(Sao.Tab.tabs.indexOf(this), 1);
|
||||
if (next) {
|
||||
@@ -277,7 +274,7 @@
|
||||
set_name: function(name) {
|
||||
this.name = name;
|
||||
this.name_el.text(Sao.common.ellipsize(name, 20));
|
||||
this.name_el.parents('li').first().attr('title', name).tooltip();
|
||||
this.name_el.parents('li').first().attr('title', name);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -373,7 +370,6 @@
|
||||
.append(tab.name_el);
|
||||
jQuery('<li/>', {
|
||||
'role': 'presentation',
|
||||
'data-toggle': 'tooltip',
|
||||
'data-placement': 'bottom',
|
||||
id: 'nav-' + tab.id
|
||||
}).append(tab_link)
|
||||
@@ -482,10 +478,7 @@
|
||||
}))
|
||||
.append(jQuery('<span/>', {
|
||||
'class': 'caret'
|
||||
}))
|
||||
.data('toggle', 'tooltip')
|
||||
.data('placement', 'bottom')
|
||||
.tooltip())
|
||||
})))
|
||||
.append(jQuery('<ul/>', {
|
||||
'class': 'dropdown-menu',
|
||||
'role': 'menu',
|
||||
|
||||
+47
-22
@@ -533,9 +533,7 @@ function eval_pyson(value){
|
||||
}
|
||||
|
||||
if (attributes.help) {
|
||||
widget.el.data('toggle', 'tooltip');
|
||||
widget.el.attr('title', attributes.help);
|
||||
widget.el.tooltip();
|
||||
}
|
||||
},
|
||||
resize: function() {
|
||||
@@ -1397,7 +1395,9 @@ function eval_pyson(value){
|
||||
'class': 'input-group-btn'
|
||||
}).append(jQuery('<button/>', {
|
||||
'class': 'datepickerbutton btn btn-default',
|
||||
'type': 'button'
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext("Open the calendar"),
|
||||
'title': Sao.i18n.gettext("Open the calendar"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-calendar'
|
||||
}))).appendTo(this.date);
|
||||
@@ -2148,24 +2148,29 @@ function eval_pyson(value){
|
||||
return;
|
||||
}
|
||||
this.set_text(field.get_client(record));
|
||||
var primary, secondary;
|
||||
var primary, tooltip1, secondary, tooltip2;
|
||||
value = field.get(record);
|
||||
if (this.has_target(value)) {
|
||||
primary = 'glyphicon-folder-open';
|
||||
tooltip1 = Sao.i18n.gettext("Open the record <F2>");
|
||||
secondary = 'glyphicon-erase';
|
||||
tooltip2 = Sao.i18n.gettext("Clear the field <Del>");
|
||||
} else {
|
||||
primary = null;
|
||||
tooltip1 = '';
|
||||
secondary = 'glyphicon-search';
|
||||
tooltip2 = Sao.i18n.gettext("Search a record <F2>");
|
||||
}
|
||||
if (this.entry.prop('readonly')) {
|
||||
secondary = null;
|
||||
}
|
||||
[
|
||||
[primary, this.but_primary],
|
||||
[secondary, this.but_secondary]
|
||||
[primary, tooltip1, this.but_primary],
|
||||
[secondary, tooltip2, this.but_secondary]
|
||||
].forEach(function(items) {
|
||||
var icon_name = items[0];
|
||||
var button = items[1];
|
||||
var tooltip = items[1];
|
||||
var button = items[2];
|
||||
var icon = button.find('.glyphicon');
|
||||
icon.removeClass().addClass('glyphicon');
|
||||
// don't use .hide/.show because the display value is not
|
||||
@@ -2176,6 +2181,8 @@ function eval_pyson(value){
|
||||
button.parent().css('display', 'table-cell');
|
||||
icon.addClass(icon_name);
|
||||
}
|
||||
button.attr('aria-label', tooltip);
|
||||
button.attr('title', tooltip);
|
||||
});
|
||||
},
|
||||
focus: function() {
|
||||
@@ -2457,7 +2464,8 @@ function eval_pyson(value){
|
||||
this.el.addClass('form-inline');
|
||||
this.select = jQuery('<select/>', {
|
||||
'class': 'form-control input-sm',
|
||||
'aria-label': attributes.string
|
||||
'aria-label': attributes.string,
|
||||
'title': attributes.string,
|
||||
});
|
||||
this.el.prepend(jQuery('<span/>').text('-'));
|
||||
this.el.prepend(this.select);
|
||||
@@ -2641,7 +2649,8 @@ function eval_pyson(value){
|
||||
this.but_switch = jQuery('<button/>', {
|
||||
'class': 'btn btn-default btn-sm',
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext('Switch')
|
||||
'aria-label': Sao.i18n.gettext("Switch"),
|
||||
'title': Sao.i18n.gettext("Switch"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-list-alt'
|
||||
})).appendTo(buttons);
|
||||
@@ -2650,7 +2659,8 @@ function eval_pyson(value){
|
||||
this.but_previous = jQuery('<button/>', {
|
||||
'class': 'btn btn-default btn-sm',
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext('Previous')
|
||||
'aria-label': Sao.i18n.gettext("Previous"),
|
||||
'title': Sao.i18n.gettext("Previous"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-chevron-left'
|
||||
})).appendTo(buttons);
|
||||
@@ -2664,7 +2674,8 @@ function eval_pyson(value){
|
||||
this.but_next = jQuery('<button/>', {
|
||||
'class': 'btn btn-default btn-sm',
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext('Next')
|
||||
'aria-label': Sao.i18n.gettext("Next"),
|
||||
'title': Sao.i18n.gettext("Next"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-chevron-right'
|
||||
})).appendTo(buttons);
|
||||
@@ -2677,7 +2688,8 @@ function eval_pyson(value){
|
||||
this.but_add = jQuery('<button/>', {
|
||||
'class': 'btn btn-default btn-sm',
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext('Add')
|
||||
'aria-label': Sao.i18n.gettext("Add"),
|
||||
'title': Sao.i18n.gettext("Add"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-plus'
|
||||
})).appendTo(buttons);
|
||||
@@ -2686,7 +2698,8 @@ function eval_pyson(value){
|
||||
this.but_remove = jQuery('<button/>', {
|
||||
'class': 'btn btn-default btn-sm',
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext('Remove')
|
||||
'aria-label': Sao.i18n.gettext("Remove"),
|
||||
'title': Sao.i18n.gettext("Remove"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-minus'
|
||||
})).appendTo(buttons);
|
||||
@@ -2696,7 +2709,8 @@ function eval_pyson(value){
|
||||
this.but_new = jQuery('<button/>', {
|
||||
'class': 'btn btn-default btn-sm',
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext('New')
|
||||
'aria-label': Sao.i18n.gettext("New"),
|
||||
'title': Sao.i18n.gettext("New"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-edit'
|
||||
})).appendTo(buttons);
|
||||
@@ -2705,7 +2719,8 @@ function eval_pyson(value){
|
||||
this.but_open = jQuery('<button/>', {
|
||||
'class': 'btn btn-default btn-sm',
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext('Open')
|
||||
'aria-label': Sao.i18n.gettext("Open"),
|
||||
'title': Sao.i18n.gettext("Open"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-folder-open'
|
||||
})).appendTo(buttons);
|
||||
@@ -2714,7 +2729,8 @@ function eval_pyson(value){
|
||||
this.but_del = jQuery('<button/>', {
|
||||
'class': 'btn btn-default btn-sm',
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext('Delete')
|
||||
'aria-label': Sao.i18n.gettext("Delete"),
|
||||
'title': Sao.i18n.gettext("Delete"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-trash'
|
||||
})).appendTo(buttons);
|
||||
@@ -2723,7 +2739,8 @@ function eval_pyson(value){
|
||||
this.but_undel = jQuery('<button/>', {
|
||||
'class': 'btn btn-default btn-sm',
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext('Undelete')
|
||||
'aria-label': Sao.i18n.gettext("Undelete"),
|
||||
'title': Sao.i18n.gettext("Undelete"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-repeat'
|
||||
})).appendTo(buttons);
|
||||
@@ -3144,7 +3161,8 @@ function eval_pyson(value){
|
||||
this.but_add = jQuery('<button/>', {
|
||||
'class': 'btn btn-default btn-sm',
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext('Add')
|
||||
'aria-label': Sao.i18n.gettext("Add"),
|
||||
'title': Sao.i18n.gettext("Add"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-plus'
|
||||
})).appendTo(buttons);
|
||||
@@ -3153,7 +3171,8 @@ function eval_pyson(value){
|
||||
this.but_remove = jQuery('<button/>', {
|
||||
'class': 'btn btn-default btn-sm',
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext('Remove')
|
||||
'aria-label': Sao.i18n.gettext("Remove"),
|
||||
'title': Sao.i18n.gettext("Remove"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-minus'
|
||||
})).appendTo(buttons);
|
||||
@@ -3361,7 +3380,9 @@ function eval_pyson(value){
|
||||
|
||||
this.but_save_as = jQuery('<button/>', {
|
||||
'class': 'btn btn-default',
|
||||
'type': 'button'
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext("Save As"),
|
||||
'title': Sao.i18n.gettext("Save As..."),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-save'
|
||||
})).appendTo(group);
|
||||
@@ -3369,7 +3390,9 @@ function eval_pyson(value){
|
||||
|
||||
this.but_select = jQuery('<button/>', {
|
||||
'class': 'btn btn-default',
|
||||
'type': 'button'
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext("Select"),
|
||||
'title': Sao.i18n.gettext("Select..."),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-search'
|
||||
})).appendTo(group);
|
||||
@@ -3377,7 +3400,9 @@ function eval_pyson(value){
|
||||
|
||||
this.but_clear = jQuery('<button/>', {
|
||||
'class': 'btn btn-default',
|
||||
'type': 'button'
|
||||
'type': 'button',
|
||||
'aria-label': Sao.i18n.gettext("Clear"),
|
||||
'title': Sao.i18n.gettext("Clear"),
|
||||
}).append(jQuery('<span/>', {
|
||||
'class': 'glyphicon glyphicon-erase'
|
||||
})).appendTo(group);
|
||||
|
||||
@@ -115,9 +115,7 @@
|
||||
}
|
||||
}
|
||||
if (column.attributes.help) {
|
||||
label.data('toggle', 'tooltip');
|
||||
label.attr('title', column.attributes.help);
|
||||
label.tooltip();
|
||||
}
|
||||
if (column.sortable) {
|
||||
var arrow = jQuery('<span/>');
|
||||
|
||||
Reference in new issue
Block a user