@spectrum-web-components/swatch 1.11.1 → 1.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +32 -14
  2. package/package.json +7 -7
package/README.md CHANGED
@@ -32,7 +32,7 @@ import { Swatch } from '@spectrum-web-components/swatch';
32
32
  <sp-tab-panel value="xs">
33
33
 
34
34
  ```html
35
- <div style="display: flex;gap: 5px;">
35
+ <sp-swatch-group selects="multiple">
36
36
  <sp-swatch color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
37
37
  <sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
38
38
  <sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
@@ -56,7 +56,7 @@ import { Swatch } from '@spectrum-web-components/swatch';
56
56
  mixed-value
57
57
  size="xs"
58
58
  ></sp-swatch>
59
- </div>
59
+ </sp-swatch-group>
60
60
  ```
61
61
 
62
62
  </sp-tab-panel>
@@ -64,7 +64,7 @@ import { Swatch } from '@spectrum-web-components/swatch';
64
64
  <sp-tab-panel value="s">
65
65
 
66
66
  ```html
67
- <div style="display: flex;gap: 5px;">
67
+ <sp-swatch-group selects="multiple">
68
68
  <sp-swatch color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
69
69
  <sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
70
70
  <sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
@@ -88,7 +88,7 @@ import { Swatch } from '@spectrum-web-components/swatch';
88
88
  mixed-value
89
89
  size="s"
90
90
  ></sp-swatch>
91
- </div>
91
+ </sp-swatch-group>
92
92
  ```
93
93
 
94
94
  </sp-tab-panel>
@@ -96,7 +96,7 @@ import { Swatch } from '@spectrum-web-components/swatch';
96
96
  <sp-tab-panel value="m">
97
97
 
98
98
  ```html
99
- <div style="display: flex;gap: 5px;">
99
+ <sp-swatch-group selects="multiple">
100
100
  <sp-swatch color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
101
101
  <sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
102
102
  <sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
@@ -120,7 +120,7 @@ import { Swatch } from '@spectrum-web-components/swatch';
120
120
  mixed-value
121
121
  size="m"
122
122
  ></sp-swatch>
123
- </div>
123
+ </sp-swatch-group>
124
124
  ```
125
125
 
126
126
  </sp-tab-panel>
@@ -128,7 +128,7 @@ import { Swatch } from '@spectrum-web-components/swatch';
128
128
  <sp-tab-panel value="l">
129
129
 
130
130
  ```html
131
- <div style="display: flex;gap: 5px;">
131
+ <sp-swatch-group selects="multiple">
132
132
  <sp-swatch color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
133
133
  <sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
134
134
  <sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
@@ -152,7 +152,7 @@ import { Swatch } from '@spectrum-web-components/swatch';
152
152
  mixed-value
153
153
  size="l"
154
154
  ></sp-swatch>
155
- </div>
155
+ </sp-swatch-group>
156
156
  ```
157
157
 
158
158
  </sp-tab-panel>
@@ -169,7 +169,7 @@ An `<sp-swatch>` element can be modified by the following attributes/properties
169
169
  The `border` attribute/property is not required and when applied accepts the values of `none` or `light`.
170
170
 
171
171
  ```html
172
- <sp-swatch-group>
172
+ <sp-swatch-group selects="multiple">
173
173
  <sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
174
174
  <sp-swatch color="rgb(255 0 0 / 0.7)" border="light"></sp-swatch>
175
175
  <sp-swatch color="rgb(255 0 0 / 0.7)" border="none"></sp-swatch>
@@ -183,7 +183,7 @@ The `border` attribute/property is not required and when applied accepts the val
183
183
  The `color` attribute/property determines the color value that the `<sp-swatch>` element will deliver.
184
184
 
185
185
  ```html
186
- <sp-swatch-group>
186
+ <sp-swatch-group selects="multiple">
187
187
  <sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
188
188
  <sp-swatch color="orange"></sp-swatch>
189
189
  <sp-swatch color="var(--spectrum-magenta-500)"></sp-swatch>
@@ -213,7 +213,7 @@ Please note that the `aria-checked="mixed"` value only applies when the swatch i
213
213
  The `nothing` attribute/property outlines that the `<sp-swatch>` represents no color or that it represents "transparent".
214
214
 
