Subject: [pgAdmin4][Patch]: RM 6317 - Toggle buttons are inaccessible

From: Khushboo Vashi <[email-masked]>
Date: Wed, 17 Mar 2021 14:36:05 +0530

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

---

From: Akshay Joshi <[email-masked]>
Date: Fri, 19 Mar 2021 11:45:25 +0530

Thanks, patch applied.

On Wed, Mar 17, 2021 at 2:36 PM Khushboo Vashi <
[email-masked]> wrote:

> 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.
>

-- 
*Thanks & Regards*
*Akshay Joshi*
*pgAdmin Hacker | Principal Software Architect*
*EDB Postgres <http://edbpostgres.com>*

*Mobile: +91 976-788-8246*