public inbox for [email protected]
help / color / mirror / Atom feed[pgAdmin4][Patch]: RM 6317 - Toggle buttons are inaccessible
2+ messages / 2 participants
[nested] [flat]
* [pgAdmin4][Patch]: RM 6317 - Toggle buttons are inaccessible
@ 2021-03-17 09:06 Khushboo Vashi <[email protected]>
2021-03-19 06:15 ` Re: [pgAdmin4][Patch]: RM 6317 - Toggle buttons are inaccessible Akshay Joshi <[email protected]>
0 siblings, 1 reply; 2+ messages in thread
From: Khushboo Vashi @ 2021-03-17 09:06 UTC (permalink / raw)
To: pgadmin-hackers
Hi,
Please find the attached patch to fix the RM #6317: Toggle buttons are
inaccessible.
Our toggle buttons are not the HTML buttons but the combinations of HTML
tags which function as a toggle button. As the toggle button itself doesn't
have a label/title as it wrapped around a div, we have provided the extra
hidden label above the toggle button div, so on receiving the focus, toggle
button will read the label we provided(For example: "Can login?, Yes,
Toggle. Button''), which was working as expected with Chrome Screen Reader
extension, on which we have tested. Unfortunately, most screen readers like
VoiceOver, NVDA etc.. read the label and the button as different tags, so
when the label gets the focus, the screen reader reads it as "Can login?
Yes, Toggle Button", and when we try to click it, we can't, as it is just a
label.
To fix this issue, I have put the label inside the toggle div, so the label
will belong to the toggle button div itself and with the new version of
Bootstrap-toggle, the role="button" is already there, so no need to add it.
I have tested this patch on Mac with VoiceOver (on which I could reproduce
the issue) and it is working fine.
After committing this patch, we need to provide the nightly build link to
the author of this RM, so he can test with a Braille display.
Thanks,
Khushboo
Attachments:
[application/octet-stream] RM_6317.patch (1.5K, 3-RM_6317.patch)
download | inline diff:
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index c12882f13..6dbd0e278 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -587,7 +587,6 @@ define([
},
template: _.template([
'<span class="<%=controlLabelClassName%>"><%=label%></span>',
- '<label class="sr-value sr-only" for="<%=cId%>"></label>',
'<div class="<%=controlsClassName%> <%=extraClasses.join(\' \')%>">',
' <input tabindex="-1" type="checkbox" aria-hidden="true" aria-label="' + gettext('Toggle button') + '" data-style="quick" data-toggle="toggle"',
' data-size="<%=options.size%>" data-height="<%=options.height%>" ',
@@ -615,11 +614,11 @@ define([
if(this.$el.find('.toggle.btn').hasClass('off')) {
this.$el.find('.sr-value').text(`
- ${label}, ${offText}, ` + gettext('Toggle button') + `
+ ${label}, ${offText}, ` + gettext('Toggle') + `
`);
} else {
this.$el.find('.sr-value').text(`
- ${label}, ${onText}, ` + gettext('Toggle button') + `
+ ${label}, ${onText}, ` + gettext('Toggle') + `
`);
}
},
@@ -693,6 +692,7 @@ define([
.attr('id', data.cId);
this.$el.find('.toggle.btn .toggle-group .btn').attr('aria-hidden', true);
+ this.$el.find('div.toggle').append('<label class="sr-value sr-only" for="<%=cId%>"></label>');
this.setSrValue();
this.updateInvalid();
^ permalink raw reply [nested|flat] 2+ messages in thread
* Re: [pgAdmin4][Patch]: RM 6317 - Toggle buttons are inaccessible
2021-03-17 09:06 [pgAdmin4][Patch]: RM 6317 - Toggle buttons are inaccessible Khushboo Vashi <[email protected]>
@ 2021-03-19 06:15 ` Akshay Joshi <[email protected]>
0 siblings, 0 replies; 2+ messages in thread
From: Akshay Joshi @ 2021-03-19 06:15 UTC (permalink / raw)
To: Khushboo Vashi <[email protected]>; +Cc: pgadmin-hackers
Thanks, patch applied.
On Wed, Mar 17, 2021 at 2:36 PM Khushboo Vashi <
[email protected]> wrote:
> Hi,
>
> Please find the attached patch to fix the RM #6317: Toggle buttons are
> inaccessible.
>
> Our toggle buttons are not the HTML buttons but the combinations of HTML
> tags which function as a toggle button. As the toggle button itself doesn't
> have a label/title as it wrapped around a div, we have provided the extra
> hidden label above the toggle button div, so on receiving the focus, toggle
> button will read the label we provided(For example: "Can login?, Yes,
> Toggle. Button''), which was working as expected with Chrome Screen Reader
> extension, on which we have tested. Unfortunately, most screen readers like
> VoiceOver, NVDA etc.. read the label and the button as different tags, so
> when the label gets the focus, the screen reader reads it as "Can login?
> Yes, Toggle Button", and when we try to click it, we can't, as it is just a
> label.
>
> To fix this issue, I have put the label inside the toggle div, so the
> label will belong to the toggle button div itself and with the new version
> of Bootstrap-toggle, the role="button" is already there, so no need to add
> it.
>
> I have tested this patch on Mac with VoiceOver (on which I could reproduce
> the issue) and it is working fine.
>
> After committing this patch, we need to provide the nightly build link to
> the author of this RM, so he can test with a Braille display.
>
> Thanks,
> Khushboo
>
>
>
--
*Thanks & Regards*
*Akshay Joshi*
*pgAdmin Hacker | Principal Software Architect*
*EDB Postgres <http://edbpostgres.com>*
*Mobile: +91 976-788-8246*
^ permalink raw reply [nested|flat] 2+ messages in thread
end of thread, other threads:[~2021-03-19 06:15 UTC | newest]
Thread overview: 2+ messages (download: mbox mbox.gz follow: Atom feed)
-- links below jump to the message on this page --
2021-03-17 09:06 [pgAdmin4][Patch]: RM 6317 - Toggle buttons are inaccessible Khushboo Vashi <[email protected]>
2021-03-19 06:15 ` 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