215
215
  ```html
216
- <sp-swatch-group>
216
+ <sp-swatch-group selects="multiple">
217
217
  <sp-swatch nothing></sp-swatch>
218
218
  <sp-swatch nothing rounding="full"></sp-swatch>
219
219
  <sp-swatch nothing shape="rectangle"></sp-swatch>
@@ -227,7 +227,7 @@ The `nothing` attribute/property outlines that the `<sp-swatch>` represents no c
227
227
  The `rounding` attribute/property is not required and when applied accepts the values of `none` or `full`.
228
228
 
229
229
  ```html
230
- <sp-swatch-group>
230
+ <sp-swatch-group selects="multiple">
231
231
  <sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
232
232
  <sp-swatch color="rgb(255 0 0 / 0.7)" rounding="none"></sp-swatch>
233
233
  <sp-swatch color="rgb(255 0 0 / 0.7)" rounding="full"></sp-swatch>
@@ -241,7 +241,7 @@ The `rounding` attribute/property is not required and when applied accepts the v
241
241
  The `shape` attribute/property is not required and when applied accepts the values of `rectangle`.
242
242
 
243
243
  ```html
244
- <sp-swatch-group>
244
+ <sp-swatch-group selects="multiple">
245
245
  <sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
246
246
  <sp-swatch color="rgb(255 0 0 / 0.7)" shape="rectangle"></sp-swatch>
247
247
  </sp-swatch-group>
@@ -257,7 +257,7 @@ The `shape` attribute/property is not required and when applied accepts the valu
257
257
  The `disabled` attribute/property determines prevents interaction on the `<sp-swatch>` element.
258
258
 
259
259
  ```html
260
- <sp-swatch-group>
260
+ <sp-swatch-group selects="multiple">
261
261
  <sp-swatch disabled color="rgb(255 0 0 / 0.7)"></sp-swatch>
262
262
  <sp-swatch disabled color="orange"></sp-swatch>
263
263
  <sp-swatch disabled color="var(--spectrum-magenta-500)"></sp-swatch>
@@ -266,10 +266,28 @@ The `disabled` attribute/property determines prevents interaction on the `<sp-sw
266
266
 
267
267
  ### Accessibility
268
268
 
269
+ #### Use the selects property for proper ARIA semantics
270
+
271
+ When swatches are intended to be selectable, set the `selects` property on `<sp-swatch-group>` to enable proper ARIA semantics:
272
+
273
+ - `selects="single"`: Swatches have `role="radio"` and announce as radio buttons
274
+ - `selects="multiple"`: Swatches have `role="checkbox"` and announce as checkboxes with checked/unchecked states
275
+
276
+ Without the `selects` property, swatches default to `role="button"` and the swatch-group stops propagation of change events, so `selected` and `aria-pressed` states won't update when clicked. This prevents screen readers from announcing selection state changes.
277
+
278
+ ```html
279
+ <!-- Correct: selects property enables proper selection semantics -->
280
+ <sp-swatch-group selects="multiple" aria-label="Select colors">
281
+ <sp-swatch color="red" label="Red"></sp-swatch>
282
+ <sp-swatch color="blue" label="Blue"></sp-swatch>
283
+ </sp-swatch-group>
284
+ ```
285
+
269
286
  #### Best practices
270
287
 
271
288
  - Ensure swatches have sufficient color contrast for visibility.
272
289
  - Verify that swatches are appropriately labeled for screen readers.
290
+ - Use the `selects` property when swatches represent a selection interface.
273
291
 
274
292
  #### Keyboard navigation
275
293
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/swatch",
3
- "version": "1.11.1",
3
+ "version": "1.11.2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -75,12 +75,12 @@
75
75
  ],
76
76
  "dependencies": {
77
77
  "@lit-labs/observers": "2.0.2",
78
- "@spectrum-web-components/base": "1.11.1",
79
- "@spectrum-web-components/icon": "1.11.1",
80
- "@spectrum-web-components/icons-ui": "1.11.1",
81
- "@spectrum-web-components/opacity-checkerboard": "1.11.1",
82
- "@spectrum-web-components/reactive-controllers": "1.11.1",
83
- "@spectrum-web-components/shared": "1.11.1"
78
+ "@spectrum-web-components/base": "1.11.2",
79
+ "@spectrum-web-components/icon": "1.11.2",
80
+ "@spectrum-web-components/icons-ui": "1.11.2",
81
+ "@spectrum-web-components/opacity-checkerboard": "1.11.2",
82
+ "@spectrum-web-components/reactive-controllers": "1.11.2",
83
+ "@spectrum-web-components/shared": "1.11.2"
84
84
  },
85
85
  "types": "./src/index.d.ts",
86
86
  "customElements": "custom-elements.json",