Fluentui: Focus indicator not visible after activating the "Contextual Menu button" using keyboard

[iamrafan]

Environment Information

• Package version(s): 7.84.0
• Browser and OS versions: Chrome -Version 79.0.3945.130, Windows 10 - Version 1903, OS Build - 18362.476

Describe the issue:

When navigating using NVDA or JAWS, the focus indicator is not visible upon activating "Contextual Menu Button" using keyboard.

• The ms-Fabric--isFocusVisible class is being changed to ms-Fabric--isFocusHidden upon activating the contextual menu button.

Please provide a reproduction of the issue in a codepen:

https://codepen.io/iamrafan/pen/RwNdpOK?editable=true

Actual behavior:

The focus indicator on the first menuitem "Email Message" is not visible after activating the "New item" menu using a keyboard

Expected behavior:

The focus indicator on the first menuitem "Email Message" should be visible after activating the "New item" menu using a keyboard

Documentation describing expected behavior

https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_discernable_predictable

[khmakoto]

Hi @iamrafan I'm able to repro the behavior you're experiencing but sparingly and I'm not even sure if it is the same thing you're seeing. Could you provide some screenshots or a GIF of what you're seeing to verify we're experiencing the same thing? Thank you!

[iamrafan]

Hi @khmakoto , here is the GIF. It happens when using NVDA or JAWS.

I activated the button by pressing "enter" key and used "down arrow" key to navigate to the second list option.

[khmakoto]

Hi @iamrafan, yes, it's the same behavior I experienced but I could not get it to repro when not using NVDA or JAWS. Can you? If you can't I would suggest filing an issue with NVDA/Jaws, because from what I can see we're setting focus correctly and the behavior on the browser itself seems correct, with the issue being NVDA/Jaws messing up styling.

[iamrafan]

I will file the issue with NVDA/JAWS too.

But isn't the ms-Fabric--isFocusHidden class added by OF when using NVDA/JAWS? Since OF adds styling to override the native focus, isn't the onus on OF to maintain the styling?

[khmakoto]

For sure, the style is on us, but I think that there is something NVDA/JAWS are doing with the focus selector that is making that class be added. If it wasn't then we would see the same behavior with the browser without having NVDA/JAWS turned on.

[iamrafan]

Ok, since this issue is seen when using not one but two screen readers, I was wondering if it needs to be investigated on OF's end too?

[khmakoto]

Yes, I'll keep investigating, just wanted to make sure this was raised on their channels as well 😃

[iamrafan]

Here are the NVDA and JAWS bugs I filed:

• https://github.com/nvaccess/nvda/issues/10727
• https://github.com/FreedomScientific/VFO-standards-support/issues/364

[iamrafan]

@khmakoto Please let me know if you have any update on this issue?