Added tab navigation on close buttons for all the panels and create/properties dialog.

Added tab navigation for scroll left and scroll right buttons on the main window.

Fixes #4601

docs/en_US/release_notes_4_18.rst

@@ -32,6 +32,7 @@ Bug fixes
 | `Issue #3812 <https://redmine.postgresql.org/issues/3812>`_ -  Ensure that path file name should not disappear when changing ext from the dropdown in file explorer dialog.
 | `Issue #4410 <https://redmine.postgresql.org/issues/4410>`_ -  Fixed an issue while editing char[] or character varying[] column from View/Edit data throwing an error.
 | `Issue #4511 <https://redmine.postgresql.org/issues/4511>`_ -  Fixed an issue where Grant wizard unable to handle multiple objects when the query string parameter exceeds its limit.
+| `Issue #4601 <https://redmine.postgresql.org/issues/4601>`_ -  Added tab navigation on close buttons for all the panels and create/properties dialog.
 | `Issue #4827 <https://redmine.postgresql.org/issues/4827>`_ -  Fix column resizable issue in the file explorer dialog.
 | `Issue #5000 <https://redmine.postgresql.org/issues/5000>`_ -  Logout the pgAdmin session when no user activity of mouse move, click or keypress.
 | `Issue #5025 <https://redmine.postgresql.org/issues/5025>`_ -  Fix an issue where setting STORAGE_DIR to empty should show all the volumes on Windows in server mode.

web/package.json

@@ -96,7 +96,7 @@
     "tempusdominus-core": "^5.0.3",
     "underscore": "^1.9.1",
     "watchify": "~3.11.1",
-    "webcabin-docker": "git+https://github.com/EnterpriseDB/wcDocker/#4748acfe929eb65c54a464230672ce4372442c89",
+    "webcabin-docker": "git+https://github.com/EnterpriseDB/wcDocker/#7a14f50a7197fe3824d706c85485a49fa9166804",
     "wkx": "^0.4.6"
   },
   "scripts": {

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

@@ -1532,9 +1532,9 @@ define('pgadmin.browser.node', [
             }], 'footer', 'pg-prop-btn-group-below');
 
             btn_grp.on('keydown', 'button', function(event) {
-              if (event.keyCode == 9 && $(this).nextAll('button:not([disabled])').length == 0) {
+              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.
+                // set focus back to first focusable element on dialog
-                commonUtils.findAndSetFocus(view.$el.find('.tab-content div.active'));
+                view.$el.closest('.wcFloating').find('[tabindex]:not([tabindex="-1"]').first().focus();
                 return false;
               }
             });
@@ -1553,6 +1553,15 @@ define('pgadmin.browser.node', [
 
           // Show contents before buttons
           j.prepend(content);
+          view.$el.closest('.wcFloating').find('.wcFrameButtonBar > .wcFrameButton[style!="display: none;"]').on('keydown', function(e) {
+
+            if(e.shiftKey && e.keyCode === 9) {
+              e.stopPropagation();
+              setTimeout(() => {
+                view.$el.closest('.wcFloating').find('[tabindex]:not([tabindex="-1"]):not([disabled])').last().focus();
+              }, 10);
+            }
+          });
         }.bind(panel),
         closePanel = function(confirm_close_flag) {
           if(!_.isUndefined(confirm_close_flag)) {

web/pgadmin/browser/static/js/toolbar.js

@@ -17,9 +17,9 @@ let _browserPanel = null;
 // Default Tool Bar Buttons.
 let _defaultToolBarButtons = [
   {
-    label: gettext('Filtered Rows'),
+    label: gettext('Query Tool'),
-    ariaLabel: gettext('Filtered Rows'),
+    ariaLabel: gettext('Query Tool'),
-    btnClass: 'pg-font-icon icon-filter-table-toolbar',
+    btnClass: 'pg-font-icon icon-query-tool',
     text: '',
     toggled: false,
     toggleClass: '',
@@ -37,9 +37,9 @@ let _defaultToolBarButtons = [
     enabled: false,
   },
   {
-    label: gettext('Query Tool'),
+    label: gettext('Filtered Rows'),
-    ariaLabel: gettext('Query Tool'),
+    ariaLabel: gettext('Filtered Rows'),
-    btnClass: 'pg-font-icon icon-query-tool',
+    btnClass: 'pg-font-icon icon-filter-table-toolbar',
     text: '',
     toggled: false,
     toggleClass: '',

web/pgadmin/static/scss/_webcabin.pgadmin.scss

@@ -37,7 +37,7 @@
 }
 
 /* darken % taken from bootstrap - button_variant */
-.wcFrameButton:hover, .wcFrameButtonHover {
+.wcFrameButton:hover, .wcFrameButtonHover,  .wcFrameButton:focus {
   background-color: $btn-secondary-hover-bg;
 }
 
@@ -57,9 +57,7 @@
   padding: 0rem 0.25rem;
 
   display: -webkit-flex; /* Safari */
-  -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
   display: flex;
-  flex-direction: row-reverse;
 }
 
 

web/yarn.lock

@@ -9030,9 +9030,9 @@ watchpack@^1.6.0:
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
 
-"webcabin-docker@git+https://github.com/EnterpriseDB/wcDocker/#4748acfe929eb65c54a464230672ce4372442c89":
+"webcabin-docker@git+https://github.com/EnterpriseDB/wcDocker/#7a14f50a7197fe3824d706c85485a49fa9166804":
   version "2.2.4-dev"
-  resolved "git+https://github.com/EnterpriseDB/wcDocker/#4748acfe929eb65c54a464230672ce4372442c89"
+  resolved "git+https://github.com/EnterpriseDB/wcDocker/#7a14f50a7197fe3824d706c85485a49fa9166804"
   dependencies:
     FileSaver "^0.10.0"
     font-awesome "^4.7.0"