mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2024-12-25 08:21:04 -06:00
Fixed some accessibility issues in the dialogs:
1) Aria-label additions at few missing places. 2) Label additions with 'sr-only' class where hidden labels required. 3) Converted label to span to solve accessibility error. Fixes #4608
This commit is contained in:
Pradip Parkale
Akshay Joshi
parent
83785da1bc
commit
96361656e4
@ -20,6 +20,7 @@ Bug fixes
|
||||
*********
|
||||
|
||||
| `Issue #4237 <https://redmine.postgresql.org/issues/4237>`_ - Fix an issue where the user can not change the value of DateTime picker control using keyboard.
|
||||
| `Issue #4608 <https://redmine.postgresql.org/issues/4608>`_ - Fixed some accessibility issues in the dialogs.
|
||||
| `Issue #4942 <https://redmine.postgresql.org/issues/4942>`_ - Fixed chrome driver download utility issue for Ubuntu.
|
||||
| `Issue #5143 <https://redmine.postgresql.org/issues/5143>`_ - Fix an accessibility issue to maximize the panel for all alertify dialog.
|
||||
| `Issue #5221 <https://redmine.postgresql.org/issues/5221>`_ - Improve logic to get the DDL statements as a part of the comparison.
|
||||
@ -212,7 +212,7 @@ define('pgadmin.node.fts_configuration', [
|
||||
' </div>',
|
||||
' <div class="col-6" header="token"></div>',
|
||||
' <div class="col-2">',
|
||||
' <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
|
||||
' <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ><span class="sr-only">Add Token</span></button>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<form name="frmPassword" id="frmPassword" style="height: 100%; width: 100%" onsubmit="return false;">
|
||||
<div>
|
||||
<div><label class="font-weight-bold" for="password">{{ _('Please enter the password for the user \'{0}\' to connect the server - "{1}"').format(username,
|
||||
server_label) }}</label></div>
|
||||
<div><span class="font-weight-bold" >{{ _('Please enter the password for the user \'{0}\' to connect the server - "{1}"').format(username,
|
||||
server_label) }}</span></div>
|
||||
<div class="input-group row py-2">
|
||||
<span class="col-sm-2 col-form-label" aria-hidden="true">Password</span>
|
||||
<label for="password" class="col-sm-2 col-form-label" aria-hidden="true">Password</label>
|
||||
<div class="col-sm-10">
|
||||
<input id="password" class="form-control" name="password" type="password">
|
||||
</div>
|
||||
|
||||
@ -1581,7 +1581,7 @@ define([
|
||||
showGridControl: function(data) {
|
||||
var self = this,
|
||||
gridHeader = ['<div class=\'subnode-header\'>',
|
||||
' <label class=\'control-label pg-el-sm-10\'>' + data.label + '</label>',
|
||||
' <span class=\'control-label pg-el-sm-10\'>' + data.label + '</span>',
|
||||
' <button aria-label="' + _('Add') + '" class=\'btn btn-sm-sq btn-secondary add fa fa-plus\' title=\'' + _('Add new row') + '\'></button>',
|
||||
'</div>',
|
||||
].join('\n'),
|
||||
@ -2890,41 +2890,40 @@ define([
|
||||
},
|
||||
|
||||
down: function() {
|
||||
let $el = this.$el.find('.datetimepicker-input');
|
||||
let currdate = $el.data('datetimepicker').date().clone();
|
||||
if (this.$el.find('.datepicker').is(':visible')) {
|
||||
let $el = this.$el.find('.datetimepicker-input');
|
||||
let currdate = $el.data('datetimepicker').date().clone();
|
||||
$el.datetimepicker('date', currdate.add(7, 'd'));
|
||||
} else {
|
||||
let $el = this.$el.find('.datetimepicker-input');
|
||||
let currdate = $el.data('datetimepicker').date().clone();
|
||||
$el.datetimepicker('date', currdate.subtract(1, 'm'));
|
||||
}
|
||||
},
|
||||
|
||||
up: function() {
|
||||
let $el = this.$el.find('.datetimepicker-input');
|
||||
let currdate = $el.data('datetimepicker').date().clone();
|
||||
|
||||
if (this.$el.find('.datepicker').is(':visible')) {
|
||||
let $el = this.$el.find('.datetimepicker-input');
|
||||
let currdate = $el.data('datetimepicker').date().clone();
|
||||
$el.datetimepicker('date', currdate.subtract(7, 'd'));
|
||||
} else {
|
||||
let $el = this.$el.find('.datetimepicker-input');
|
||||
let currdate = $el.data('datetimepicker').date().clone();
|
||||
$el.datetimepicker('date', currdate.add(1, 'm'));
|
||||
}
|
||||
},
|
||||
|
||||
left: function() {
|
||||
let $el = this.$el.find('.datetimepicker-input');
|
||||
let currdate = $el.data('datetimepicker').date().clone();
|
||||
|
||||
if (this.$el.find('.datepicker').is(':visible')) {
|
||||
let $el = this.$el.find('.datetimepicker-input');
|
||||
let currdate = $el.data('datetimepicker').date().clone();
|
||||
$el.datetimepicker('date', currdate.subtract(1, 'd'));
|
||||
}
|
||||
},
|
||||
|
||||
right: function() {
|
||||
let $el = this.$el.find('.datetimepicker-input');
|
||||
let currdate = $el.data('datetimepicker').date().clone();
|
||||
|
||||
if (this.$el.find('.datepicker').is(':visible')) {
|
||||
let $el = this.$el.find('.datetimepicker-input');
|
||||
let currdate = $el.data('datetimepicker').date().clone();
|
||||
$el.datetimepicker('date', currdate.add(1, 'd'));
|
||||
}
|
||||
},
|
||||
@ -3193,7 +3192,7 @@ define([
|
||||
template: _.template([
|
||||
'<label class="<%=Backform.controlLabelClassName%> keyboard-shortcut-label"><%=label%></label>',
|
||||
'<div class="<%=Backform.controlsClassName%>">',
|
||||
' <input type="<%=type%>" class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>" oncopy="return false; oncut="return false; onpaste="return false;" maxlength="<%=maxlength%>" value="<%-value%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
|
||||
' <input aria-label="<%=name%>" type="<%=type%>" class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>" oncopy="return false; oncut="return false; onpaste="return false;" maxlength="<%=maxlength%>" value="<%-value%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
|
||||
' <% if (helpMessage && helpMessage.length) { %>',
|
||||
' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
|
||||
' <% } %>',
|
||||
|
||||
@ -698,6 +698,7 @@ define([
|
||||
$('<input>', {
|
||||
tabIndex: 0,
|
||||
type: 'checkbox',
|
||||
'aria-label': gettext('data toggle'),
|
||||
}).prop('checked', rawValue).prop('disabled', !editable).attr('data-toggle', 'toggle')
|
||||
.attr('data-size', options.size).attr('data-on', options.onText).attr('data-off', options.offText)
|
||||
.attr('data-width', options.width).attr('data-height', options.height)
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
// This software is released under the PostgreSQL Licence
|
||||
//
|
||||
//////////////////////////////////////////////////////////////
|
||||
|
||||
define([
|
||||
'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
|
||||
'pgadmin.alertifyjs', 'sources/pgadmin', 'pgadmin.browser', 'backbone',
|
||||
@ -277,6 +276,7 @@ define([
|
||||
type: 'button',
|
||||
url: 'maintenance.html',
|
||||
label: gettext('Maintenance'),
|
||||
'aria-label': gettext('Object Help'),
|
||||
},
|
||||
}, {
|
||||
text: '',
|
||||
@ -417,7 +417,6 @@ define([
|
||||
prepare: function() {
|
||||
// Main maintenance tool dialog container
|
||||
var $container = $('<div class=\'maintenance_dlg\'></div>');
|
||||
|
||||
var t = pgBrowser.tree,
|
||||
i = t.selected(),
|
||||
d = i && i.length == 1 ? t.itemData(i) : undefined,
|
||||
|
||||
@ -38,6 +38,7 @@ export class RestoreDialogWrapper extends DialogWrapper {
|
||||
type: 'button',
|
||||
url: 'backup.html',
|
||||
label: gettext('Restore'),
|
||||
'aria-label': gettext('Object Help'),
|
||||
},
|
||||
}, {
|
||||
text: '',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user