From fc5287bd9fa8d1b8048094dd90fe37ca6ec8ccdc Mon Sep 17 00:00:00 2001
From: Ganesh Jaybhay <ganesh.jaybhay@enterprisedb.com>
Date: Wed, 1 Jan 2020 10:51:45 +0530
Subject: [PATCH] Added tab navigation for tabs under explain panel in query
 tool. Fixes #5047.

---
 docs/en_US/release_notes_4_17.rst                  | 3 ++-
 web/pgadmin/misc/static/explain/js/explain.js      | 4 ++--
 web/pgadmin/tools/sqleditor/static/js/sqleditor.js | 6 ++++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/docs/en_US/release_notes_4_17.rst b/docs/en_US/release_notes_4_17.rst
index a857f26fb..7ae139462 100644
--- a/docs/en_US/release_notes_4_17.rst
+++ b/docs/en_US/release_notes_4_17.rst
@@ -27,4 +27,5 @@ Bug fixes
 | `Issue #4999 <https://redmine.postgresql.org/issues/4999>`_ -  Rename some internal environment variables that could conflict with Kubernetes.
 | `Issue #5004 <https://redmine.postgresql.org/issues/5004>`_ -  Fix vulnerability issues reported by 'yarn audit'. Replace the deprecated uglifyjs-webpack-plugin with a terser-webpack-plugin.
 | `Issue #5008 <https://redmine.postgresql.org/issues/5008>`_ -  Ensure that the error message should not be displayed if Tablespace is not selected while creating the index.
-| `Issue #5009 <https://redmine.postgresql.org/issues/5009>`_ -  Fix an issue where operator, access method and operator class is not visible for exclusion constraints.
\ No newline at end of file
+| `Issue #5009 <https://redmine.postgresql.org/issues/5009>`_ -  Fix an issue where operator, access method and operator class is not visible for exclusion constraints.
+| `Issue #5047 <https://redmine.postgresql.org/issues/5047>`_ -  Added tab navigation for tabs under explain panel in query tool.
\ No newline at end of file
diff --git a/web/pgadmin/misc/static/explain/js/explain.js b/web/pgadmin/misc/static/explain/js/explain.js
index c32d2d4cd..acf284472 100644
--- a/web/pgadmin/misc/static/explain/js/explain.js
+++ b/web/pgadmin/misc/static/explain/js/explain.js
@@ -1187,7 +1187,7 @@ define('pgadmin.misc.explain', [
         return [
           '   <li class="nav-item" role="presentation">',
           '    <a class="nav-link ', _active ? 'active' : '', '"',
-          '       data-toggle="tab" tabindex="-1"',
+          '       data-toggle="tab" tabindex="0"',
           `       data-tab-index="${_idx}"`,
           '       aria-selected="', _active ? 'true' : 'false', '"',
           `       role="tab" data-explain-role="${_type}"`,
@@ -1199,7 +1199,7 @@ define('pgadmin.misc.explain', [
       },
       createTabPanel = (_type, _active, _extraClasses) => {
         return [
-          '   <div role="tabpanel" tabindex="-1" class="tab-pane pg-el-sm-12',
+          '   <div role="tabpanel" tabindex="0" class="tab-pane pg-el-sm-12',
           '        pg-el-md-12 pg-el-lg-12 pg-el-12 fade collapse',
           _active ? ' active show' : '', ` ${_extraClasses}"`,
           `        data-explain-tabpanel="${_type}"`,
diff --git a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
index 3e3554e8d..5e8b82aad 100644
--- a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
@@ -404,6 +404,12 @@ define('tools.querytool', [
         self.query_tool_obj.focus();
       });
 
+      pgBrowser.Events.on('pgadmin:query_tool:explain:focus', ()=>{
+        setTimeout(function () {
+          $('.sql-editor-explain .backform-tab .nav-link.active').focus();
+        }, 200);
+      });
+
       if (!self.preferences.new_browser_tab) {
         // Listen on the panel closed event and notify user to save modifications.
         _.each(pgWindow.default.pgAdmin.Browser.docker.findPanels('frm_datagrid'), function(p) {