Added aria-label attribute wherever missing for accessibility.

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;

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>' +

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',

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));

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);

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

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',
                     }),

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),
           }),

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',
                 }),

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">

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>

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',

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',
           }),