[RM#4935] Accessibility related issues

Murtuza Zabuawala <[email protected]> Thu, 14 Nov 2019 18:26:53 +0530

Newsgroups	gmane.comp.db.postgresql.pgadmin.devel
Message-ID	<CAKKotZS8_9h69DRrLigJwbBeP7n-2224cw96ef347=4jwUAwwA@mail.gmail.com>

Hi,

PFA patch for accessibility related issues,
1) Suppress ESC
key presses in Alertify dialogues when the come from Select2 controls (It
also closes the alertify dialog when user try to close Select2 using ESC
key)
2) Do not allow Tabindex focus on Switch control when it is disbaled
3) Tab keyboard shortcut navigation does not work in wcDocker iframe.


--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

pgadmin4_fixes.diff (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 e64af27f73..3436385b26 100644
--- a/web/pgadmin/browser/static/js/keyboard.js
+++ b/web/pgadmin/browser/static/js/keyboard.js
@@ -14,6 +14,7 @@ import Mousetrap from 'mousetrap';
 import * as commonUtils from '../../../static/js/utils';
 import dialogTabNavigator from '../../../static/js/dialog_tab_navigator';
 import * as keyboardFunc from 'sources/keyboard_shortcuts';
+import pgWindow from 'sources/window';
 
 const pgBrowser = pgAdmin.Browser = pgAdmin.Browser || {};
 
@@ -565,8 +566,8 @@ _.extend(pgBrowser.keyboardNavigation, {
     };
   },
   getDialogTabNavigator: function(dialogContainer) {
-    const backward_shortcut = pgBrowser.get_preference('browser', 'dialog_tab_backward').value;
-    const forward_shortcut = pgBrowser.get_preference('browser', 'dialog_tab_forward').value;
+    const backward_shortcut = pgWindow.pgAdmin.Browser.get_preference('browser', 'dialog_tab_backward').value;
+    const forward_shortcut = pgWindow.pgAdmin.Browser.get_preference('browser', 'dialog_tab_forward').value;
 
     return new dialogTabNavigator.dialogTabNavigator(dialogContainer, backward_shortcut, forward_shortcut);
   },
diff --git a/web/pgadmin/static/js/alertify.pgadmin.defaults.js b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
index f99730322d..a8bdb7aaab 100644
--- a/web/pgadmin/static/js/alertify.pgadmin.defaults.js
+++ b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
@@ -445,7 +445,7 @@ define([
    * instead of alertify dialog
    */
   $('body').off('keyup').on('keyup', function(ev){
-    if(ev.which === 13) {
+    if(ev.which === 13 || ev.which === 27) {
       let suppressForClasses = ['select2-selection', 'select2-search__field'];
       let $el = $(ev.target);
       for(let i=0; i<suppressForClasses.length; i++){
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 95f786d9f4..d46ac2896f 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -606,7 +606,8 @@ define([
 
       this.$input = this.$el.find('input[type=checkbox]').first();
       this.$input.bootstrapToggle();
-      this.$el.find('.toggle.btn').attr('tabindex', '0');
+      // When disable then set tabindex value to -1
+      this.$el.find('.toggle.btn').attr('tabindex', data.options.disabled ? '-1' : '0');
       this.updateInvalid();
 
       return this;