Ensure clickable images/buttons have appropriate tooltips for screen readers. Fixes #2904

This commit is contained in:
Khushboo Vashi 2018-01-22 10:37:56 +00:00 committed by Dave Page
parent 0ee9f09bbd
commit ca80cfa04a
4 changed files with 15 additions and 7 deletions

View File

@ -330,7 +330,7 @@ define([
titleTmpl = _.template([
'<div class=\'subnode-header\'>',
'<label class=\'control-label\'><%-label%></label>',
'<button class=\'btn-sm btn-default add fa fa-plus\' <%=canAdd ? \'\' : \'disabled="disabled"\'%>></button>',
'<button class=\'btn-sm btn-default add fa fa-plus\' title=\'' + _('Add new row') + '\' <%=canAdd ? \'\' : \'disabled="disabled"\'%>></button>',
'</div>'].join('\n')),
$gridBody =
$('<div class=\'pgadmin-control-group backgrid form-group col-xs-12 object subnode\'></div>').append(

View File

@ -190,6 +190,8 @@ define([
alertify.pgDialogBuild = function() {
this.set('onshow', function() {
this.elements.dialog.classList.add('pg-el-container');
$(this.elements.commands.close).attr('title', gettext('Close'));
$(this.elements.commands.maximize).attr('title', gettext('Maximize'));
alertifyDialogResized.apply(this, arguments);
});
this.set('onresize', alertifyDialogStartResizing.bind(this, true));
@ -369,5 +371,11 @@ define([
},
});
// Confirm dialogue: Set title attribute
alertify.confirm().set({onshow:function() {
$(this.elements.commands.close).attr('title', gettext('Close'));
$(this.elements.commands.maximize).attr('title', gettext('Maximize'));
}});
return alertify;
});

View File

@ -983,7 +983,7 @@ define([
gridHeader = _.template([
'<div class="subnode-header">',
' <label class="control-label pg-el-sm-10"><%-label%></label>',
' <button class="btn-sm btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%>><%-add_label%></button>',
' <button class="btn-sm btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + _('Add new row') + '"><%-add_label%></button>',
'</div>',
].join('\n')),
gridBody = $('<div class="pgadmin-control-group backgrid form-group pg-el-xs-12 object subnode"></div>').append(
@ -1024,7 +1024,7 @@ define([
// Insert Edit Cell into Grid
if (data.disabled == false && data.canEdit) {
var editCell = Backgrid.Extension.ObjectCell.extend({
schema: gridSchema.schema,
schema: gridSchema.schema
});
gridSchema.columns.unshift({
@ -1246,7 +1246,7 @@ define([
var self = this,
gridHeader = ['<div class=\'subnode-header\'>',
' <label class=\'control-label pg-el-sm-10\'>' + data.label + '</label>',
' <button class=\'btn-sm btn-default add fa fa-plus\'></button>',
' <button class=\'btn-sm btn-default add fa fa-plus\' title=\'' + _('Add new row') + '\'></button>',
'</div>',
].join('\n'),
gridBody = $('<div class=\'pgadmin-control-group backgrid form-group pg-el-xs-12 object subnode\'></div>').append(gridHeader);

View File

@ -330,7 +330,7 @@ define([
if (editable) {
this.$el.html(
'<i class=\'fa fa-pencil-square subnode-edit-in-process\'></i>'
'<i class=\'fa fa-pencil-square subnode-edit-in-process\' title=\'' + _('Edit row') + '\'></i>'
);
this.model.trigger(
'pg-sub-node:opened', this.model, this
@ -345,7 +345,7 @@ define([
},
render: function() {
this.$el.empty();
this.$el.html('<i class=\'fa fa-pencil-square-o\'></i>');
this.$el.html('<i class=\'fa fa-pencil-square-o\' title=\'' + _('Edit row') + '\'></i>');
this.delegateEvents();
if (this.grabFocus)
this.$el.focus();
@ -422,7 +422,7 @@ define([
},
render: function() {
this.$el.empty();
this.$el.html('<i class=\'fa fa-trash\'></i>');
this.$el.html('<i class=\'fa fa-trash\' title=\'' + _('Delete row') + '\'></i>');
this.delegateEvents();
return this;
},