public inbox for [email protected]
help / color / mirror / Atom feedFrom: Nagesh Dhope <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [RM4772] [Accessibility] aria-label in missing places
Date: Tue, 31 Dec 2019 19:16:52 +0530
Message-ID: <CAA3zdZpV7wQFJXOQoapkAWMkxH4Sen3oUYx9WKCNvaFdx6Ugyw@mail.gmail.com> (raw)
Hi Hackers,
I have added an aria-label attribute where ever it is missing. PFA for the
same.
--
Thanks,
Nagesh
Attachments:
[application/octet-stream] pgadmin_aria_label_v2.patch (13.7K, 3-pgadmin_aria_label_v2.patch)
download | inline diff:
diff --git a/web/pgadmin/browser/static/js/toolbar.js b/web/pgadmin/browser/static/js/toolbar.js
index 75653ad..ff7c732 100644
--- a/web/pgadmin/browser/static/js/toolbar.js
+++ b/web/pgadmin/browser/static/js/toolbar.js
@@ -18,6 +18,7 @@ let _browserPanel = null;
let _defaultToolBarButtons = [
{
label: gettext('Filtered Rows'),
+ ariaLabel: gettext('Filtered Rows'),
btnClass: 'pg-font-icon icon-filter-table-toolbar',
text: '',
toggled: false,
@@ -27,6 +28,7 @@ let _defaultToolBarButtons = [
},
{
label: gettext('View Data'),
+ ariaLabel: gettext('View Data'),
btnClass: 'fa fa-table',
text: '',
toggled: false,
@@ -36,6 +38,7 @@ let _defaultToolBarButtons = [
},
{
label: gettext('Query Tool'),
+ ariaLabel: gettext('Query Tool'),
btnClass: 'pg-font-icon icon-query-tool',
text: '',
toggled: false,
@@ -57,7 +60,7 @@ function registerToolBarButton(btn) {
|| (_.findIndex(_browserPanel._buttonList,{name:btn.label}) < 0)) {
_browserPanel.addButton(
btn.label, btn.btnClass, btn.text, btn.label, btn.toggled,
- btn.toggleClass, btn.parentClass, btn.enabled
+ btn.toggleClass, btn.parentClass, btn.enabled, btn.ariaLabel
);
_toolbarButtons[btn.label] = btn;
diff --git a/web/pgadmin/browser/static/js/wizard.js b/web/pgadmin/browser/static/js/wizard.js
index 1576021..de7032c 100644
--- a/web/pgadmin/browser/static/js/wizard.js
+++ b/web/pgadmin/browser/static/js/wizard.js
@@ -82,10 +82,10 @@ define([
' </div>' +
' <% if (this.options.show_header_cancel_btn) { %>' +
' <div class="ml-auto">' +
- ' <button class="ajs-close wizard-cancel-event pull-right"' +
+ ' <button aria-label="' + gettext('Close') +'" tabindex="0" class="ajs-close wizard-cancel-event pull-right"' +
' title="' + gettext('Close') + '"></button>' +
' <% if (this.options.show_header_maximize_btn) { %>' +
- ' <button class="ajs-maximize wizard-maximize-event mr-1 pull-right"' +
+ ' <button aria-label="' + gettext('Maximize') + '" tabindex="0" class="ajs-maximize wizard-maximize-event mr-1 pull-right"' +
' title="' + gettext('Maximize') + '"></button>' +
' <% } %>' +
' </div>' +
@@ -121,14 +121,14 @@ define([
' </div> ' +
' <div class="alert-text"></div> ' +
' <div class="ml-auto close-error-bar"> ' +
- ' <a class="close-error fa fa-times text-danger"></a> ' +
+ ' <a aria-label="' + gettext('Close error bar') + '" class="close-error fa fa-times text-danger"></a> ' +
' </div> ' +
' </div> ' +
' </div> ' +
' </div>' +
' <div class="wizard-buttons d-flex">' +
' <div>' +
- ' <button title = "' + gettext('Help for this dialog.') + '"' +
+ ' <button tabindex="0" aria-label="' + gettext('Help') + '" title = "' + gettext('Help for this dialog.') + '"' +
' class="btn btn-secondary pull-left wizard-help" <%=this.options.wizard_help ? "" : "disabled" %>>' +
' <span class="fa fa-lg fa-question" role="img"></span></button>' +
' </div>' +
diff --git a/web/pgadmin/preferences/static/js/preferences.js b/web/pgadmin/preferences/static/js/preferences.js
index 16d4a29..08d5a68 100644
--- a/web/pgadmin/preferences/static/js/preferences.js
+++ b/web/pgadmin/preferences/static/js/preferences.js
@@ -424,6 +424,7 @@ define('pgadmin.preferences', [
name: 'dialog_help',
type: 'button',
label: gettext('Preferences'),
+ 'aria-label': gettext('Help'),
url: url_for(
'help.static', {
'filename': 'preferences.html',
diff --git a/web/pgadmin/static/js/alertify.pgadmin.defaults.js b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
index 78ffb21..4d78ce3 100644
--- a/web/pgadmin/static/js/alertify.pgadmin.defaults.js
+++ b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
@@ -260,6 +260,8 @@ define([
this.elements.dialog.classList.add('pg-el-container');
$(this.elements.commands.close).attr('title', gettext('Close'));
$(this.elements.commands.maximize).attr('title', gettext('Maximize'));
+ $(this.elements.commands.close).attr('aria-label', gettext('Close'));
+ $(this.elements.commands.maximize).attr('aria-label', gettext('Maximize'));
alertifyDialogResized.apply(this, arguments);
});
this.set('onresize', alertifyDialogStartResizing.bind(this, true));
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index eb08212..93aaa91 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -1257,7 +1257,7 @@ define([
gridHeader = _.template([
'<div class="subnode-header">',
' <label class="control-label pg-el-sm-10" id="<%=cId%>"><%-label%></label>',
- ' <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + _('Add new row') + '"><%-add_label%></button>',
+ ' <button aria-label="' + _('Add new row') + '" class="btn btn-sm-sq btn-secondary 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-12 object subnode "></div>').append(
@@ -1547,7 +1547,7 @@ define([
var self = this,
gridHeader = ['<div class=\'subnode-header\'>',
' <label class=\'control-label pg-el-sm-10\'>' + data.label + '</label>',
- ' <button class=\'btn btn-sm-sq btn-secondary add fa fa-plus\' title=\'' + _('Add new row') + '\'></button>',
+ ' <button aria-label="' + _('Add') + '" class=\'btn btn-sm-sq btn-secondary add fa fa-plus\' title=\'' + _('Add new row') + '\'></button>',
'</div>',
].join('\n'),
gridBody = $('<div class=\'pgadmin-control-group backgrid form-group pg-el-12 object subnode\'></div>').append(gridHeader);
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index 52bcbd9..b72d724 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -555,7 +555,7 @@ define([
var self = this;
this.$el.empty();
$(this.$el).attr('tabindex', 0);
- this.$el.html('<i class=\'fa fa-trash\' title=\'' + _('Delete row') + '\'></i>');
+ this.$el.html('<i aria-label="' + _('Delete row') + '" class=\'fa fa-trash\' title=\'' + _('Delete row') + '\'></i>');
// Listen for Tab/Shift-Tab key
this.$el.on('keydown', function(e) {
// with keyboard navigation on space key, mark row for deletion
diff --git a/web/pgadmin/static/js/sqleditor/filter_dialog.js b/web/pgadmin/static/js/sqleditor/filter_dialog.js
index 92ee6e0..a59c43f 100644
--- a/web/pgadmin/static/js/sqleditor/filter_dialog.js
+++ b/web/pgadmin/static/js/sqleditor/filter_dialog.js
@@ -70,6 +70,7 @@ let FilterDialog = {
name: 'dialog_help',
type: 'button',
label: gettext('Help'),
+ 'aria-label': gettext('Help'),
url: url_for('help.static', {
'filename': 'editgrid.html',
}),
diff --git a/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js b/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js
index dd92f61..078792d 100644
--- a/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js
+++ b/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js
@@ -53,6 +53,7 @@ export class BackupDialogWrapper extends DialogWrapper {
name: 'dialog_help',
type: 'button',
label: gettext('Backup'),
+ 'aria-label': gettext('Help'),
url: url_for('help.static', {
'filename': get_help_file(this.typeOfDialog),
}),
diff --git a/web/pgadmin/tools/datagrid/static/js/show_data.js b/web/pgadmin/tools/datagrid/static/js/show_data.js
index 5049710..0f4a806 100644
--- a/web/pgadmin/tools/datagrid/static/js/show_data.js
+++ b/web/pgadmin/tools/datagrid/static/js/show_data.js
@@ -130,6 +130,7 @@ function initFilterDialog(alertify, pgBrowser) {
name: 'dialog_help',
type: 'button',
label: gettext('Data Filter'),
+ 'aria-label': gettext('Help'),
url: url_for('help.static', {
'filename': 'viewdata_filter.html',
}),
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index 77f8f31..621d88d 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -53,7 +53,7 @@
</button>
</div>
<div class="btn-group mr-1" role="group" aria-label="">
- <button id="btn-find" type="button" class="btn btn-sm btn-secondary" title="{{ _('Find (Ctrl/Cmd+F)') }}">
+ <button id="btn-find" type="button" class="btn btn-sm btn-secondary" aria-label="{{ _('Find') }}" title="{{ _('Find (Ctrl/Cmd+F)') }}">
<i class="fa fa-search sql-icon-lg" aria-hidden="true" tabindex="0" role="img"></i>
</button>
<button id="btn-find-menu-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
@@ -151,7 +151,7 @@
<div class="btn-group mr-1" role="group" aria-label="">
<button id="btn-edit-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
- title="{{ _('Edit') }}" tabindex="0">
+ aria-label="{{ _('Edit') }}" title="{{ _('Edit') }}" tabindex="0">
<i class="fa fa-pencil-square-o sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
<ul class="dropdown-menu">
diff --git a/web/pgadmin/tools/debugger/templates/debugger/direct.html b/web/pgadmin/tools/debugger/templates/debugger/direct.html
index d469e5c..33042c9 100644
--- a/web/pgadmin/tools/debugger/templates/debugger/direct.html
+++ b/web/pgadmin/tools/debugger/templates/debugger/direct.html
@@ -56,6 +56,7 @@ try {
accesskey=""
tabindex="0"
autofocus="autofocus"
+ aria-label="{{ gettext('Step into') }}"
disabled>
<i class="fa fa-indent sql-icon-lg"></i>
</button>
@@ -63,6 +64,7 @@ try {
title=""
accesskey=""
tabindex="0"
+ aria-label="{{ gettext('Step over') }}"
disabled>
<i class="fa fa-outdent sql-icon-lg"></i>
</button>
@@ -70,6 +72,7 @@ try {
title=""
accesskey=""
tabindex="0"
+ aria-label="{{ gettext('Continue/Start') }}"
disabled>
<i class="fa fa-play-circle sql-icon-lg"></i>
</button>
@@ -79,6 +82,7 @@ try {
title=""
accesskey=""
tabindex="0"
+ aria-label="{{ gettext('Toggle breakpoint') }}"
disabled>
<i class="fa fa-circle sql-icon-lg"></i>
</button>
@@ -86,6 +90,7 @@ try {
title=""
accesskey=""
tabindex="0"
+ aria-label="{{ gettext('Clear all breakpoints') }}"
disabled>
<i class="fa fa-ban sql-icon-lg"></i>
</button>
@@ -95,6 +100,7 @@ try {
accesskey=""
title=""
tabindex="0"
+ aria-label="{{ gettext('Stop') }}"
disabled>
<i class="fa fa-stop-circle sql-icon-lg"></i>
</button>
diff --git a/web/pgadmin/tools/maintenance/static/js/maintenance.js b/web/pgadmin/tools/maintenance/static/js/maintenance.js
index 6b10e5e..0a6bbda 100644
--- a/web/pgadmin/tools/maintenance/static/js/maintenance.js
+++ b/web/pgadmin/tools/maintenance/static/js/maintenance.js
@@ -286,6 +286,7 @@ define([
name: 'dialog_help',
type: 'button',
label: gettext('Maintenance'),
+ 'aria-label': gettext('Help'),
url: url_for(
'help.static', {
'filename': 'maintenance_dialog.html',
diff --git a/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js b/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js
index 6365a76..22017e7 100644
--- a/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js
+++ b/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js
@@ -47,6 +47,7 @@ export class RestoreDialogWrapper extends DialogWrapper {
name: 'dialog_help',
type: 'button',
label: gettext('Restore'),
+ 'aria-label': gettext('Help'),
url: url_for('help.static', {
'filename': 'restore_dialog.html',
}),
view thread (2+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected]
Subject: Re: [RM4772] [Accessibility] aria-label in missing places
In-Reply-To: <CAA3zdZpV7wQFJXOQoapkAWMkxH4Sen3oUYx9WKCNvaFdx6Ugyw@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox