Slider Accessibility Audit

[majornista]

🐛 Bug Report

Following accessibility related issues have been identified in Slider and RangeSlider:

🤔 Expected Behavior

1. <label> should always reference the input element for the first slider thumb using the for attribute, so that clicking the label will focus the slider input control.
2. Minimum/Maximum slider thumb inputs in a two thumb range slider are not be labelled as such using i18n, unless otherwise explicitly labelled.
3. Pressing the displayValue should focus the corresponding input.
4. For displayValue, use <output> with appropriate aria-labelledby, aria-live="off" and htmlFor referring to the corresponding input to label the output value segments.
5. Focused slider thumb should always be on top in the z-index order.
6. Update Slider (hooks) examples to implement labelling similar to how Slider and RangeSlider do and to pass text contrast requirements for the text labels.

😯 Current Behavior

1. <label> incorrectly references the container element with role="group" using the for attribute, so clicking the label fails to focus the slider input control.
2. Minimum/Maximum slider thumb inputs in a RangeSlider are not be labelled as such using i18n.
3. Pressing the display value does not focus the corresponding input.
4. Slider currently uses a role="textbox" with aria-readonly="true", which seems about as appropriate as output with aria-live="off", but output supports the htmlFor attribute making it easy to implement the focus on press behavior using an onPress event handler.
5. Slider thumb z-index order currently follows DOM order, so the last thumb is always on top regardless of the current focus, which gets confusing when thumbs overlap.
6. Slider hooks should implement label[htmlFor], output[htmlFor], make use of the localized minimum/maximum strings, and pass WAI-ARIA text contrast requirements.

💁 Possible Solution

Suggested fixes have been implemented in #1148.

🌍 Your Environment

Software	Version(s)
react-spectrum	v3.0.0-alpha.1
Browser	Chrome Version 86.0.4240.183 (Official Build) (x86_64)
Operating System	macOS 10.15.7 (19H2)

🧢 Your Company/Team

🕷 Tracking Issue (optional)

#1148