About the 2d slider #152
Description
Currently, the saturation and brightness picker is using a single role="slider" element, which is supposed to be one-dimensional, but is being used to control a two-dimensional pane.
One of the problems with this approach is the lack of aria-valuenow, which is a required attribute on sliders, but can't be set here because it's dealing with two different axes.
This may be also confusing for screen reader users who expect the slider to work as described in the WAI-ARIA docs.
One of the solutions is using a role="grid" element. This has been discussed on w3c/aria#432. The markup could be something like this:
<div role="grid" aria-label="Saturation and Brightness" aria-rowcount="100">
<!-- 80% brightness -->
<div role="row" aria-label="Brightness 80%" aria-rowindex="80">
<!-- 20% saturation -->
<div role="gridcell" aria-label="Saturation 20%" aria-colcount="100" aria-colindex="20" />
</div>
</div>Another solution would be having two sliders:
<div role="slider" aria-orientation="vertical" aria-valuenow="80" aria-label="Brightness" />
<div role="slider" aria-orientation="horizontal" aria-valuenow="20" aria-label="Saturation" />Moving the arrow keys perpendicularly to the currently focused slider would move focus onto the other slider.
None of these solutions should affect the current layouts.