Fluentui: Checkbox label is read twice in scan mode

[kisiebel]

Codepen demonstrating the issue

https://codepen.io/anon/pen/zgzZXP?&editable=true.

Actual behavior:

In scan mode on narrator, there are two focus locations and the label is read twice.

Expected behavior:

There should be one focus location and the label should be read once.

Documentation describing expected behavior

https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/checkbox-1.html

[marygans]

Hi @kisiebel thank you for submitting this issue! Just to clarify, when you mention that there are two reference locations does that sound similar to the behavior described in this issue?

As far as the label being read twice, when I tested this my screen reader read: "Standard checkbox, unchecked, checkbox" Is that what you are experiencing as well? (see below)

[kisiebel]

Hey @marygans - that linked issue does sound similar. The behavior that I'm talking about is slightly different from your description though. I found the bug on Narrator, and it behavior is slightly different on Voiceover (which it looks like you are using). If you are using narrator in scan mode, and you press down to reach the checkbox, narrator reads "unchecked checkbox, standard checkbox." Pressing down again moves the narrator focus to the text, and so narrator then reads "standard checkbox." The problem is that after pressing down when on the checkbox, narrator is still on the checkbox. To repro in voiceover, I had to navigate using Ctrl + option + which is the equivalent of scan mode. When I did that in safari Voiceover read "Standard checkbox, checked, checkbox." Once there, pressing Ctrl + option + right arrow then made it read "Standard checkbox." I think the problem is that in these modes, screen reader programs find the checkbox itself and the text that is labeling it, which is a bit confusing.

[JasonGore]

What is the behavior with Narrator and Edge? Narrator's functionality tends to be much more limited in other browsers and differences of behavior tend to be issues with Narrator and not Fabric.

[JasonGore]

Actually it is unclear to me in the original description for which screen reader and browser this is being reported against. Can you please clarify?

[kisiebel]

Sorry - the Narrator behavior that I described was in Edge. It repros with Voiceover and Safari as well (although what exactly is read is slightly different).

[aneeshack4]

@kisiebel With Voiceover & Safari, are you on the latest version of iOS? Another voiceover issue on fabric just got resolved with updating.

[kisiebel]

Sorry that's Voiceover and Safari on Mac. I'm not on the latest version of Mac OS, so maybe the issue is fixed on Voiceover on that one. I'll update and see if I can repro. But the bug definitely still repros with Narrator and Edge.

[kisiebel]

It repros for me on Safari with Voiceover even after updating to the latest version of MacOS.

[kisiebel]

I just submitted a PR with a fix: https://github.com/OfficeDev/office-ui-fabric-react/pull/10059.

[msft-github-bot]

:tada:This issue was addressed in #10059, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[msft-github-bot]

:tada:This issue was addressed in #10059, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site