Fluentui: Spinner not reading ariaLabel in Narrator

[brzimmer]

Environment Information

• Package version(s): 6.193.0
• Browser and OS versions: Edge, Windows 10 Enterprise -- version 1903

Note that our screen reader support is limited to Edge + Narrator. Issues that do not reproduce in Edge + Narrator, and aren't caused by obvious invalid aria values, should be filed with the respective screen reading software, not the Fabric repo.

Describe the issue:

I have a PrimaryButton used for saving. When I navigate to the button to save the content on the panel, Narrator reads the label as I'd expect. When I press Enter to save the changes, I mount a Spinner as a child to the PrimaryButton. The Spinner has an ariaLabel prop included to indicate that the save is in progress; however, the ariaLabel is not read by Narrator while I'm still focused on the button. In order to hear the ariaLabel read aloud by Narrator, I need to tab all the way through the panel and re-focus on the button.

Please provide a reproduction of the issue in a codepen:

https://codepen.io/brzimmer/pen/vYYjKwe

Actual behavior:

Narrator reads "Save... button" when I initially navigate to the button, but it does not read "Saving" (the ariaLabel) once the button is "clicked".

Expected behavior:

The ariaLabel should be read aloud using Narrator

Documentation describing expected behavior

https://developer.microsoft.com/en-us/fabric#/controls/web/spinner

[JasonGore]

aria-label is primarily used to describe an element rather than communicate a change in state. In this case, it is a save button and that element's label doesn't change, even if its state does. Assistive technologies don't expect this value to change spontaneously and therefore don't communicate it on change, rather only narrate it as the user navigates.

This isn't really a Fabric issue as Fabric is using aria-label as required by the ARIA standard. I don't think Narrator and other screen readers would consider this a bug, so I think the only options are to use aria-live, aria-pressed, or another element role that supports communicating changing state.

Some other links to consider:

• https://stackoverflow.com/questions/40088542/jaws-not-reading-updated-aria-label
• https://inclusive-components.design/toggle-button/

[brzimmer]

Thank you for getting back to me! I want to make sure it’s clear that the ariaLabel prop is included on the Spinner component which is being mounted during the save operation. The ariaLabel prop is not part of the Save button itself. Does that change any of your reasoning?

Thanks,
Brian

[JasonGore]

Unless the Spinner itself is focusable as an entity separate from the Button (which doesn't seem to make sense to me) then I don't think my reasoning changes. Even if it were a separately focusable entity, I don't think you could expect the screen reader to narrate it until it's focused.

[brzimmer]

Gotcha, ok thanks for the help! Is there something you need me to do to mark this bug as closed?

[JasonGore]

Nope, you can just close it yourself if you are happy with the resolution. Thanks!

[xbtsw]

Hi @JasonGore, the spinner component actually render an aria-live region with delayed rendering. I think it suppose to trigger a narrator reading. But as you can see from the repro it is not triggering. We are not sure if this is a narrator issue or we are using the component incorrectly. Please help.

[JasonGore]

I see now that Spinner's ariaLabel is actually rendered internally in an ARIA status role and therefore should be (or at least is intended to) announce status changes. I did some testing with multiple browsers (MS Edge, Chrome, Firefox) and multiple screen readers (Narrator, NVDA) and the ONLY combination where I've gotten any announcement from Spinner was Firefox + NVDA, and even then it only seems to trigger about 50% of the time. I'll leave this open for more investigation.

[micahgodbolt]

The issue in your example isn't the spinner, but placing the spinner in the button. Move the spinner out of the button and it works fine. Problably an issue with aria-live regions being inside of button elements, or focused button elements

https://codepen.io/micahgodbolt/pen/qBBeNMG?editors=0010

[micahgodbolt]

you're probably better off using 'announced' for your 'saving' text.

[msft-github-bot]

This issue has been marked as being beyond the support scope of UI Fabric's issues board. It will now be closed automatically for house-keeping purposes.

[JasonGore]

@micahgodbolt I had triaged this as an issue against Spinner component. It is an issue even when it is not used in a button. The CodePen you provide with Spinner outside of the button doesn't announce, either.

[micahgodbolt]

weird....it totally announced for me :)

it's still working fine for me.