Number Field VoiceOver announces twice

[akeohanePing]

https://react-spectrum.adobe.com/react-spectrum/NumberField.html

Hi there,

using mac os voiceover, through chrome browser. Currently using the implementation published on the react-spectrum site.

When using the NumberField, with arrow keys to update the value, it appears that there are two messages being read by the screen reader. the first is "selection replaced _" with the last digit of the new number going where the underscore is. The second message is a simple reading of the new value in the input.

We use an implementation that works the same way -- the a11 expects we work with are flagging this as a potential violation.

Im curious if this was an intended feature, or if there is a way that one knows of to suppress the "selection changed" message.

Thanks,

Screen.Recording.2023-08-08.at.2.53.21.PM.mov

[LFDanLu]

The same issue can be seen with the native input type=number element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number and it doesn't happen in either the native component or our implementation in Safari with VoiceOver so I'm inclined to chalk this up as a screenreader + browser compatibility bug.

[Jeremykw]

We were able to solve this issue by applying the role="spinbutton" attribute to the parent element of the input field. If using the react-spectrum libraries, a minimal implementation might look like this look like this:

export const NumberField = props => {
  const state = useNumberFieldState( props );

  const {
    groupProps,
    inputProps,
    incrementButtonProps,
    decrementButtonProps,
  } = useNumberField(props, state);

  return (
    <Container
      {...groupProps}
      role="spinbutton"
      aria-valuetext={inputProps.value}
      aria-valuenow={inputProps.value}
    >
      <Input {...inputProps} />
      <IncrementButton {...incrementButtonProps} />
      <DecrementButton {...decrementButtonProps} />
    </Container>
  );
};

It may be possible for this to be handled internally by returning role="spinbutton", aria-valuetext and aria-valuenow as part of useNumberField's groupProps.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role

[snowystinger]

Unfortunately, spinbutton isn't well supported by assistive technologies yet. Make sure to test this everywhere. For example, when we first implemented this, we couldn't focus the textfield on iOS+VO when it was given a role spinbutton https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/numberfield/src/useNumberField.ts#L227

I did a quick check, and while I can now focus the textfield, I can't currently use the gestures, though maybe that would be fixable. It's worth looking into this more.

I also checked putting the role and all the correct aria-value* attributes on what is currently the "group" as https://w3c.github.io/aria/#spinbutton does allow for the role spin button to be a container of the textfield and two buttons. However, focus on iOS + VO while swiping does not allow a user into the textfield to edit the value, it's also hard to use the increment and decrement buttons.

I think that it's better to have it announce twice in some cases but always useable than for the field to be unusable to any users.