From 2cd58efcddc08e8914e74d50bc2522ae3e4cdeb9 Mon Sep 17 00:00:00 2001
From: Aditya Toshniwal <aditya.toshniwal@enterprisedb.com>
Date: Wed, 15 May 2019 16:37:06 +0530
Subject: [PATCH] 1) Fixed Tab key navigation for Maintenance dialog. Fixes
 #4227 2) Fix Tab key issue for Toggle switch controls and button on the
 dialog footer in Safari browser. Fixes #4244

---
 docs/en_US/release_notes_4_7.rst              |  2 ++
 web/pgadmin/browser/static/js/collection.js   |  6 ++---
 web/pgadmin/browser/static/js/node.js         |  6 ++---
 web/pgadmin/static/js/backform.pgadmin.js     |  3 ++-
 web/pgadmin/static/js/utils.js                | 13 ++++++++--
 .../import_export/static/js/import_export.js  |  7 ++++--
 .../maintenance/static/js/maintenance.js      | 25 ++++++++++++-------
 7 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/docs/en_US/release_notes_4_7.rst b/docs/en_US/release_notes_4_7.rst
index 1bc0ce766..86ebeceb9 100644
--- a/docs/en_US/release_notes_4_7.rst
+++ b/docs/en_US/release_notes_4_7.rst
@@ -18,5 +18,7 @@ Bug fixes
 | `Bug #4194 <https://redmine.postgresql.org/issues/4194>`_ - Fix accessibility issue for menu navigation.
 | `Bug #4218 <https://redmine.postgresql.org/issues/4218>`_ - Properly assign dropdownParent in Select2 controls.
 | `Bug #4219 <https://redmine.postgresql.org/issues/4219>`_ - Ensure popper.js is installed when needed.
+| `Bug #4227 <https://redmine.postgresql.org/issues/4227>`_ - Fixed Tab key navigation for Maintenance dialog.
+| `Bug #4244 <https://redmine.postgresql.org/issues/4244>`_ - Fix Tab key issue for Toggle switch controls and button on the dialog footer in Safari browser.
 | `Bug #4246 <https://redmine.postgresql.org/issues/4246>`_ - Fixed console error when subnode control is used in panels.
 | `Bug #4261 <https://redmine.postgresql.org/issues/4261>`_ - Stop using application/x-javascript as a mime type and use the RFC-compliant application/javascript instead.
