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

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;

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;
-}
+}