fix(#4160): NumberField: screen reader fails to announce negative values with currencySign: 'accounting'

[majornista]

Closes #4160

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

1. Open https://reactspectrum.blob.core.windows.net/reactspectrum/3e5388ac6912b0f3bff0811f6196dd7bfdb58ad1/storybook/index.html?path=/story/numberfield--currency-switcher&providerSwitcher-express=false
2. Select Currency Sign: Accounting from the dropdown
3. With a screen reader running, decrement the NumberInput until negative accounting values are reached.
4. Screen reader should announce "negative" or "minus" before negative accounting value.

🧢 Your Project:

Adobe/Accessibility

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[snowystinger]

This should also be moved up to useNumberField, because then we can grab the minusSign character and out of formatToParts

[devongovett]

I think the problem was that it is coming from the number formatter, but the screen reader doesn't announce that character right.

[snowystinger]

right, but there may be other minus sign symbols, if we moved it up, we could always replace whatever symbol with the one that we know the screen reader can announce?
if I recall correctly, there's like 3 of them at least

[majornista]

Shouldn't useSpinButton handle announcement of the minus sign and "Empty" at this lower level? I can understand moving the currency formatting up, the useNumberField, because that's where we accept formatOptions, but it seems to make sense to keep the logic to announce 'minus' here. Are you saying there are three Unicode symbols for the minus sign that screen readers can announce, or three locales that use different symbols for the minus sign, that might have to be replaced with a more robust regex?

[snowystinger]

There are around 3 different locale specific minus signs, if I recall correctly.
But now I feel like I'm expanding the scope of this.
So let's keep useSpinButton as it was, and handle the currency negative up in useNumberField as you were doing.

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

## API Changes

unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }

[devongovett]

@majornista in testing we noticed a couple issues:

1. NVDA reads e.g. "3 euros, minus 3 euros". I assume it is reading the actual input value (in accounting notation) plus our custom announcement.
2. Talkback announces negative accounting values as "minus Euro 2"

I noticed in the number field code we override the spin button role and all of the associated attributes to work around a VoiceOver issue (according to the comment):

react-spectrum/packages/@react-aria/numberfield/src/useNumberField.ts

Lines 216 to 223 in 574a27d

	// override the spinbutton role, we can't focus a spin button with VO
	role: null,
	// ignore aria-roledescription on iOS so that required state will announce when it is present
	'aria-roledescription': (!isIOS() ? stringFormatter.format('numberField') : null),
	'aria-valuemax': null,
	'aria-valuemin': null,
	'aria-valuenow': null,
	'aria-valuetext': null,

Maybe we should make this happen only on Apple platforms so that NVDA treats this as a spin button and announces the aria-valuetext (which should be set to the non-accounting notation) rather than the input value?