NVDA is not announcing the value which is present inside the spin button and the change in value is also not announced

[msftedad]

Steps to reproduce:

1. Tab to “Usage” section of the fluent Ui Basic Spin Button example or use the example exported to codePen or full page codepen
2. Start screen reader NVDA then tab to Basic Spin Button.
3. Observe that the screen reader does not announce the value present inside it

Actual behaviour:

NVDA does not announce the value, which is inside the spin button and also, we when change the value

Expected behaviour:

NVDA should announce the value which is inside the spin button and also we when change the value.

System configuration:

NVDA installed/portable/running from source: installed

NVDA version: NVDA(2021.2) Windows version: Win10 10 Enterprise 21H1 (OS Build 19043.1288 )

Name and version of other software in use when reproducing the issue:

Other information about your system:

Other questions

Does the issue still occur after restarting your computer? Yes

Have you tried any other versions of NVDA? If so, please report their behaviors. Yes NVDA 2021.3.1

If NVDA add-ons are disabled, is your problem still occurring?

[feerrenrut]

@msftedad Please include a link direct to the examples in future. Also, the markdown formatting has been stripped from the description, we'd prefer it to be left in place to aid reading of the report. I have fixed these issues.

[feerrenrut]

Technical: The the input element has role=spinbutton. When it gets focus NVDA goes into focus mode, the exposed value is not read. The value is set via aria-valuenow attribute.

[msftedad]

Thanks for making changes here is attachment , hope you find it will help full.

https://user-images.githubusercontent.com/93735775/148236971-80c0864f-9bdf-42f1-b37c-ccab5e84a04b.mp4

[smhigley]

I made a quick JS Fiddle of a vanilla text input with role="spinbutton" to verify that there wasn't anything specific in Fluent that was causing the issue. Looks like it repros there too (though I didn't include up/down arrow value change behavior): https://jsfiddle.net/94c1st2z/

This is with NVDA 2020 and 2021 in Chrome and Edge (I tested v97 for both). It doesn't reproduce in Firefox. Let me know if there's any more info I can provide from my side to help debug.

[blaynem]

Technical: The the input element has role=spinbutton. When it gets focus NVDA goes into focus mode, the exposed value is not read. The value is set via aria-valuenow attribute.

@feerrenrut Even when adding the aria-valuenow attribute, the value i'm getting back is "blank". Is there any bug tracker we can follow to get more insight on when this might be fixed?

[feerrenrut]

For clarity. <input type="text" role="spinbutton" value="12" id="sample"> announces "Pick a number spin button editable selected" <input type="number" role="spinbutton" value="12" id="sample"> announces "Pick a number spin button editable selected 12"

When tabbing to the control, NVDA enters focus mode.

[michaelDCurran]

The reason that NVDA speaks blank in focus mode in Chromium for <input type="text" role="spinbutton" value="12" /> is because NVDA is not able to fetch any text from the IAccessibleText interface on the input element. I.e. IAccessibleText::nCharacters is 0 and IAccessibleText::Text(0, -1) returns no text. This is only the case when the input element has a type of "text" and a role of "spinbutton". Changing type to "number" or removing role="spinbutton" the bug goes away. This is definitely a bug or design decision in Chromium. This bug is not reproducible in Mozilla Firefox.

[michaelDCurran]

This has been reported to Google.

[michaelDCurran]

This was worked on by Microsoft. Chromium changeset: https://chromium-review.googlesource.com/c/chromium/src/+/3953518 I shall close once I can confirm fixed for NVDA once it lands in Chrome Canary.

[michaelDCurran]

Confirmed fixed in Chrome 109.0.5381.0 (Official Build) canary (64-bit) (cohort: Clang-64)