MIME-Version: 1.0
From: Khushboo Vashi <khushboo.vashi@enterprisedb.com>
Date: Wed, 17 Mar 2021 14:36:05 +0530
Message-ID: 
 <CAFOhELdj6ry4QN+BfCN7uDx1L9uAyiof6o1P0rF4K04VPYAZoA@mail.gmail.com>
Subject: [pgAdmin4][Patch]: RM 6317 - Toggle buttons are inaccessible
To: pgadmin-hackers <pgadmin-hackers@postgresql.org>
Content-Type: multipart/mixed; boundary="000000000000e9bce605bdb7ca06"
Archived-At: 
 <https://www.postgresql.org/message-id/CAFOhELdj6ry4QN%2BBfCN7uDx1L9uAyiof6o1P0rF4K04VPYAZoA%40mail.gmail.com>
Precedence: bulk

--000000000000e9bce605bdb7ca06
Content-Type: multipart/alternative; boundary="000000000000e9bce405bdb7ca04"

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

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

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

<div dir=3D"ltr">Hi,<div><br></div><div>Please find the attached patch to f=
ix the RM #6317:=C2=A0 Toggle buttons are inaccessible.</div><div><br></div=
><div>Our toggle buttons are not the HTML buttons but the combinations of H=
TML tags which function as a toggle button. As the toggle button itself doe=
sn&#39;t have a label/title as it wrapped around a div, we have provided th=
e extra hidden label above the toggle button div, so on receiving the focus=
, toggle button will read the label we provided(For example: &quot;Can logi=
n?, Yes, Toggle. Button&#39;&#39;), which was working as expected with Chro=
me Screen Reader extension, on which we have tested. Unfortunately, most sc=
reen readers like VoiceOver, NVDA etc.. read the label and the button as di=
fferent tags, so when the label gets the focus, the screen reader reads it =
as &quot;Can login? Yes, Toggle Button&quot;, and when 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 div, so the label will b=
elong to the toggle button div itself and with the new version of Bootstrap=
-toggle, the role=3D&quot;button&quot; is already there,=C2=A0 so no need t=
o add it.</div><div><br></div><div>I have tested this patch on Mac with Voi=
ceOver (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 th=
e nightly build link to the author of this RM, so he can test with a Braill=
e display.</div><div><br></div><div>Thanks,</div><div>Khushboo</div><div><b=
r></div><div><br></div></div>

--000000000000e9bce405bdb7ca04--

--000000000000e9bce605bdb7ca06
Content-Type: application/octet-stream; name="RM_6317.patch"
Content-Disposition: attachment; filename="RM_6317.patch"
Content-Transfer-Encoding: base64
Content-ID: <f_kmd7yvbc0>
X-Attachment-Id: f_kmd7yvbc0

ZGlmZiAtLWdpdCBhL3dlYi9wZ2FkbWluL3N0YXRpYy9qcy9iYWNrZm9ybS5wZ2FkbWluLmpzIGIv
d2ViL3BnYWRtaW4vc3RhdGljL2pzL2JhY2tmb3JtLnBnYWRtaW4uanMKaW5kZXggYzEyODgyZjEz
Li42ZGJkMGUyNzggMTAwNjQ0Ci0tLSBhL3dlYi9wZ2FkbWluL3N0YXRpYy9qcy9iYWNrZm9ybS5w
Z2FkbWluLmpzCisrKyBiL3dlYi9wZ2FkbWluL3N0YXRpYy9qcy9iYWNrZm9ybS5wZ2FkbWluLmpz
CkBAIC01ODcsNyArNTg3LDYgQEAgZGVmaW5lKFsKICAgICB9LAogICAgIHRlbXBsYXRlOiBfLnRl
bXBsYXRlKFsKICAgICAgICc8c3BhbiBjbGFzcz0iPCU9Y29udHJvbExhYmVsQ2xhc3NOYW1lJT4i
PjwlPWxhYmVsJT48L3NwYW4+JywKLSAgICAgICc8bGFiZWwgY2xhc3M9InNyLXZhbHVlIHNyLW9u
bHkiIGZvcj0iPCU9Y0lkJT4iPjwvbGFiZWw+JywKICAgICAgICc8ZGl2IGNsYXNzPSI8JT1jb250
cm9sc0NsYXNzTmFtZSU+IDwlPWV4dHJhQ2xhc3Nlcy5qb2luKFwnIFwnKSU+Ij4nLAogICAgICAg
JyAgICAgIDxpbnB1dCB0YWJpbmRleD0iLTEiIHR5cGU9ImNoZWNrYm94IiBhcmlhLWhpZGRlbj0i
dHJ1ZSIgYXJpYS1sYWJlbD0iJyArIGdldHRleHQoJ1RvZ2dsZSBidXR0b24nKSArICciIGRhdGEt
c3R5bGU9InF1aWNrIiBkYXRhLXRvZ2dsZT0idG9nZ2xlIicsCiAgICAgICAnICAgICAgZGF0YS1z
aXplPSI8JT1vcHRpb25zLnNpemUlPiIgZGF0YS1oZWlnaHQ9IjwlPW9wdGlvbnMuaGVpZ2h0JT4i
ICAnLApAQCAtNjE1LDExICs2MTQsMTEgQEAgZGVmaW5lKFsKIAogICAgICAgaWYodGhpcy4kZWwu
ZmluZCgnLnRvZ2dsZS5idG4nKS5oYXNDbGFzcygnb2ZmJykpIHsKICAgICAgICAgdGhpcy4kZWwu
ZmluZCgnLnNyLXZhbHVlJykudGV4dChgCi0gICAgICAgICAgJHtsYWJlbH0sICR7b2ZmVGV4dH0s
IGAgKyBnZXR0ZXh0KCdUb2dnbGUgYnV0dG9uJykgKyBgCisgICAgICAgICAgJHtsYWJlbH0sICR7
b2ZmVGV4dH0sIGAgKyBnZXR0ZXh0KCdUb2dnbGUnKSArIGAKICAgICAgICAgYCk7CiAgICAgICB9
IGVsc2UgewogICAgICAgICB0aGlzLiRlbC5maW5kKCcuc3ItdmFsdWUnKS50ZXh0KGAKLSAgICAg
ICAgICAke2xhYmVsfSwgJHtvblRleHR9LCBgICsgZ2V0dGV4dCgnVG9nZ2xlIGJ1dHRvbicpICsg
YAorICAgICAgICAgICR7bGFiZWx9LCAke29uVGV4dH0sIGAgKyBnZXR0ZXh0KCdUb2dnbGUnKSAr
IGAKICAgICAgICAgYCk7CiAgICAgICB9CiAgICAgfSwKQEAgLTY5Myw2ICs2OTIsNyBAQCBkZWZp
bmUoWwogICAgICAgICAuYXR0cignaWQnLCBkYXRhLmNJZCk7CiAKICAgICAgIHRoaXMuJGVsLmZp
bmQoJy50b2dnbGUuYnRuIC50b2dnbGUtZ3JvdXAgLmJ0bicpLmF0dHIoJ2FyaWEtaGlkZGVuJywg
dHJ1ZSk7CisgICAgICB0aGlzLiRlbC5maW5kKCdkaXYudG9nZ2xlJykuYXBwZW5kKCc8bGFiZWwg
Y2xhc3M9InNyLXZhbHVlIHNyLW9ubHkiIGZvcj0iPCU9Y0lkJT4iPjwvbGFiZWw+Jyk7CiAgICAg
ICB0aGlzLnNldFNyVmFsdWUoKTsKIAogICAgICAgdGhpcy51cGRhdGVJbnZhbGlkKCk7Cg==
--000000000000e9bce605bdb7ca06--