fix(#2901): ColorArea followup (#2967)
* fix(#2901): ColorArea reduce screen reader verbosity
1. aria-label for ColorArea inputs on desktop are simply "Color picker."
2. externally set aria-label is prepended to the default accessibility name so that "Color picker" is always included as part of the accessibility name.
3. On first focus, when interacting with the mouse, and on blur, inputs will have aria-valuetext set to channel name and value for both channels.
4. After a keyboard interaction, aria-valuetext will be the channel name and value for the channel that changed.
5. We still use title to provide all three channel names and values as help text/accessibility description. When we include a color name string, it should be prepended to this.
6. Remove x/y translation string, because it is no longer needed.
* fix(#2901): ColorArea fix z-index of ColorLoupe
* fix(#2901): ColorArea update RGB stories so that zChannel defaults to zero
To better illustrate xChannel and yChannel orientation, initialize RGB stories with both the xChannel and yChannels set to 255 and the zChannel set to 0.
* fix(#2901): ColorArea remove title attribute
In order to reduce screen reader verbosity, remove `title` prop, used to announce values for each channel in the color, until such time we have a color naming API.
* fix(#2901): ColorArea add aria-hidden to input without focus
So that only a single "2d slider" control shows up when listing form elements for screen readers, add aria-hidden="true" to the unfocused input when the value has not changed via the keyboard, but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
Refactor aria-valuetext so that yChannel always comes before yChannel.
* fix(#2901): ColorArea add i18n string for color input label
Per https://github.com/adobe/react-spectrum/pull/2967#discussion_r842047688
* fix(#2901): rename attribute per code review
Co-authored-by: Robert Snow <rsnow@adobe.com>
* fix(#2967): use separate onFocus handler for each input.
* fix(#2901): ColorArea include both channels in aria-valuetext on mobile
Per https://github.com/adobe/react-spectrum/pull/2967#discussion_r856434787, include both channels in aria-valuetext on mobile, and label both inputs as a "Color Picker" and "2d slider" so that users can understand it to interact differently than a regular slider. Double Tap and hold allows the user to drag the thumb. On Talkback, value text for both channels gets announced intermittently while dragging and when dragging stops. With VoiceOver for iOS, the value text will not be announced as the value changes, but if the user single taps after finishing the drag, value text for both channels will announce.
Per https://github.com/adobe/react-spectrum/pull/2967#discussion_r856454670, update tests to include hidden slider in getAllByRole query.
Co-authored-by: Robert Snow <rsnow@adobe.com>
