You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
docs(color-slider): enhance README with detailed sections (#5728)
* docs(color-slider): enhance README with detailed sections
* docs(color-slider): add keyboard shortcuts for hue adjustments in README
* docs(color-slider): enhance README with accessible labels for color slider
An `<sp-color-slider>` lets users visually change an individual channel of a color. The background of the `<sp-color-slider>` is a visual representation of the range of values a user can select from. This can represent color properties such as hues, color channel values (such as RGB or CMYK levels), or opacity. Currently, the slider only supports leveraging the `hue` property.
4
4
@@ -8,23 +8,65 @@ An `<sp-color-slider>` lets users visually change an individual channel of a col
8
8
[](https://bundlephobia.com/result?p=@spectrum-web-components/color-slider)
9
9
[](https://stackblitz.com/edit/vitejs-vite-enye2vau)
10
10
11
-
```
11
+
```bash
12
12
yarn add @spectrum-web-components/color-slider
13
13
```
14
14
15
15
Import the side effectful registration of `<sp-color-slider>` via:
- A gradient track showing the range of color values
32
+
- A draggable handle that indicates the current color position
33
+
- An accessible label for screen readers
34
+
35
+
```html
36
+
<sp-color-slider></sp-color-slider>
37
+
```
38
+
39
+
### Options
40
+
41
+
#### Orientation
42
+
43
+
By default, the color slider is displayed horizontally. You can change the orientation to vertical using the `vertical` attribute:
44
+
45
+
```html
46
+
<sp-color-slidervertical></sp-color-slider>
47
+
```
48
+
49
+
### States
50
+
51
+
#### Standard
52
+
53
+
The standard color slider allows users to select hue values from 0 to 360 degrees:
54
+
55
+
```html
56
+
<sp-color-slider></sp-color-slider>
57
+
```
58
+
59
+
#### Disabled
60
+
61
+
A color slider in a disabled state shows that an input exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that the slider may become available later.
62
+
63
+
```html
64
+
<sp-color-sliderdisabled></sp-color-slider>
65
+
```
66
+
67
+
### Behaviors
68
+
69
+
#### Color Formatting
28
70
29
71
When using the color elements, use `el.color` to access the `color` property, which should manage itself in the colour format supplied. If you supply a color in `rgb()` format, `el.color` should return the color in `rgb()` format, as well.
30
72
@@ -36,23 +78,80 @@ The current color formats supported are as follows:
36
78
- RGB, RGBA
37
79
- Strings (eg "red", "blue")
38
80
81
+
For a complete list of supported color formats, see the [ColorController documentation](/tools/color-controller#supported-color-formats).
82
+
39
83
**Please note for the following formats: HSV, HSVA, HSL, HSLA**
84
+
40
85
When using the HSL or HSV formats, and a color's value (in HSV) is set to 0, or its luminosity (in HSL) is set to 0 or 1, the hue and saturation values may not be preserved by the element's `color` property. This is detailed in the [colorjs documentation](https://colorjs.io/docs/). Seperately, the element's `value` property is directly managed by the hue as represented in the interface.
41
86
42
-
##Default
87
+
### Accessibility
43
88
44
-
```html
45
-
<sp-color-slider></sp-color-slider>
46
-
```
89
+
The `<sp-color-slider>` is rendered with appropriate ARIA attributes to ensure accessibility:
47
90
48
-
### Vertical
91
+
- Uses native `input[type="range"]` element with implicit "slider" role
92
+
- Provides value text announcements for screen readers
93
+
- Supports full keyboard navigation
49
94
50
-
```html
51
-
<sp-color-slidervertical></sp-color-slider>
52
-
```
95
+
#### Accessible Labels
53
96
54
-
### Disabled
97
+
The color slider includes an accessible label that describes what the slider controls. By default, the label is set to "hue", but you can customize it using the `label` attribute:
The label serves several important accessibility purposes:
109
+
110
+
-**Screen Reader Announcements**: Screen readers announce the label when the slider receives focus, helping users understand what they're adjusting
111
+
-**ARIA Labeling**: The label is used as the `aria-label` attribute on the internal range input
112
+
-**Context for Value Changes**: When the slider value changes, screen readers announce both the current value and the label for context
113
+
114
+
For example, when a user focuses on a color slider with `label="Color hue"`, screen readers will announce something like "Color hue slider, 180 degrees" to provide clear context about what the control does and its current value.
0 commit comments