\ No newline at end of file
diff --git a/web/pgadmin/browser/static/js/collection.js b/web/pgadmin/browser/static/js/collection.js
index 483f57b71..0549ebc98 100644
--- a/web/pgadmin/browser/static/js/collection.js
+++ b/web/pgadmin/browser/static/js/collection.js
@@ -93,12 +93,10 @@ define([
               // All buttons will be created within a single
               // div area.
               var btnGroup =
-                $('<div></div>').addClass(
-                  'pg-prop-btn-group'
-                ),
+                $('<div class="pg-prop-btn-group"></div>'),
                 // Template used for creating a button
                 tmpl = _.template([
-                  '<button type="<%= type %>" ',
+                  '<button tabindex="0" type="<%= type %>" ',
                   'class="btn <%=extraClasses.join(\' \')%>"',
                   '<% if (disabled) { %> disabled="disabled"<% } %> title="<%-tooltip%>">',
                   '<span class="<%= icon %>"></span><% if (label != "") { %>&nbsp;<%-label%><% } %></button>',
diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js
index 10427f0e0..278a7ddc2 100644
--- a/web/pgadmin/browser/static/js/node.js
+++ b/web/pgadmin/browser/static/js/node.js
@@ -1092,12 +1092,10 @@ define('pgadmin.browser.node', [
             // All buttons will be created within a single
             // div area.
             var btnGroup =
-              $('<div tabindex="0"></div>').addClass(
-                'pg-prop-btn-group'
-              ),
+              $('<div class="pg-prop-btn-group"></div>'),
               // Template used for creating a button
               tmpl = _.template([
-                '<button type="<%= type %>" ',
+                '<button tabindex="0" type="<%= type %>" ',
                 'class="btn <%=extraClasses.join(\' \')%>"',
                 '<% if (disabled) { %> disabled="disabled"<% } %> title="<%-tooltip%>">',
                 '<span class="<%= icon %>"></span><% if (label != "") { %>&nbsp;<%-label%><% } %></button>',
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 5db18cf38..2a8792b2b 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -444,7 +444,7 @@ define([
     template: _.template([
       '<label class="<%=controlLabelClassName%>"><%=label%></label>',
       '<div class="<%=controlsClassName%> <%=extraClasses.join(\' \')%>">',
-      '      <input tabindex="0" type="checkbox" data-style="quick" data-toggle="toggle"',
+      '      <input tabindex="-1" type="checkbox" data-style="quick" data-toggle="toggle"',
       '      data-size="<%=options.size%>" data-height="<%=options.height%>"  ',
       '      data-on="<%=options.onText%>" data-off="<%=options.offText%>" ',
       '      data-onstyle="<%=options.onColor%>" data-offstyle="<%=options.offColor%>" data-width="<%=options.width%>" ',
@@ -520,6 +520,7 @@ define([
 
       this.$input = this.$el.find('input[type=checkbox]').first();
       this.$input.bootstrapToggle();
+      this.$el.find('.toggle.btn').attr('tabindex', '0');
       this.updateInvalid();
 
       return this;
diff --git a/web/pgadmin/static/js/utils.js b/web/pgadmin/static/js/utils.js
index 6cbb68a53..6b1ed9ad7 100644
--- a/web/pgadmin/static/js/utils.js
+++ b/web/pgadmin/static/js/utils.js
@@ -26,9 +26,18 @@ export function findAndSetFocus(container) {
     var first_el = container
       .find('button.fa-plus:first');
 
+    /* Adding the tabindex condition makes sure that
+     * when testing accessibility it works consistently across all
+     * browser. For eg, in safari focus() works only when element has
+     * tabindex="0", whereas in Chrome it works in any case
+     */
     if (first_el.length == 0) {
       first_el = container
-        .find('.pgadmin-controls:first input:enabled,.CodeMirror-scroll');
+        .find(`
+          .pgadmin-controls:first input:enabled,
+          .pgadmin-controls:first .btn:not(.toggle),
+          .CodeMirror-scroll`)
+        .find('*[tabindex]:not([tabindex="-1"])');
     }
 
     if(first_el.length > 0) {
@@ -69,4 +78,4 @@ export function getGCD(inp_arr) {
   }
 
   return result;
-}
\ No newline at end of file
+}
diff --git a/web/pgadmin/tools/import_export/static/js/import_export.js b/web/pgadmin/tools/import_export/static/js/import_export.js
index 4fbdf882c..74499d11b 100644
--- a/web/pgadmin/tools/import_export/static/js/import_export.js
+++ b/web/pgadmin/tools/import_export/static/js/import_export.js
@@ -591,6 +591,11 @@ define([
                   break;
                 }
               },
+
+              onshow: function() {
+                var container = $(this.elements.body).find('.tab-content:first > .tab-pane.active:first');
+                commonUtils.findAndSetFocus(container);
+              },
             },
 
             prepare: function() {
@@ -656,8 +661,6 @@ define([
               });
 
               view.$el.attr('tabindex', -1);
-              var container = view.$el.find('.tab-content:first > .tab-pane.active:first');
-              commonUtils.findAndSetFocus(container);
               setTimeout(function() {
                 pgBrowser.keyboardNavigation.getDialogTabNavigator($(self.elements.dialog));
               }, 200);
diff --git a/web/pgadmin/tools/maintenance/static/js/maintenance.js b/web/pgadmin/tools/maintenance/static/js/maintenance.js
index 4d696c31d..2311b506e 100644
--- a/web/pgadmin/tools/maintenance/static/js/maintenance.js
+++ b/web/pgadmin/tools/maintenance/static/js/maintenance.js
@@ -76,18 +76,24 @@ define([
           '<div class="pgadmin-controls col-12 col-sm-8 btn-group pg-maintenance-op pgadmin-controls-radio-none" data-toggle="buttons">',
           ' <% for (var i=0; i < options.length; i++) { %>',
           ' <% var option = options[i]; %>',
-          ' <label class="btn btn-primary<% if (i == 0) { %> active<%}%>">',
+          ' <label class="btn btn-primary<% if (i == 0) { %> active<%}%>" tabindex="0">',
           '  <input type="radio" name="op" id="op" autocomplete="off" value=<%-formatter.fromRaw(option.value)%><% if (i == 0) { %> selected<%}%> > <%-option.label%>',
           ' </label>',
           ' <% } %>',
           '</div>',
         ].join('\n')),
+        render: function() {
+          Backform.RadioControl.prototype.render.apply(this, arguments);
+          this.$el.find('.pg-maintenance-op .btn').on('keyup', (e)=>{
+            switch(e.keyCode) {
+            case 32: /* Spacebar click */
+              $(e.currentTarget).trigger('click');
+              break;
+            }
+          });
+          return this;
+        },
       }),
-      select2: {
-        allowClear: false,
-        width: '100%',
-        placeholder: gettext('Select from list...'),
-      },
     },
     {
       type: 'nested',
@@ -423,6 +429,10 @@ define([
                   });
                 }
               },
+              onshow: function() {
+                var container = $(this.elements.body).find('.tab-content:first > .tab-pane.active:first');
+                commonUtils.findAndSetFocus(container);
+              },
             },
             prepare: function() {
               // Main maintenance tool dialog container
@@ -466,9 +476,6 @@ define([
               }
 
               view.$el.attr('tabindex', -1);
-              var container = view.$el.find('.tab-content:first > .tab-pane.active:first');
-              commonUtils.findAndSetFocus(container);
-
               this.elements.content.appendChild($container.get(0));
             },
           };