public inbox for [email protected]  

help / color / mirror / Atom feed

From: Khushboo Vashi <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [pgAdmin4][Patch]: RM 6317 - Toggle buttons are inaccessible
Date: Wed, 17 Mar 2021 14:36:05 +0530
Message-ID: <CAFOhELdj6ry4QN+BfCN7uDx1L9uAyiof6o1P0rF4K04VPYAZoA@mail.gmail.com> (raw)

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();

view thread (2+ 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: [pgAdmin4][Patch]: RM 6317 - Toggle buttons are inaccessible
  In-Reply-To: <CAFOhELdj6ry4QN+BfCN7uDx1L9uAyiof6o1P0rF4K04VPYAZoA@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