NumberField: screen reader fails to announce negative values with currencySign: 'accounting'

[majornista]

🐛 Bug Report

When incrementing or decrementing a NumberField with the value formatted using currencySign: 'accounting', e.g. using parentheses to indicate a negative value, like "($57.00)", screen readers fail to distinguish between a negative value or a positive value when the value changes.

🤔 Expected Behavior

NumberField should announce a value like "($57.00)" as "−$57.00" or "negative $57.00."

😯 Current Behavior

NumberField fails to distinguish between positive and negative values using currencySign: 'accounting' .

💁 Possible Solution

Similar to how we replace the hyphen-minus with a true minus symbol at:

react-spectrum/packages/@react-aria/spinbutton/src/useSpinButton.ts

Lines 127 to 131 in 9eb8796

	// Replace Unicode hyphen-minus (U+002D) with minus sign (U+2212).
	// This ensures that macOS VoiceOver announces it as "minus" even with other characters between the minus sign
	// and the number (e.g. currency symbol). Otherwise it announces nothing because it assumes the character is a hyphen.
	// In addition, replace the empty string with the word "Empty" so that iOS VoiceOver does not read "50%" for an empty field.
	textValue = textValue === '' ? stringFormatter.format('Empty') : (textValue || `${value}`).replace('-', '\u2212');

Replace formatting using parentheses with a minus sign as well:

  // Replace Unicode hyphen-minus (U+002D) with minus sign (U+2212).
  // This ensures that macOS VoiceOver announces it as "minus" even with other characters between the minus sign
  // and the number (e.g. currency symbol). Otherwise it announces nothing because it assumes the character is a hyphen.
  // In addition, replace the empty string with the word "Empty" so that iOS VoiceOver does not read "50%" for an empty field.
  textValue = 
    textValue === '' ? 
    stringFormatter.format('Empty') : 
    (textValue || `${value}`)
    .trim()
    .replace('-', '\u2212')
    // Replace negative value formatted using currencySign: 'accounting' 
    // with a value that can be announced using a minus sign.
    .replace(/^\((.+)\)$/, '\u2212$1');

🔦 Context

NumberField Accessibility Audit FY23

💻 Code Sample

🌍 Your Environment

Software	Version(s)
react-spectrum	@adobe/react-spectrum@3.25.0
Browser	Chrome Version 110.0.5481.177 (Official Build) (arm64)
Operating System	macOS Ventura 13.2.1 (22D68)

🧢 Your Company/Team

Adobe/Accessibility

🕷 Tracking Issue (optional)

A11Y-5852