fix(#2901): ColorArea followup by majornista · Pull Request #2967 · adobe/react-spectrum

majornista · 2022-03-18T21:45:57Z

aria-label for ColorArea inputs on desktop are simply "Color picker."
externally set aria-label is prepended to the default accessibility name so that "Color picker" is always included as part of the accessibility name.
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.
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.~~
Remove use of title attribute to announce the full RGB/HSL/HSB value. Deferring until we have an API for providing color name.
Remove x/y translation string, because it is no longer needed.
Fix z-index of ColorLoupe
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.

Closes #2901

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue: ColorArea followup #2901.
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:

Open https://reactspectrum.blob.core.windows.net/reactspectrum/5a6c7cb40a9fa380a8618d27d156d9b49da6b9b1/storybook/index.html?path=/story/colorarea--x-blue-y-green and move focus to the Storybook story iframe.
Turn on VoiceOver
Press Control+Option+U (possibly followed by ArrowRight) to bring up a list of Form Controls in the Storybook story.
The first Form Control in the list should be identified as "Blue: 255, Green: 255, foo Color picker, 2d slider"
Press ArrowDown to highlight the "Blue: 255, Green: 255, foo Color picker, 2d slider" .
Press Enter or Space key to set focus on the "Blue: 255, Green: 255, foo Color picker, 2d slider".
Use ArrowLeft to decrease the value for the x-Channel, Blue by 1.
VoiceOver will announce the value change as "Blue: 254"
Press fn+ArrowDown to trigger a PageDown event, decreasing the value for the y-Channel, Green by its page step, 17.
VoiceOver will announce the value change as "Green: 238, foo Color picker, 2d Slider." Note that whenever you change the value along a different axis, the screen reader will announce the accessibility name and role description for the input after the event, because the focus has changed.
Use ArrowUp to increase the value for the y-Channel, Green by 1.
VoiceOver will announce the value change as "Green: 239."
Press Control+Option+U to bring up the list of Form Controls in the Storybook story again.
The first two Form Controls in the list should be identified as "Blue: 254, foo, Color picker, 2d slider" and "Green 238, foo, Color picker, 2d slider". We show both inputs after a value change using the keyboard, so that both values will be displayed in the list of controls.
Press ArrowDown to highlight the "Blue: 254, foo, Color picker, 2d slider" .
Press Enter or Space key to set focus on the "Blue: 254, Green: 239, foo, Color picker, 2d slider". Note that VoiceOver announces both the x and y channel names and values, because the focus has now moved from the y-Channel input to the x-Channel input. When you select and restore focus to the same channel input that you just changed using the keyboard, only the channel name and value for that input will be announced.
Change the value again using the arrow keys.
Use mouse to click on the ColorArea gradient to change the value. Notice that when changing the value using the mouse, VoiceOver will always announces both the x and y channel names and value.
Change the value again using the arrow keys, so VoiceOver announces only the channel name and value for the axis that changed.
Press Tab to move focus to the Red channel ColorSlider.
Press Shift+Tab to move focus back to the ColorArea.
Notice that when restoring focus to the ColorArea VoiceOver again announces both the x and y channel names and values.

🧢 Your Project:

Adobe/Accessibility

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.

packages/@react-aria/color/src/useColorArea.ts

… 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.

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.

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.

Per #2967 (comment)

packages/@react-aria/color/src/useColorArea.ts

Co-authored-by: Robert Snow <rsnow@adobe.com>

adobe-bot · 2022-04-18T23:11:20Z

Build successful! 🎉

snowystinger

lgtm tested in Safari with VO

LFDanLu

A question and a note, but I'm happy for this to go in as is. I'll approve the PR based off the discussion of the question

packages/@react-aria/color/src/useColorArea.ts

packages/@react-spectrum/color/test/ColorArea.test.tsx

Per #2967 (comment), 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 #2967 (comment), update tests to include hidden slider in getAllByRole query.

adobe-bot · 2022-04-22T21:31:17Z

Build successful! 🎉

LFDanLu

LGTM, confirmed the new mobile behavior. Thanks for the quick update!

adobe-bot · 2022-04-22T22:02:41Z

Build successful! 🎉