public inbox for [email protected]  
help / color / mirror / Atom feed
From: Nagesh Dhope <[email protected]>
To: pgadmin-hackers <[email protected]>
Cc: Murtuza Zabuawala <[email protected]>
Subject: Re: [pgAdmin4][RM#4772] Add aria-label attribute to buttons used in graphical explain plan
Date: Fri, 27 Dec 2019 12:56:27 +0530
Message-ID: <CAA3zdZrxSoNSn5ytpcDUN5cfWKk2BU5XnDXULEjWDxfR1pJuBA@mail.gmail.com> (raw)
In-Reply-To: <CAKKotZRP_33MFutzVv15yE1A+-KHh+c5+JBH8DV5XprRZv4wPg@mail.gmail.com>
References: <CAKKotZRP_33MFutzVv15yE1A+-KHh+c5+JBH8DV5XprRZv4wPg@mail.gmail.com>

Hi Hackers,
Please find an updated patch. The patch includes fix for not to blur the
focus from (Zoom in, Zoom out, Zoom to original and Download) button after
a click.


On Fri, Dec 20, 2019 at 5:47 PM Murtuza Zabuawala <
[email protected]> wrote:

> Hi,
>
> PFA patch for adding aria-label to buttons used in graphical explain plan
> section.
>
> - Fixed another minor issue where we will only use dialog tab navigator
> keyboard shortcuts only on visible tabs.
>
>
> --
> Regards,
> Murtuza Zabuawala
> EnterpriseDB: http://www.enterprisedb.com
> The Enterprise PostgreSQL Company
>
>

-- 
Thanks,
Nagesh


Attachments:

  [application/octet-stream] RM4772.patch (5.6K, 3-RM4772.patch)
  download | inline diff:
diff --git a/web/pgadmin/misc/static/explain/js/explain.js b/web/pgadmin/misc/static/explain/js/explain.js
index 14ca76a..9b7ef40 100644
--- a/web/pgadmin/misc/static/explain/js/explain.js
+++ b/web/pgadmin/misc/static/explain/js/explain.js
@@ -1283,7 +1283,8 @@ define('pgadmin.misc.explain', [
         }).appendTo(graphicalContainer),
         zoomInBtn = $('<button></button>', {
           class: 'btn btn-secondary pg-explain-zoom-btn',
-          title: 'Zoom in',
+          title: gettext('Zoom in'),
+          'aria-label': gettext('Zoom in'),
           tabindex: 0,
         }).appendTo(zoomArea).append(
           $('<i></i>', {
@@ -1291,7 +1292,8 @@ define('pgadmin.misc.explain', [
           })),
         zoomToNormal = $('<button></button>', {
           class: 'btn btn-secondary pg-explain-zoom-btn',
-          title: 'Zoom to original',
+          title: gettext('Zoom to original'),
+          'aria-label': gettext('Zoom to original'),
           tabindex: 0,
         }).appendTo(zoomArea).append(
           $('<i></i>', {
@@ -1299,7 +1301,8 @@ define('pgadmin.misc.explain', [
           })),
         zoomOutBtn = $('<button></button>', {
           class: 'btn btn-secondary pg-explain-zoom-btn',
-          title: 'Zoom out',
+          title: gettext('Zoom out'),
+          'aria-label': gettext('Zoom out'),
           tabindex: 0,
         }).appendTo(zoomArea).append(
           $('<i></i>', {
@@ -1313,7 +1316,8 @@ define('pgadmin.misc.explain', [
         downloadBtn = $('<button></button>', {
           id: 'btn-explain-download',
           class: 'btn btn-secondary pg-explain-download-btn',
-          title: 'Download',
+          title: gettext('Download'),
+          'aria-label': gettext('Download'),
           tabindex: 0,
           disabled: function() {
             var current_browser = pgAdmin.Browser.get_browser();
@@ -1341,7 +1345,8 @@ define('pgadmin.misc.explain', [
       $('<button></button>', {
         id: 'btn-explain-stats',
         class: 'btn btn-secondary pg-explain-stats-btn',
-        title: 'Statistics',
+        title: gettext('Statistics'),
+        'aria-label': gettext('Statistics'),
         tabindex: 0,
       }).appendTo(statsArea).append(
         $('<i></i>', {
@@ -1380,7 +1385,6 @@ define('pgadmin.misc.explain', [
           var today  = new Date();
           var filename = 'explain_plan_' + today.getTime() + '.svg';
           svgDownloader.downloadSVG(s.toString(), filename);
-          downloadBtn.trigger('blur');
         }
       };
 
@@ -1450,7 +1454,6 @@ define('pgadmin.misc.explain', [
             'height': h * curr_zoom_factor,
           });
           planDiv.data('zoom-factor', curr_zoom_factor);
-          zoomInBtn.trigger('blur');
         });
 
         zoomOutBtn.on('click', function() {
@@ -1466,7 +1469,6 @@ define('pgadmin.misc.explain', [
             'height': h * curr_zoom_factor,
           });
           planDiv.data('zoom-factor', curr_zoom_factor);
-          zoomOutBtn.trigger('blur');
         });
 
         zoomToNormal.on('click', function() {
@@ -1482,7 +1484,6 @@ define('pgadmin.misc.explain', [
             'height': h * curr_zoom_factor,
           });
           planDiv.data('zoom-factor', curr_zoom_factor);
-          zoomToNormal.trigger('blur');
         });
 
         downloadBtn.on('click', function() {
@@ -1495,7 +1496,6 @@ define('pgadmin.misc.explain', [
               var today  = new Date();
               var filename = 'explain_plan_' + today.getTime() + '.svg';
               svgDownloader.downloadSVG(s.toString(), filename);
-              downloadBtn.trigger('blur');
             }
           });
         });
diff --git a/web/pgadmin/static/js/dialog_tab_navigator.js b/web/pgadmin/static/js/dialog_tab_navigator.js
index 5943711..b3ffc99 100644
--- a/web/pgadmin/static/js/dialog_tab_navigator.js
+++ b/web/pgadmin/static/js/dialog_tab_navigator.js
@@ -19,7 +19,7 @@ class dialogTabNavigator {
 
     this.tabSwitching = false;
 
-    this.tabs = this.dialogContainer.find('.nav-tabs');
+    this.tabs = this.dialogContainer.find('.nav-tabs:visible');
 
     if (this.tabs.length > 0 ) {
       this.tabs = this.tabs[0];
@@ -35,7 +35,7 @@ class dialogTabNavigator {
 
   onKeyboardEvent(event, shortcut) {
     var currentTabPane =  this.dialogContainer
-        .find('.tab-content:first > .tab-pane.active:first'),
+        .find('.tab-content:first > .tab-pane.active:first:visible'),
       childTabData = this.isActivePaneHasChildTabs(currentTabPane);
 
     if (this.tabSwitching) {
@@ -57,12 +57,12 @@ class dialogTabNavigator {
   }
 
   isActivePaneHasChildTabs(currentTabPane) {
-    var childTab = currentTabPane.find('.nav-tabs:first'),
+    var childTab = currentTabPane.find('.nav-tabs:first:visible'),
       childTabPane;
 
     if (childTab.length > 0) {
       childTabPane = currentTabPane
-        .find('.tab-content:first > .tab-pane.active:first');
+        .find('.tab-content:first > .tab-pane.active:first:visible');
 
       return {
         'childTab': childTab,
@@ -93,7 +93,7 @@ class dialogTabNavigator {
 
       nextTabPane = tab_pane.prev();
       innerTabContainer = nextTabPane
-        .find('.tab-content:first > .tab-pane.active:first');
+        .find('.tab-content:first > .tab-pane.active:first:visible');
 
       if (innerTabContainer.length > 0) {
         findAndSetFocus(innerTabContainer);
@@ -124,7 +124,7 @@ class dialogTabNavigator {
 
       nextTabPane = tab_pane.next();
       innerTabContainer = nextTabPane
-        .find('.tab-content:first > .tab-pane.active:first');
+        .find('.tab-content:first > .tab-pane.active:first:visible');
 
       if (innerTabContainer.length > 0) {
         findAndSetFocus(innerTabContainer);


view thread (3+ messages)  latest in thread

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected], [email protected]
  Subject: Re: [pgAdmin4][RM#4772] Add aria-label attribute to buttons used in graphical explain plan
  In-Reply-To: <CAA3zdZrxSoNSn5ytpcDUN5cfWKk2BU5XnDXULEjWDxfR1pJuBA@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox