public inbox for [email protected]
help / color / mirror / Atom feedFrom: Pradip Parkale <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: Re: [pgAdmin][RM5154] [Accessibility] : Alertify
Date: Thu, 5 Mar 2020 18:02:05 +0530
Message-ID: <CAJ9T6St_qxxsuBdMhTARxoTi7crmz-nF9Y518mhwC2teShqFow@mail.gmail.com> (raw)
In-Reply-To: <CANxoLDfG8-OzFDAqumdTrk4KdONTCicw_5Ma-x1nqhRJf+_M0Q@mail.gmail.com>
References: <CAJ9T6SsEuKBVz35pA0X+G7u6Z0JcV8ZAHB46kRD1PiovmJrhpg@mail.gmail.com>
<CAG7mmoy5TCYNYPcD31FG=-jHzRJG7pdiNrFVXsFnVNKY+Qp8VQ@mail.gmail.com>
<CAJ9T6Su8cJBL4khVrE1h4U8d0EAyiadLyseFaoKEtJ6-tJ_rgA@mail.gmail.com>
<CANxoLDeefWqrFZHSyTE4Ugh2Dity0cUwoHNaMZemtRnqt-pfEA@mail.gmail.com>
<CAM9w-_n9oO0Dz5sVb+wHkqbmzsS8gZdG-DJ7h9DELgoa9kk42A@mail.gmail.com>
<CAJ9T6SuA5a0pYGMduuvpZnqXfvKmaOC45v9jc-mZm1DQ8bH=sA@mail.gmail.com>
<CANxoLDfG8-OzFDAqumdTrk4KdONTCicw_5Ma-x1nqhRJf+_M0Q@mail.gmail.com>
Hi Hackers,
Please find the updated patch for RM5143.
On Tue, Feb 25, 2020 at 6:26 PM Akshay Joshi <[email protected]>
wrote:
> Thanks, patch applied.
>
> On Tue, Feb 25, 2020 at 3:32 PM Pradip Parkale <
> [email protected]> wrote:
>
>> Hi Akshay/Aditya,
>>
>> Please find the updated patch. I have accommodated all the changes.
>>
>>
>> On Mon, Feb 24, 2020 at 2:34 PM Aditya Toshniwal <
>> [email protected]> wrote:
>>
>>> Hi Pradip,
>>>
>>> -
>>> commonUtils.findAndSetFocus($(alertifyDialog.elements.body).find('.tab-content
>>> div.active'));
>>> +
>>> $(alertifyDialog.elements.dialog).find('[tabindex]:not([tabindex="-1"]').first().focus();
>>>
>>> Use the same common function with
>>> commonUtils.findAndSetFocus(alertifyDialog.elements.dialog)). It will
>>> handle the focus.
>>>
>> Fixed.
>>
>>> Also, make the required changes mentioned on the pull request -
>>> https://github.com/EnterpriseDB/AlertifyJS/pull/1
>>>
>> Fixed.
>>
>>>
>>>
>>> On Fri, Feb 21, 2020 at 11:19 AM Akshay Joshi <
>>> [email protected]> wrote:
>>>
>>>> Hi Aditya
>>>>
>>>> Can you please review this patch.
>>>>
>>>> On Wed, Feb 19, 2020 at 5:04 PM Pradip Parkale <
>>>> [email protected]> wrote:
>>>>
>>>>> Please find the attached patch.
>>>>>
>>>>> On Wed, Feb 19, 2020 at 5:02 PM Ashesh Vashi <
>>>>> [email protected]> wrote:
>>>>>
>>>>>> Forgot to attach the patch?
>>>>>>
>>>>>> On Wed, 19 Feb 2020 at 16:58, Pradip Parkale <
>>>>>> [email protected]> wrote:
>>>>>>
>>>>>>> Hi Hackers,
>>>>>>>
>>>>>>> Attached is a patch for accessibility issue related Alertifyjs.
>>>>>>>
>>>>>>> 1. Added hidden label to satisfy accessibility.
>>>>>>> 2. Added label with sr-only class.
>>>>>>> 3. Added tabindex to move the mouse control to the maximize
>>>>>>> button using the tab key.
>>>>>>>
>>>>>>>
>>>>>>> Please note that this patch also includes the fix for the
>>>>>>> RM-5143 Accessibility issue to maximize the panel for backup and restore
>>>>>>> windows and all other places.
>>>>>>> --
>>>>>>> Thanks & Regards,
>>>>>>> Pradip Parkale
>>>>>>> QMG, EnterpriseDB Corporation
>>>>>>>
>>>>>> --
>>>>>>
>>>>>> --
>>>>>>
>>>>>> Thanks & Regards,
>>>>>>
>>>>>> Ashesh Vashi
>>>>>> EnterpriseDB INDIA: Enterprise PostgreSQL Company
>>>>>> <http://www.enterprisedb.com;
>>>>>>
>>>>>>
>>>>>> *http://www.linkedin.com/in/asheshvashi*
>>>>>> <http://www.linkedin.com/in/asheshvashi;
>>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> Thanks & Regards,
>>>>> Pradip Parkale
>>>>> QMG, EnterpriseDB Corporation
>>>>>
>>>>
>>>>
>>>> --
>>>> *Thanks & Regards*
>>>> *Akshay Joshi*
>>>>
>>>> *Sr. Software Architect*
>>>> *EnterpriseDB Software India Private Limited*
>>>> *Mobile: +91 976-788-8246*
>>>>
>>>
>>>
>>> --
>>> Thanks and Regards,
>>> Aditya Toshniwal
>>> pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune
>>> "Don't Complain about Heat, Plant a TREE"
>>>
>>
>>
>> --
>> Thanks & Regards,
>> Pradip Parkale
>> QMG, EnterpriseDB Corporation
>>
>
>
> --
> *Thanks & Regards*
> *Akshay Joshi*
>
> *Sr. Software Architect*
> *EnterpriseDB Software India Private Limited*
> *Mobile: +91 976-788-8246*
>
--
Thanks & Regards,
Pradip Parkale
QMG, EnterpriseDB Corporation
Attachments:
[application/octet-stream] RM5143_v2.patch (7.1K, 3-RM5143_v2.patch)
download | inline diff:
diff --git a/web/pgadmin/about/static/js/about.js b/web/pgadmin/about/static/js/about.js
index 5b711d4cc..c294ed65e 100644
--- a/web/pgadmin/about/static/js/about.js
+++ b/web/pgadmin/about/static/js/about.js
@@ -9,9 +9,9 @@
define(
['jquery', 'alertify', 'sources/pgadmin', 'sources/gettext',
- 'sources/url_for',
+ 'sources/url_for','sources/utils',
],
- function($, alertify, pgAdmin, gettext, url_for) {
+ function($, alertify, pgAdmin, gettext, url_for, commonUtils) {
pgAdmin = pgAdmin || window.pgAdmin || {};
/* Return back, this has been called more than once */
@@ -43,8 +43,16 @@ define(
build: function() {
alertify.pgDialogBuild.apply(this);
},
+ hooks:{
+ onshow:function(){
+ var container = $(this.elements.footer).find('button:not([disabled])');
+ commonUtils.findAndSetFocus(container);
+ },
+ },
+
prepare:function() {
this.setContent(this.message);
+
},
};
});
diff --git a/web/pgadmin/static/js/alertify.pgadmin.defaults.js b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
index 206a3275a..84dfc12fe 100644
--- a/web/pgadmin/static/js/alertify.pgadmin.defaults.js
+++ b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
@@ -8,8 +8,8 @@
//////////////////////////////////////////////////////////////
define([
- 'sources/gettext', 'alertify', 'jquery',
-], function(gettext, alertify, $) {
+ 'sources/gettext', 'alertify', 'jquery', 'sources/utils',
+], function(gettext, alertify, $, commonUtils) {
alertify.defaults.transition = 'zoom';
alertify.defaults.theme.ok = 'btn btn-primary fa fa-lg fa-check pg-alertify-button';
alertify.defaults.theme.cancel = 'btn btn-secondary fa fa-lg fa-times pg-alertify-button';
@@ -263,7 +263,15 @@ define([
$(this.elements.commands.close).attr('aria-label', gettext('Close'));
$(this.elements.commands.maximize).attr('aria-label', gettext('Maximize'));
alertifyDialogResized.apply(this, arguments);
- });
+ let self = this;
+
+ let cmds = Object.values(this.elements.commands);
+ $(cmds).on('keydown', 'button', (event) => {
+ if (event.shiftKey && event.keyCode == 9 && $(this).nextAll('button:not([disabled])').length == 0){
+ let container = $(self.elements.footer);
+ commonUtils.findAndSetFocus(container.find('button:not([disabled]):last'));
+ }
+ }); });
this.set('onresize', alertifyDialogStartResizing.bind(this, true));
this.set('onresized', alertifyDialogResized.bind(this, true));
this.set('onmaximized', alertifyDialogResized);
@@ -279,6 +287,15 @@ define([
this.__internal.buttons[i]['key'] = null;
}
}
+ let self = this;
+
+ $(this.elements.footer).on('keydown', 'button', function(event) {
+ if (!event.shiftKey && event.keyCode == 9 && $(this).nextAll('button:not([disabled])').length == 0) {
+ // set focus back to first editable input element of current active tab once we cycle through all enabled buttons.
+ commonUtils.findAndSetFocus($(self.elements.dialog));
+ return false;
+ }
+ });
};
alertify.pgHandleItemError = function(xhr, error, message, args) {
diff --git a/web/pgadmin/static/js/alertify/dialog_wrapper.js b/web/pgadmin/static/js/alertify/dialog_wrapper.js
index 5346b6a0d..e4c275f3a 100644
--- a/web/pgadmin/static/js/alertify/dialog_wrapper.js
+++ b/web/pgadmin/static/js/alertify/dialog_wrapper.js
@@ -60,14 +60,6 @@ export class DialogWrapper {
this.pgBrowser.keyboardNavigation.getDialogTabNavigator($(alertifyDialog.elements.dialog));
const container = backform_tab.find('.tab-content:first > .tab-pane.active:first');
commonUtils.findAndSetFocus(container);
-
- $(alertifyDialog.elements.footer).on('keydown', 'button', function(event) {
- if (event.keyCode == 9 && $(this).nextAll('button:not([disabled])').length == 0) {
- // set focus back to first editable input element of current active tab once we cycle through all enabled buttons.
- commonUtils.findAndSetFocus($(alertifyDialog.elements.dialog));
- return false;
- }
- });
}
isNodeSelected(selectedTreeNode) {
diff --git a/web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js b/web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js
index eaaae760b..e5f50fc7d 100644
--- a/web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js
+++ b/web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js
@@ -13,13 +13,14 @@ define([
'pgadmin.alertifyjs', 'pgadmin.backgrid', 'pgadmin.backform',
'pgadmin.browser', 'pgadmin.browser.node',
'tools/grant_wizard/static/js/menu_utils',
+ 'sources/utils',
'sources/nodes/supported_database_node',
'backgrid.select.all',
'backgrid.filter', 'pgadmin.browser.server.privilege',
'pgadmin.browser.wizard',
], function(
gettext, url_for, $, _, Backbone, Alertify, Backgrid, Backform, pgBrowser,
- pgNode, menuUtils, supportedNodes
+ pgNode, menuUtils, commonUtils, supportedNodes
) {
// if module is already initialized, refer to that.
@@ -104,8 +105,6 @@ define([
// Do not use parent's render function. It set's tabindex to -1 on
// checkboxes.
-
-
var col = this.column.get('name');
let id = `row-${_.uniqueId(col)}`;
this.$el.empty().append(`
@@ -429,6 +428,35 @@ define([
});
},
+ hooks: {
+ onshow: function() {
+ commonUtils.findAndSetFocus($(this.elements.body));
+ let self = this;
+ let containerFooter = $(this.elements.content).find('.wizard-buttons').find('.ml-auto');
+ //To get last header button
+ let lastHeaderButton = $(this.elements.content).find('.wizard-header').find('.ml-auto').find('button:first');
+
+ $(containerFooter).on('keydown', 'button', function(event) {
+ if (!event.shiftKey && event.keyCode == 9 && $(this).nextAll('button:not([disabled])').length == 0) {
+ // set focus back to first editable input element of current active tab once we cycle through all enabled buttons.
+ let container = $(self.elements.content).find('.wizard-header');
+ commonUtils.findAndSetFocus(container.find('button:not([disabled]):first'));
+ return false;
+ }
+ });
+
+ $(lastHeaderButton).on('keydown', function(event) {
+ if (event.shiftKey && event.keyCode == 9) {
+ // set focus back to first element of current active tab once we cycle through all enabled buttons.
+ let container = $(self.elements.content).find('.wizard-footer');
+ commonUtils.findAndSetFocus(container.find('button:not([disabled]):last'));
+ return false;
+ }
+ });
+
+ },
+ },
+
prepare: function() {
var that = this;
$container.empty().append('<div class=\'grant_wizard_container\'></div>');
view thread (9+ 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]
Subject: Re: [pgAdmin][RM5154] [Accessibility] : Alertify
In-Reply-To: <CAJ9T6St_qxxsuBdMhTARxoTi7crmz-nF9Y518mhwC2teShqFow@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