Fix an accessibility issue to maximize the panel for all alertify dialog. Fixes #5143

docs/en_US/release_notes.rst

@@ -11,6 +11,7 @@ notes for it.
 .. toctree::
    :maxdepth: 1
 
+   release_notes_4_20
    release_notes_4_19
    release_notes_4_18
    release_notes_4_17

docs/en_US/release_notes_4_20.rst

@@ -0,0 +1,20 @@
+************
+Version 4.20
+************
+
+Release date: 2020-04-02
+
+This release contains a number of bug fixes and new features since the release of pgAdmin4 4.19.
+
+New features
+************
+
+
+Housekeeping
+************
+
+
+Bug fixes
+*********
+
+| `Issue #5143 <https://redmine.postgresql.org/issues/5143>`_ -  Fix an accessibility issue to maximize the panel for all alertify dialog.

web/pgadmin/about/static/js/about.js

@@ -9,9 +9,9 @@
 
 define(
   ['jquery', 'alertify', 'sources/pgadmin', 'sources/gettext',
-    'sources/url_for',
+    'sources/url_for','sources/utils',
   ],
-  function($, alertify, pgAdmin, gettext, url_for) {
+  function($, alertify, pgAdmin, gettext, url_for, commonUtils) {
     pgAdmin = pgAdmin || window.pgAdmin || {};
 
     /* Return back, this has been called more than once */
@@ -43,8 +43,16 @@ define(
               build: function() {
                 alertify.pgDialogBuild.apply(this);
               },
+              hooks:{
+                onshow:function(){
+                  var container = $(this.elements.footer).find('button:not([disabled])');
+                  commonUtils.findAndSetFocus(container);
+                },
+              },
+
               prepare:function() {
                 this.setContent(this.message);
+
               },
             };
           });

web/pgadmin/static/js/alertify.pgadmin.defaults.js

@@ -8,8 +8,8 @@
 //////////////////////////////////////////////////////////////
 
 define([
-  'sources/gettext', 'alertify', 'jquery',
-], function(gettext, alertify, $) {
+  'sources/gettext', 'alertify', 'jquery', 'sources/utils',
+], function(gettext, alertify, $, commonUtils) {
   alertify.defaults.transition = 'zoom';
   alertify.defaults.theme.ok = 'btn btn-primary fa fa-lg fa-check pg-alertify-button';
   alertify.defaults.theme.cancel = 'btn btn-secondary fa fa-lg fa-times pg-alertify-button';
@@ -263,7 +263,15 @@ define([
       $(this.elements.commands.close).attr('aria-label', gettext('Close'));
       $(this.elements.commands.maximize).attr('aria-label', gettext('Maximize'));
       alertifyDialogResized.apply(this, arguments);
-    });
+      let self = this;
+
+      let cmds = Object.values(this.elements.commands);
+      $(cmds).on('keydown', 'button', (event) => {
+        if (event.shiftKey && event.keyCode == 9 && $(this).nextAll('button:not([disabled])').length == 0){
+          let container = $(self.elements.footer);
+          commonUtils.findAndSetFocus(container.find('button:not([disabled]):last'));
+        }
+      });    });
     this.set('onresize', alertifyDialogStartResizing.bind(this, true));
     this.set('onresized', alertifyDialogResized.bind(this, true));
     this.set('onmaximized', alertifyDialogResized);
@@ -279,6 +287,15 @@ define([
         this.__internal.buttons[i]['key'] = null;
       }
     }
+    let self = this;
+
+    $(this.elements.footer).on('keydown', 'button', function(event) {
+      if (!event.shiftKey && event.keyCode == 9 && $(this).nextAll('button:not([disabled])').length == 0) {
+        // set focus back to first editable input element of current active tab once we cycle through all enabled buttons.
+        commonUtils.findAndSetFocus($(self.elements.dialog));
+        return false;
+      }
+    });
   };
 
   alertify.pgHandleItemError = function(xhr, error, message, args) {

web/pgadmin/static/js/alertify/dialog_wrapper.js

@@ -60,14 +60,6 @@ export class DialogWrapper {
     this.pgBrowser.keyboardNavigation.getDialogTabNavigator($(alertifyDialog.elements.dialog));
     const container = backform_tab.find('.tab-content:first > .tab-pane.active:first');
     commonUtils.findAndSetFocus(container);
-
-    $(alertifyDialog.elements.footer).on('keydown', 'button', function(event) {
-      if (event.keyCode == 9 && $(this).nextAll('button:not([disabled])').length == 0) {
-        // set focus back to first editable input element of current active tab once we cycle through all enabled buttons.
-        commonUtils.findAndSetFocus($(alertifyDialog.elements.dialog));
-        return false;
-      }
-    });
   }
 
   isNodeSelected(selectedTreeNode) {

web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js

@@ -13,13 +13,14 @@ define([
   'pgadmin.alertifyjs', 'pgadmin.backgrid', 'pgadmin.backform',
   'pgadmin.browser', 'pgadmin.browser.node',
   'tools/grant_wizard/static/js/menu_utils',
+  'sources/utils',
   'sources/nodes/supported_database_node',
   'backgrid.select.all',
   'backgrid.filter', 'pgadmin.browser.server.privilege',
   'pgadmin.browser.wizard',
 ], function(
   gettext, url_for, $, _, Backbone, Alertify, Backgrid, Backform, pgBrowser,
-  pgNode, menuUtils, supportedNodes
+  pgNode, menuUtils, commonUtils, supportedNodes
 ) {
 
   // if module is already initialized, refer to that.
@@ -104,8 +105,6 @@ define([
         // Do not use parent's render function. It set's tabindex to -1 on
         // checkboxes.
 
-
-
         var col = this.column.get('name');
         let id = `row-${_.uniqueId(col)}`;
         this.$el.empty().append(`
@@ -429,6 +428,35 @@ define([
               });
 
             },
+            hooks: {
+              onshow: function() {
+                commonUtils.findAndSetFocus($(this.elements.body));
+                let self = this;
+                let containerFooter = $(this.elements.content).find('.wizard-buttons').find('.ml-auto');
+                //To get last header button
+                let lastHeaderButton = $(this.elements.content).find('.wizard-header').find('.ml-auto').find('button:first');
+
+                $(containerFooter).on('keydown', 'button', function(event) {
+                  if (!event.shiftKey && event.keyCode == 9 && $(this).nextAll('button:not([disabled])').length == 0) {
+                    // set focus back to first editable input element of current active tab once we cycle through all enabled buttons.
+                    let container = $(self.elements.content).find('.wizard-header');
+                    commonUtils.findAndSetFocus(container.find('button:not([disabled]):first'));
+                    return false;
+                  }
+                });
+
+                $(lastHeaderButton).on('keydown', function(event) {
+                  if (event.shiftKey && event.keyCode == 9) {
+                    // set focus back to first element of current active tab once we cycle through all enabled buttons.
+                    let container = $(self.elements.content).find('.wizard-footer');
+                    commonUtils.findAndSetFocus(container.find('button:not([disabled]):last'));
+                    return false;
+                  }
+                });
+
+              },
+            },
+
             prepare: function() {
               var that = this;
               $container.empty().append('<div class=\'grant_wizard_container\'></div>');