public inbox for [email protected]help / color / mirror / Atom feed
[pgAdmin4][RM#4772] Add aria-label attribute to buttons used in graphical explain plan 3+ messages / 3 participants [nested] [flat]
* [pgAdmin4][RM#4772] Add aria-label attribute to buttons used in graphical explain plan @ 2019-12-20 12:16 Murtuza Zabuawala <[email protected]> 0 siblings, 1 reply; 3+ messages in thread From: Murtuza Zabuawala @ 2019-12-20 12:16 UTC (permalink / raw) To: pgadmin-hackers 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 Attachments: [application/octet-stream] pgadmin4.diff (4.2K, 3-pgadmin4.diff) download | inline diff: diff --git a/web/pgadmin/misc/static/explain/js/explain.js b/web/pgadmin/misc/static/explain/js/explain.js index 14ca76a158..58d112def9 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>', { diff --git a/web/pgadmin/static/js/dialog_tab_navigator.js b/web/pgadmin/static/js/dialog_tab_navigator.js index 5943711598..b3ffc996f7 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); ^ permalink raw reply [nested|flat] 3+ messages in thread
* Re: [pgAdmin4][RM#4772] Add aria-label attribute to buttons used in graphical explain plan @ 2019-12-27 07:26 Nagesh Dhope <[email protected]> parent: Murtuza Zabuawala <[email protected]> 0 siblings, 1 reply; 3+ messages in thread From: Nagesh Dhope @ 2019-12-27 07:26 UTC (permalink / raw) To: pgadmin-hackers; +Cc: Murtuza Zabuawala <[email protected]> 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); ^ permalink raw reply [nested|flat] 3+ messages in thread
* Re: [pgAdmin4][RM#4772] Add aria-label attribute to buttons used in graphical explain plan @ 2019-12-31 07:55 Akshay Joshi <[email protected]> parent: Nagesh Dhope <[email protected]> 0 siblings, 0 replies; 3+ messages in thread From: Akshay Joshi @ 2019-12-31 07:55 UTC (permalink / raw) To: Nagesh Dhope <[email protected]>; +Cc: pgadmin-hackers; Murtuza Zabuawala <[email protected]> Thanks, patch applied. On Fri, Dec 27, 2019 at 12:56 PM Nagesh Dhope <[email protected]> wrote: > 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 > -- *Thanks & Regards* *Akshay Joshi* *Sr. Software Architect* *EnterpriseDB Software India Private Limited* *Mobile: +91 976-788-8246* ^ permalink raw reply [nested|flat] 3+ messages in thread
end of thread, other threads:[~2019-12-31 07:55 UTC | newest] Thread overview: 3+ messages (download: mbox mbox.gz follow: Atom feed) -- links below jump to the message on this page -- 2019-12-20 12:16 [pgAdmin4][RM#4772] Add aria-label attribute to buttons used in graphical explain plan Murtuza Zabuawala <[email protected]> 2019-12-27 07:26 ` Nagesh Dhope <[email protected]> 2019-12-31 07:55 ` Akshay Joshi <[email protected]>
This inbox is served by agora; see mirroring instructions for how to clone and mirror all data and code used for this inbox