Repository: microsoft/fast

Issue #3248: NVDA screen reader does not read the aria-label in fast-anchor and fast-button web component
Created: 2020-06-08T19:48:05Z
Since there has been talk to make NVDA the primary screen reader used for testing, I have been looking into resolving this issue.
Describe the bug; what happened?
When adding an aria-label attribute to fast-anchor or fast-button, native screen readers, like VoiceOver and Narrator will read the aria-label, but NVDA will not.
Repo steps:

Add aria-label to fast-anchor or fast-button to a host element.
Run NVDA and tab to the link or button
Notice NVDA does not read the aria-label

What behavior did you expect?
NVDA should read what aria-label
Upon further investigation, adding the aria-label to the component does not set an aria-label to control inside the shadow root.
Here is the markup:

When inspecting the DOM, you see the anchor in the shadow root does not have an aria-label set on it.

Two things:

This could be an issue with NVDA, where it doesn't read aria-labels on our custom web components. We file an issue with them to investigate why.
or
We need to set aria-label in the template so it will pass aria-label onto the control inside the shadow root.

Here is the proposed fix is to pass aria-label to the control inside the shadow root if we choose this route.
Add an aria-label attribute to the anchor tag inside the fast-anchor template.

Add an aria-label attribute to the button tag inside the fast-button template.

Now when inspecting the DOM, you see that aria-label is also added in the anchor control.

NVDA will now read out the aria-label.
Side note:
Another issue I noticed adding aria-label.  Typically the screen reader should only read the aria-label and not the content text. In the case of our fast-anchor and fast-button, the screen reader is reading both the aria-label and the content text.
example:

The screen reader should only read out "go play Destiny, link".
Instead, it is reading out
"go play Destiny, link, Titanfall" (Narrator)
"link, Titanfall, go play Destiny" (VoiceOver)
The proposal fix will also resolve the screen reader from also reading out the content text when aria-label is added. My guess on this is because all the screen readers now reading an aria-label on HTML control.
Even though NVDA gets resolved, and reading the aria-label only gets resolved (on all 3 screen reader), it brings up another issue.
VoiceOver will now read the aria-label twice. My guess is, it is reading the aria-label on the template and on the control.

The question is, what is the correct approach, and which screen reader is right or wrong or buggy?
Do we file an issue with NVDA, for not reading the aria-label on the DOM level, or is it an issue with VoiceOver, for reading both aria-label on both the DOM and shadow root level?

Duplicate issue #3436: Narrator and NVDA is not reading out the fast-text-field component
Created: 2020-07-02T21:35:07Z
Describe the bug; what happened?
While running Narrator or NVDA, as you tab onto the fast-text-field component, it is silent.
What are the steps to reproduce the issue?
Example:

Run Narrator or NVDA
Go to https://explore.fast.design/components/fast-text-field'
tab onto the text-field. Observe that the screen reader not saying anything.

What behavior did you expect?
Would expect the screen reader to say "edit"
If applicable, provide screenshots:
In what environment did you see the issue?
Windows 10
Microsft Edge browser

OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
Browser [e.g. Edge, Chrome, Safari, FireFox]
Version [e.g. 1.8.0]

Is there any additional context?

Closing comment (2020-07-06T18:40:44Z): @nicholasrice in the event we delegate focus to the shadowDOM does that fully defer anything on the host? This would explain issues related to #3248