MIME-Version: 1.0
References: 
 <CAFOhELdj6ry4QN+BfCN7uDx1L9uAyiof6o1P0rF4K04VPYAZoA@mail.gmail.com>
In-Reply-To: 
 <CAFOhELdj6ry4QN+BfCN7uDx1L9uAyiof6o1P0rF4K04VPYAZoA@mail.gmail.com>
From: Akshay Joshi <akshay.joshi@enterprisedb.com>
Date: Fri, 19 Mar 2021 11:45:25 +0530
Message-ID: 
 <CANxoLDc3Gbrs=+0nZkKYV8X89Sm0HDqHZsDTY5tW1LDB2eaO0Q@mail.gmail.com>
Subject: Re: [pgAdmin4][Patch]: RM 6317 - Toggle buttons are inaccessible
To: Khushboo Vashi <khushboo.vashi@enterprisedb.com>
Cc: pgadmin-hackers <pgadmin-hackers@postgresql.org>
Content-Type: multipart/alternative; boundary="000000000000ef621a05bddda45e"
Archived-At: 
 <https://www.postgresql.org/message-id/CANxoLDc3Gbrs%3D%2B0nZkKYV8X89Sm0HDqHZsDTY5tW1LDB2eaO0Q%40mail.gmail.com>
Precedence: bulk

--000000000000ef621a05bddda45e
Content-Type: text/plain; charset="UTF-8"

Thanks, patch applied.

On Wed, Mar 17, 2021 at 2:36 PM Khushboo Vashi <
khushboo.vashi@enterprisedb.com> 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*

--000000000000ef621a05bddda45e
Content-Type: text/html; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable

<div dir=3D"ltr">Thanks, patch applied.</div><br><div class=3D"gmail_quote"=
><div dir=3D"ltr" class=3D"gmail_attr">On Wed, Mar 17, 2021 at 2:36 PM Khus=
hboo Vashi &lt;<a href=3D"mailto:khushboo.vashi@enterprisedb.com">khushboo.=
vashi@enterprisedb.com</a>&gt; wrote:<br></div><blockquote class=3D"gmail_q=
uote" style=3D"margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,2=
04);padding-left:1ex"><div dir=3D"ltr">Hi,<div><br></div><div>Please find t=
he attached patch to fix the RM #6317:=C2=A0 Toggle buttons are inaccessibl=
e.</div><div><br></div><div>Our toggle buttons are not the HTML buttons but=
 the combinations of HTML tags which function as a toggle button. As the to=
ggle button itself doesn&#39;t have a label/title as it wrapped around a di=
v, 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 e=
xample: &quot;Can login?, Yes, Toggle. Button&#39;&#39;), 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 labe=
l and the button as different tags, so when the label gets the focus, the s=
creen reader reads it as &quot;Can login? Yes, Toggle Button&quot;, and whe=
n we try to click it, we can&#39;t, as it is just a label.=C2=A0</div><div>=
<br></div><div>To fix this issue, I have put the label inside the toggle di=
v, so the label will belong to the toggle button div itself and with the ne=
w version of Bootstrap-toggle, the role=3D&quot;button&quot; is already the=
re,=C2=A0 so no need to add it.</div><div><br></div><div>I have tested this=
 patch on Mac with VoiceOver (on which I could reproduce the issue) and it =
is working fine.</div><div><br></div><div>After committing=C2=A0this patch,=
 we need to provide the nightly build link to the author of this RM, so he =
can test with a Braille display.</div><div><br></div><div>Thanks,</div><div=
>Khushboo</div><div><br></div><div><br></div></div>
</blockquote></div><br clear=3D"all"><div><br></div>-- <br><div dir=3D"ltr"=
 class=3D"gmail_signature"><div dir=3D"ltr"><div dir=3D"ltr"><div dir=3D"lt=
r"><div dir=3D"ltr"><div dir=3D"ltr"><div><font color=3D"#3333FF"><b><span =
style=3D"color:rgb(0,0,0);font-family:arial,sans-serif;font-size:13px;borde=
r-collapse:collapse">Thanks &amp; Regards</span></b></font></div><div><font=
 color=3D"#3333FF"><b><span style=3D"color:rgb(0,0,0);font-family:arial,san=
s-serif;font-size:13px;border-collapse:collapse">Akshay Joshi</span></b></f=
ont></div><div><font color=3D"#3333FF"><b><span style=3D"color:rgb(0,0,0);f=
ont-family:arial,sans-serif;font-size:13px;border-collapse:collapse">pgAdmi=
n Hacker | Principal Software Architect</span></b></font></div><font color=
=3D"#000000" face=3D"arial, sans-serif"><b><a href=3D"http://edbpostgres.co=
m" target=3D"_blank">EDB Postgres</a></b></font><br><div><b style=3D"color:=
rgb(51,51,255)"><span style=3D"color:rgb(0,0,0);font-family:arial,sans-seri=
f;font-size:13px;border-collapse:collapse">Mobile: +91 976-788-8246<br></sp=
an></b><br></div></div></div></div></div></div></div>

--000000000000ef621a05bddda45e--