[Bug][a11y]: ColorArea labelling, RTL support, vertical slider orientation

[majornista]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

ColorArea, ColorSlider

Expected behavior

ColorArea should provide a clearer indication of the component's behavior for screen reader users.

Labeling

By default, ColorArea should have an aria-label for the localized string "Color Picker", which labels the visually hidden <input> elements for the two color channels, or on mobile devices, the group containing them. If you wish to override this with a more specific label, a label attribute may be specified to further to identify the element to assistive technologies. For example, for a color area that adjusts a text color you might pass the label attribute, "Text color", which ColorArea will return as the aria-label prop "Text color, Color picker". When a custom label is provided, it should be localized accordingly. The internal string "Color picker" should also be localized.

ColorArea currently support labelX and labelY properties to label each of the color channel inputs as either saturation or luminosity, which is useful for passing localized strings, but it may make sense for SWC to provide the localization.

Role description

In order to communicate to a screen reader user that the color area adjusts in two dimensions, ColorArea should use an aria-roledescription, using the localized string "2D Slider", on each of the visually hidden <input> elements.

Value formatting

The aria-valuetext of each <input> element should be formatted according to the user's locale automatically. It should include the localized color channel name and current value for each channel, with the channel name and value that the <input> element controls coming before the channel name and value for the adjacent <input> element. For example, for an HSV color area where the xChannel is "saturation", the yChannel is "luminosity", when the current selected color is red (rgb(255, 0, 0)), the <input> representing the saturation channel will have aria-valuetext to announce as "100%, saturation, 100%, luminosity", and the <input> representing the luminosity channel will have aria-valuetext to announce as "100%, luminosity, 100%, saturation".

RTL

In right-to-left languages, color areas should be mirrored. Orientation of the gradient background, positioning of the thumb, and dragging behavior should be automatic.

Vertical Slider orientation

The input that controls the y value, or luminosity, should be oriented so that a mobile screen reader's increment or decrement gestures behave as expected.

Actual behavior

ColorArea labelling is ambiguous and confusing for screen reader users.

RTL orientation is not properly supported.

The input that controls the y value, or luminosity, is oriented so that increasing the slider value decreases the luminosity value, which is counter-intuitive and behaves the opposite as one would expect using increment or decrement gestures on a mobile screen reader.

Screenshots

No response

What browsers are you seeing the problem in?

Firefox, Chrome, Safari, Microsoft Edge

How can we reproduce this issue?

1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response