[pgAdmin][RM4930] [Accessibility] Main window tan navigation

Nagesh Dhope <[email protected]> Wed, 13 Nov 2019 17:00:28 +0530

Newsgroups	gmane.comp.db.postgresql.pgadmin.devel
Message-ID	<CAA3zdZpg6iUGPavFDAYo1qKM7QFBJ18HvXeJrHxcNPzN7b-57A@mail.gmail.com>

Hi Hackers,
Please find a patch for following accessibility issues on the main window.

   1. Dashboard -> Server Activity grid: terminate the session, cancel
   active button not navigable using tab key
   2. SQL -> If the focus inside code mirror control tab navigation not
   working

Along with this, there is a minor shadow color fix for the refresh button
on the Server activity grid's refresh button. Note: Currently search text
field has a primary-color shadow and the refresh button has a
secondary-color shadow.

-- 
Thanks,
Nagesh

RM-4930.patch (application/octet-stream, 2.4 KB)

diff --git a/web/pgadmin/browser/static/js/keyboard.js b/web/pgadmin/browser/static/js/keyboard.js
index ba1a780..dd1b5fe 100644
--- a/web/pgadmin/browser/static/js/keyboard.js
+++ b/web/pgadmin/browser/static/js/keyboard.js
@@ -133,7 +133,7 @@ _.extend(pgBrowser.keyboardNavigation, {
   bindRightPanel: function(event, combo) {
     let allPanels = pgAdmin.Browser.docker.findPanels();
     let activePanel = 0;
-    let nextPanel = allPanels.length;
+    let nextPanel = allPanels.length - 1;
     let prevPanel = 1;
     let activePanelId = 0;
     let activePanelFlag = false;
diff --git a/web/pgadmin/dashboard/static/js/dashboard.js b/web/pgadmin/dashboard/static/js/dashboard.js
index 39132dd..42d2eca 100644
--- a/web/pgadmin/dashboard/static/js/dashboard.js
+++ b/web/pgadmin/dashboard/static/js/dashboard.js
@@ -52,6 +52,13 @@ define('pgadmin.dashboard', [
           '\'></i>'
         );
       }
+      this.$el.attr('tabindex', 0);
+      this.$el.on('keydown', function(e) {
+        // terminating session or cancel the active query.
+        if (e.keyCode == 32) {
+          self.$el.click();
+        }
+      }),
       this.delegateEvents();
       return this;
     },
diff --git a/web/pgadmin/static/bundle/codemirror.js b/web/pgadmin/static/bundle/codemirror.js
index b77c259..614fdc3 100644
--- a/web/pgadmin/static/bundle/codemirror.js
+++ b/web/pgadmin/static/bundle/codemirror.js
@@ -26,4 +26,16 @@ import 'codemirror/addon/comment/comment';
 import 'sources/codemirror/addon/fold/pgadmin-sqlfoldcode';
 import 'sources/codemirror/extension/centre_on_line';
 
+var cmds = CodeMirror.commands;
+cmds.focusOut = function(){
+  event.stopPropagation();
+  document.activeElement.blur();
+  if(event.currentTarget.parents().find('.sql-code-control')) {
+    // for code mirror in dialogs
+    event.currentTarget.parents().find('.sql-code-control').focus();
+  }
+};
+
+CodeMirror.keyMap.default['Esc'] = 'focusOut';
+
 export default CodeMirror;
diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss
index c87fa4d..e6e4dab 100644
--- a/web/pgadmin/static/scss/_pgadmin.style.scss
+++ b/web/pgadmin/static/scss/_pgadmin.style.scss
@@ -626,6 +626,10 @@ fieldset.inline-fieldset > div {
     height: 100%;
   }
 
+  & .btn-secondary:focus {
+    box-shadow: $input-btn-focus-box-shadow;
+  }
+
   & .input-group {
     & .input-group-text {
       background: $input-bg;