How to get screen reader to announce the full value change in NumberField ?

[rdangol1]

Hello all,

Context:
I'm using react aria useNumberField and useNumberFieldState from react stately to make a NumberField component. The value change in NumberField using keyboard isn't completely read by the screen reader, announcing only the portion of the changed value. (e.g it announces 'selection replaced 3' when increasing the value from 12 to 13). Furthermore, it seems to be working as intended in the spectrum library. So I added a visually hidden live region that works in chrome and safari but not in Firefox. Can someone help me solve this issue ? Thank you.

CodeSandbox: https://codesandbox.io/s/funny-water-clrwz5?file=/src/NumberField.js

[snowystinger]

Which screen reader are you using? Keeping in mind that VO+FF is not a supported combination

[rdangol1]

Unfortunately, I am using using Voice Over. Could you clarify how it's working in the spectrum library for Firefox with Voice Over ?

Screen.Recording.2023-06-30.at.8.16.37.AM.mov

[snowystinger]

Ah, I'm not entirely sure. I thought maybe it was that you were on an older version of the packages, we did some work recently to improve announcements in numberfield, but updating them didn't seem to make a difference.

I did try with our React Aria Components, and it works there like it does for React Spectrum https://react-spectrum.adobe.com/react-aria/NumberField.html#numberfield

Source code for that is here https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/NumberField.tsx

I imagine you'll have to compare your component's code and see where there are differences between it and ours. But I do not know from a quick glance. When I removed the AstroWrapper though, things started to work as expected. So an alternate path would be to look into what that library is doing that might interfere.