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([ titleTmpl = _.template([
'<div class=\'subnode-header\'>', '<div class=\'subnode-header\'>',
'<label class=\'control-label\'><%-label%></label>', '<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')), '</div>'].join('\n')),
$gridBody = $gridBody =
$('<div class=\'pgadmin-control-group backgrid form-group col-xs-12 object subnode\'></div>').append( $('<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() { alertify.pgDialogBuild = function() {
this.set('onshow', function() { this.set('onshow', function() {
this.elements.dialog.classList.add('pg-el-container'); 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); alertifyDialogResized.apply(this, arguments);
}); });
this.set('onresize', alertifyDialogStartResizing.bind(this, true)); 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; return alertify;
}); });

View File

@@ -983,7 +983,7 @@ define([
gridHeader = _.template([ gridHeader = _.template([
'<div class="subnode-header">', '<div class="subnode-header">',
' <label class="control-label pg-el-sm-10"><%-label%></label>', ' <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>', '</div>',
].join('\n')), ].join('\n')),
gridBody = $('<div class="pgadmin-control-group backgrid form-group pg-el-xs-12 object subnode"></div>').append( 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 // Insert Edit Cell into Grid
if (data.disabled == false && data.canEdit) { if (data.disabled == false && data.canEdit) {
var editCell = Backgrid.Extension.ObjectCell.extend({ var editCell = Backgrid.Extension.ObjectCell.extend({
schema: gridSchema.schema, schema: gridSchema.schema
}); });
gridSchema.columns.unshift({ gridSchema.columns.unshift({
@@ -1246,7 +1246,7 @@ define([
var self = this, var self = this,
gridHeader = ['<div class=\'subnode-header\'>', gridHeader = ['<div class=\'subnode-header\'>',
' <label class=\'control-label pg-el-sm-10\'>' + data.label + '</label>', ' <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>', '</div>',
].join('\n'), ].join('\n'),
gridBody = $('<div class=\'pgadmin-control-group backgrid form-group pg-el-xs-12 object subnode\'></div>').append(gridHeader); 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) { if (editable) {
this.$el.html( 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( this.model.trigger(
'pg-sub-node:opened', this.model, this 'pg-sub-node:opened', this.model, this
@@ -345,7 +345,7 @@ define([
}, },
render: function() { render: function() {
this.$el.empty(); 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(); this.delegateEvents();
if (this.grabFocus) if (this.grabFocus)
this.$el.focus(); this.$el.focus();
@@ -422,7 +422,7 @@ define([
}, },
render: function() { render: function() {
this.$el.empty(); 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(); this.delegateEvents();
return this; return this;
}, },