Fixed tab key navigation for some dialogs. Fixes #5371

docs/en_US/release_notes_4_21.rst

@@ -45,4 +45,5 @@ Bug fixes
 | `Issue #5314 <https://redmine.postgresql.org/issues/5314>`_ -  Ensure that switch cell is in sync with switch control for accessibility.
 | `Issue #5351 <https://redmine.postgresql.org/issues/5351>`_ -  Fixed compilation warnings while building pgAdmin.
 | `Issue #5361 <https://redmine.postgresql.org/issues/5361>`_ -  Fixes an issue where pgAdmin4 GUI does not display properly in IE 11.
-| `Issue #5362 <https://redmine.postgresql.org/issues/5362>`_ -  Fixed an issue where the identical packages and sequences visible as different in the schema diff tool.
+| `Issue #5362 <https://redmine.postgresql.org/issues/5362>`_ -  Fixed an issue where the identical packages and sequences visible as different in the schema diff tool.
+| `Issue #5371 <https://redmine.postgresql.org/issues/5371>`_ -  Fixed tab key navigation for some dialogs.

web/pgadmin/browser/server_groups/servers/static/js/privilege.js

@@ -8,8 +8,8 @@
 //////////////////////////////////////////////////////////////
 
 define(['sources/gettext', 'underscore', 'jquery', 'backbone', 'backform',
-  'backgrid', 'alertify', 'pgadmin.browser.node', 'pgadmin.browser.node.ui',
+  'backgrid', 'alertify', 'pgadmin.browser.node', 'sources/utils', 'pgadmin.browser.node.ui',
-], function(gettext, _, $, Backbone, Backform, Backgrid, Alertify, pgNode) {
+], function(gettext, _, $, Backbone, Backform, Backgrid, Alertify, pgNode, commonUtils) {
   /**
    * Each Privilege, supporeted by an database object, will be represented
    * using this Model.
@@ -622,11 +622,16 @@ define(['sources/gettext', 'underscore', 'jquery', 'backbone', 'backform',
           command = new Backgrid.Command(ev),
           coll = this.model.get(this.column.get('name'));
 
+        if (ev.key == 'Tab'){
+          commonUtils.handleKeyNavigation(event);
+        }
+
         if (command.moveUp() || command.moveDown() || command.save()) {
           // backgrid vertical navigation (Up/Down arrow key)
           ev.preventDefault();
           ev.stopPropagation();
-          model.trigger('backgrid:edited', model, column, command);
+          this.model.trigger('backgrid:edited', this.model, this.column, command);
+          // model.trigger('backgrid:edited', model, column, command);
           return;
         }
         // esc

web/pgadmin/browser/static/js/node.js

@@ -1555,7 +1555,7 @@ define('pgadmin.browser.node', [
               }
               let btnGroup = $(panel.$container.find('.pg-prop-btn-group'));
               let el = $(btnGroup).find('button:first');
-              if (panel.$container.find('td.editable:last').is(':visible')){
+              if (panel.$container.find('.number-cell.editable:last').is(':visible')){
                 if (event.keyCode === 9 && event.shiftKey) {
                   if ($(el).is($(event.target))){
                     $(panel.$container.find('td.editable:last').trigger('click'));

web/pgadmin/browser/static/js/wizard.js

@@ -240,61 +240,7 @@ define([
       return true;
     },
     keydownHandler: function(event) {
-      let wizardHeader = $(event.currentTarget).find('.wizard-header');
+      commonUtils.handleKeyNavigation(event);
-      let wizardFooter = $(event.currentTarget).find('.wizard-footer');
-      let gridElement = $(event.currentTarget).find('.select-row-cell:first');
-      let gridElementLast = $(event.currentTarget).find('.select-row-cell:last');
-
-      let firstWizardHeaderButton = $(wizardHeader).find('button:enabled:first');
-      let lastWizardHeaderButton = $(wizardHeader).find('button:enabled:last');
-      let lastWizardFooterBtn = $(wizardFooter).find('button:enabled:last');
-      let firstWizardFooterBtn = $(wizardFooter).find('button:enabled:first');
-
-
-      if (event.shiftKey && event.keyCode === 9) {
-        // Move backwards
-        if(firstWizardHeaderButton && $(firstWizardHeaderButton).is($(event.target))) {
-          if (lastWizardFooterBtn) {
-            $(lastWizardFooterBtn).focus();
-            event.preventDefault();
-            event.stopPropagation();
-          }
-        }
-        else if ($(firstWizardFooterBtn).is($(event.target))){
-          if ($(gridElement).find('.custom-control-input').is(':visible')){
-            $(gridElementLast).find('.custom-control-input').focus();
-            event.preventDefault();
-            event.stopPropagation();
-          }else if ($(event.currentTarget).find('.wizard-content').find('.CodeMirror-scroll').is(':visible')){
-            $(lastWizardHeaderButton).focus();
-          }
-        }
-      } else if (event.keyCode === 9) {
-        // Move forwards
-        // If taget is last button then goto first element
-        if(lastWizardFooterBtn && $(lastWizardFooterBtn).is($(event.target))) {
-          $(firstWizardHeaderButton).focus();
-          event.preventDefault();
-          event.stopPropagation();
-        }else if (event.target.innerText == 'Name'){
-          if ($(gridElement).find('.custom-control-input').is(':visible')){
-            $(gridElement).find('.custom-control-input').focus();
-          }else {
-            $(firstWizardFooterBtn).focus();
-          }
-          event.preventDefault();
-          event.stopPropagation();
-        } else if(event.target.tagName == 'DIV') {
-          $(event.currentTarget).find('.custom-control-input:first').trigger('focus');
-          event.preventDefault();
-          event.stopPropagation();
-        } else if(event.target.tagName == 'TEXTAREA'){
-          $(firstWizardFooterBtn).focus();
-        }
-      } else if (event.keyCode === 27){
-        //close the wizard when esc key is pressed
-        $(wizardHeader).find('button.ajs-close').click();
-      }
     },
     enableDisableNext: function(disable) {
       if (typeof(disable) != 'undefined') {

web/pgadmin/browser/templates/browser/index.html

@@ -123,7 +123,7 @@ window.onload = function(e){
             <li id="mnu_management" class="nav-item active dropdown d-none">
                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                     _('Management') }} <span class="caret"></span></a>
-                <ul class="dropdown-menu" role="menu"></ul>
+                <ul class="dropdown-menu" aria-hidden="true"></ul>
             </li>
             <li id="mnu_tools" class="nav-item active dropdown d-none">
                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{

web/pgadmin/static/js/backform.pgadmin.js

@@ -1822,6 +1822,7 @@ define([
 
       /* Check for sql editor preference changes */
       let self = this;
+      this.$el.find('textarea').attr('tabindex', -1);
       pgBrowser.onPreferencesChange('sqleditor', function() {
         self.reflectPreferences();
       });

web/pgadmin/static/js/backgrid.pgadmin.js

@@ -833,6 +833,12 @@ define([
         // go to Next Cell & if Shift is also pressed go to Previous Cell
         if (e.keyCode == 9 || e.keyCode == 16) {
           gotoCell = e.shiftKey ? self.$el.prev() : self.$el.next();
+          if (self.$el.next().length == 0){
+            setTimeout(function() {
+              self.$el.find('.select2-selection').blur();
+            }, 100);
+
+          }
         }
 
         if (gotoCell) {

web/pgadmin/static/js/utils.js

@@ -9,6 +9,8 @@
 
 import _ from 'underscore';
 import { getTreeNodeHierarchyFromIdentifier } from 'sources/tree/pgadmin_tree_node';
+import $ from 'jquery';
+
 
 export function parseShortcutValue(obj) {
   var shortcut = '';
@@ -19,6 +21,64 @@ export function parseShortcutValue(obj) {
   return shortcut;
 }
 
+export function handleKeyNavigation(event) {
+  let wizardHeader = $(event.currentTarget).find('.wizard-header');
+  let wizardFooter = $(event.currentTarget).find('.wizard-footer');
+  let gridElement = $(event.currentTarget).find('.select-row-cell:first');
+  let gridElementLast = $(event.currentTarget).find('.select-row-cell:last');
+
+  let firstWizardHeaderButton = $(wizardHeader).find('button:enabled:first');
+  let lastWizardHeaderButton = $(wizardHeader).find('button:enabled:last');
+  let lastWizardFooterBtn = $(wizardFooter).find('button:enabled:last');
+  let firstWizardFooterBtn = $(wizardFooter).find('button:enabled:first');
+
+
+  if (event.shiftKey && event.keyCode === 9) {
+    // Move backwards
+    if(firstWizardHeaderButton && $(firstWizardHeaderButton).is($(event.target))) {
+      if (lastWizardFooterBtn) {
+        $(lastWizardFooterBtn).focus();
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }
+    else if ($(firstWizardFooterBtn).is($(event.target))){
+      if ($(gridElement).find('.custom-control-input').is(':visible')){
+        $(gridElementLast).find('.custom-control-input').focus();
+        event.preventDefault();
+        event.stopPropagation();
+      }else if ($(event.currentTarget).find('.wizard-content').find('.CodeMirror-scroll').is(':visible')){
+        $(lastWizardHeaderButton).focus();
+      }
+    }
+  } else if (event.keyCode === 9) {
+    // Move forwards
+    // If taget is last button then goto first element
+    if(lastWizardFooterBtn && $(lastWizardFooterBtn).is($(event.target))) {
+      $(firstWizardHeaderButton).focus();
+      event.preventDefault();
+      event.stopPropagation();
+    }else if (event.target.innerText == 'Name'){
+      if ($(gridElement).find('.custom-control-input').is(':visible')){
+        $(gridElement).find('.custom-control-input').focus();
+      }else {
+        $(firstWizardFooterBtn).focus();
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    } else if(event.target.tagName == 'DIV') {
+      $(event.currentTarget).find('.custom-control-input:first').trigger('focus');
+      event.preventDefault();
+      event.stopPropagation();
+    } else if(event.target.tagName == 'TEXTAREA'){
+      $(firstWizardFooterBtn).focus();
+    }
+  } else if (event.keyCode === 27){
+    //close the wizard when esc key is pressed
+    $(wizardHeader).find('button.ajs-close').click();
+  }
+}
+
 export function findAndSetFocus(container) {
   if (container.length == 0) {
     return;

web/pgadmin/static/vendor/backgrid/backgrid.js

@@ -987,6 +987,9 @@ var StringCell = Backgrid.StringCell = Cell.extend({
 
   /** @property */
   className: "string-cell",
+  attributes: {
+    tabIndex: "0"
+  },
 
   formatter: StringFormatter