JAWS issues with carbon components (for IBM Blockchain usage)

[matthewgallo]

Components that we've seen this behavior:
<Dropdown /> ----> https://github.ibm.com/IBM-Blockchain/OpTools/issues/3696, https://github.ibm.com/IBM-Blockchain/OpTools/issues/3712
<FileUploader /> ----> https://github.ibm.com/IBM-Blockchain/OpTools/issues/3702
<Button /> ----> https://github.ibm.com/IBM-Blockchain/OpTools/issues/3702
<Slider /> ----> https://github.ibm.com/IBM-Blockchain/OpTools/issues/3709, https://github.ibm.com/IBM-Blockchain/OpTools/issues/3711

Environment

Operating system
Windows (via Microsoft remote desktop from Mac)
Browser
Edge
Assistive technology used to verify
JAWS

Detailed description

We have received an a11y issue after our application went through AVT testing. The main issue is that the form label that JAWS should read is the visible label text of the dropdown, however, it is reading/setting the first item in the dropdown as the form label.

What version of the Carbon Design System are you using?

"carbon-components": "^10.10.2",
"carbon-components-react": "^7.10.2",

What did you expect to happen?
Expected the visible dropdown label to match the form label that JAWS reads to the user.
What happened instead?
The first item in the dropdown was selected as the form label.
What WCAG 2.1 checkpoint does the issue violate?

Steps to reproduce the issue

1. Keep JAWS running
2. Login to the https://test.cloud.ibm.com/
3. Open https://test.cloud.ibm.com/resources
4. Open an existing Blockchain Platform 2.0 service
5. Click on Launch the IBM Blockchain Platform button
6. Switch the Settings tab
7. Press Insert+F5 to open Forms dialog

Please create a reduced test case in CodeSandbox

• React:
  Standard dropdown, but if viewing in Windows, the form label for the dropdown doesn't match the visible label text for the dropdown
  https://codesandbox.io/s/agitated-khayyam-idr38

Additional information

See additional info from the AVT issue/s we received:
https://github.ibm.com/IBM-Blockchain/OpTools/issues/3696
https://github.ibm.com/IBM-Blockchain/OpTools/issues/3712
https://github.ibm.com/IBM-Blockchain/OpTools/issues/3702 (similar issue but for <Button /> and <FileUploader /> component)
https://github.ibm.com/IBM-Blockchain/OpTools/issues/3709 (similar issue but for <Slider /> component)
https://github.ibm.com/IBM-Blockchain/OpTools/issues/3711

• Screenshots or code
  https://media.github.ibm.com/user/25201/files/89e72880-6c51-11ea-99bf-96712e6dc792
  https://media.github.ibm.com/user/25201/files/480faf80-6c5c-11ea-9835-aaae61d2d004
  https://media.github.ibm.com/user/25201/files/337fe700-6c5d-11ea-9066-ae3f3b6fa7b7
• Notes

[joshblack]

cc @dakahn would you have a chance today/tomorrow to help verify these issues in JAWS? Would love to pair up on it too if you want just to learn how to do this with JAWS 👀

[dakahn]

We'll test this against the newly upgraded Downshift tomorrow and report back. Thanks for reporting 👍

[matthewgallo]

Thanks @dakahn and @joshblack!

[dakahn]

Did a check on our master branch with the Downshift update on Windows 10 with JAWS 2020 on Firefox latest. The form element's designated label "This is a dropdown title" was read correctly followed by the Dropdown's label "Dropdown Menu Options".

I'm going to close this issue as resolved since I'm also unable to reproduce the errors mentioned for Button and FileUploader. We can reopen if the AVT errors persist once you've gotten the aforementioned updates.

[matthewgallo]

Hey @dakahn, just wanted to follow up. Glad to hear that the new version of downshift doesn't have this violation anymore for the dropdown. Could you possibly check the other components that had this same violation as well? I believe they were the FileUploader, Button, and Slider

[dakahn]

@matthewgallo we should open distinct tickets for those issues. I can do this for you sometime today.