Skip to content

Commit a376158

Browse files
nikkimknikkimk
authored
docs(action-button): missing labels on icon-only examples (#5406)
* docs(action-button: added missing labels in docs * docs(action-button): fixed typo
1 parent 700489f commit a376158

File tree

1 file changed

+116
-44
lines changed

1 file changed

+116
-44
lines changed

‎packages/action-button/README.md‎

Lines changed: 116 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,93 @@ An `<sp-action-button>` represents an action a user can take.
88
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-button)
99
[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/mOF1zUEjLJzODGXFYaIU/src/index.ts)
1010

11-
```
11+
```bash
1212
yarn add @spectrum-web-components/action-button
1313
```
1414

1515
Import the side effectful registration of `<sp-action-button>` via:
1616

17-
```
17+
```ts
1818
import '@spectrum-web-components/action-button/sp-action-button.js';
1919
```
2020

2121
When looking to leverage the `ActionButton` base class as a type and/or for extension purposes, do so via:
2222

23-
```
23+
```ts
2424
import { ActionButton } from '@spectrum-web-components/action-button';
2525
```
2626

27+
### Anatomy
28+
29+
```html
30+
<sp-action-button>Try me</sp-action-button>
31+
```
32+
33+
#### Content
34+
35+
`<sp-action-button>` elements can be provided a visible label,
36+
a label and an icon, or just an icon.
37+
38+
An icon is provided by placing an icon element in the `icon` slot.
39+
40+
If the button is `icon-only`, a non-visible label
41+
can be provided via the `label` attribute on an `<sp-action-button>`
42+
or on an `<sp-icon*>` element child to appropriately
43+
fulfill the accessibility contract of the button.
44+
45+
<sp-tabs selected="label" auto label="Labelling a button">
46+
<sp-tab value="label">Label only</sp-tab>
47+
<sp-tab-panel value="label">
48+
49+
```html demo
50+
<sp-action-button variant="primary">Label only</sp-action-button>
51+
```
52+
53+
</sp-tab-panel>
54+
<sp-tab value="icon-label">Icon + label</sp-tab>
55+
<sp-tab-panel value="icon-label">
56+
57+
```html demo
58+
<sp-action-button variant="primary">
59+
<sp-icon-help slot="icon"></sp-icon-help>
60+
Icon + Label
61+
</sp-action-button>
62+
```
63+
64+
</sp-tab-panel>
65+
<sp-tab value="svg-label">SVG Icon + label</sp-tab>
66+
<sp-tab-panel value="svg-label">
67+
68+
```html demo
69+
<sp-action-button variant="primary">
70+
<svg
71+
slot="icon"
72+
viewBox="0 0 36 36"
73+
focusable="false"
74+
aria-hidden="true"
75+
role="img"
76+
>
77+
<path
78+
d="M16 36a4.407 4.407 0 0 0 4-4h-8a4.407 4.407 0 0 0 4 4zm9.143-24.615c0-3.437-3.206-4.891-7.143-5.268V3a1.079 1.079 0 0 0-1.143-1h-1.714A1.079 1.079 0 0 0 14 3v3.117c-3.937.377-7.143 1.831-7.143 5.268C6.857 26.8 2 26.111 2 28.154V30h28v-1.846C30 26 25.143 26.8 25.143 11.385z"
79+
></path>
80+
</svg>
81+
SVG Icon + Label
82+
</sp-action-button>
83+
```
84+
85+
</sp-tab-panel>
86+
<sp-tab value="icon-only">Icon only</sp-tab>
87+
<sp-tab-panel value="icon-only">
88+
89+
```html demo
90+
<sp-action-button variant="primary" label="Icon only">
91+
<sp-icon-help slot="icon"></sp-icon-help>
92+
</sp-action-button>
93+
```
94+
95+
</sp-tab-panel>
96+
</sp-tabs>
97+
2798
### Options
2899

29100
#### Sizes
@@ -39,10 +110,10 @@ import { ActionButton } from '@spectrum-web-components/action-button';
39110
<sp-icon-edit slot="icon"></sp-icon-edit>
40111
Edit
41112
</sp-action-button>
42-
<sp-action-button>
113+
<sp-action-button label="Edit">
43114
<sp-icon-edit slot="icon"></sp-icon-edit>
44115
</sp-action-button>
45-
<sp-action-button hold-affordance>
116+
<sp-action-button label="Edit" hold-affordance>
46117
<sp-icon-edit slot="icon"></sp-icon-edit>
47118
</sp-action-button>
48119
</sp-action-group>
@@ -59,10 +130,10 @@ import { ActionButton } from '@spectrum-web-components/action-button';
59130
<sp-icon-edit slot="icon"></sp-icon-edit>
60131
Edit
61132
</sp-action-button>
62-
<sp-action-button>
133+
<sp-action-button label="Edit">
63134
<sp-icon-edit slot="icon"></sp-icon-edit>
64135
</sp-action-button>
65-
<sp-action-button hold-affordance>
136+
<sp-action-button label="Edit"> hold-affordance>
66137
<sp-icon-edit slot="icon"></sp-icon-edit>
67138
</sp-action-button>
68139
</sp-action-group>
@@ -79,10 +150,10 @@ import { ActionButton } from '@spectrum-web-components/action-button';
79150
<sp-icon-edit slot="icon"></sp-icon-edit>
80151
Edit
81152
</sp-action-button>
82-
<sp-action-button>
153+
<sp-action-button label="Edit">
83154
<sp-icon-edit slot="icon"></sp-icon-edit>
84155
</sp-action-button>
85-
<sp-action-button hold-affordance>
156+
<sp-action-button label="Edit" hold-affordance>
86157
<sp-icon-edit slot="icon"></sp-icon-edit>
87158
</sp-action-button>
88159
</sp-action-group>
@@ -99,10 +170,10 @@ import { ActionButton } from '@spectrum-web-components/action-button';
99170
<sp-icon-edit slot="icon"></sp-icon-edit>
100171
Edit
101172
</sp-action-button>
102-
<sp-action-button>
173+
<sp-action-button label="Edit">
103174
<sp-icon-edit slot="icon"></sp-icon-edit>
104175
</sp-action-button>
105-
<sp-action-button hold-affordance>
176+
<sp-action-button label="Edit" hold-affordance>
106177
<sp-icon-edit slot="icon"></sp-icon-edit>
107178
</sp-action-button>
108179
</sp-action-group>
@@ -119,10 +190,10 @@ import { ActionButton } from '@spectrum-web-components/action-button';
119190
<sp-icon-edit slot="icon"></sp-icon-edit>
120191
Edit
121192
</sp-action-button>
122-
<sp-action-button>
193+
<sp-action-button label="Edit">
123194
<sp-icon-edit slot="icon"></sp-icon-edit>
124195
</sp-action-button>
125-
<sp-action-button hold-affordance>
196+
<sp-action-button label="Edit" hold-affordance>
126197
<sp-icon-edit slot="icon"></sp-icon-edit>
127198
</sp-action-button>
128199
</sp-action-group>
@@ -151,10 +222,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
151222
<sp-icon-edit slot="icon"></sp-icon-edit>
152223
Edit
153224
</sp-action-button>
154-
<sp-action-button>
225+
<sp-action-button label="Edit">
155226
<sp-icon-edit slot="icon"></sp-icon-edit>
156227
</sp-action-button>
157-
<sp-action-button hold-affordance>
228+
<sp-action-button label="Edit" hold-affordance>
158229
<sp-icon-edit slot="icon"></sp-icon-edit>
159230
</sp-action-button>
160231
</sp-action-group>
@@ -168,10 +239,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
168239
<sp-icon-edit slot="icon"></sp-icon-edit>
169240
Edit
170241
</sp-action-button>
171-
<sp-action-button selected>
242+
<sp-action-button label="Edit" selected>
172243
<sp-icon-edit slot="icon"></sp-icon-edit>
173244
</sp-action-button>
174-
<sp-action-button selected hold-affordance>
245+
<sp-action-button label="Edit" selected hold-affordance>
175246
<sp-icon-edit slot="icon"></sp-icon-edit>
176247
</sp-action-button>
177248
</sp-action-group>
@@ -185,10 +256,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
185256
<sp-icon-edit slot="icon"></sp-icon-edit>
186257
Edit
187258
</sp-action-button>
188-
<sp-action-button disabled>
259+
<sp-action-button label="Edit" disabled>
189260
<sp-icon-edit slot="icon"></sp-icon-edit>
190261
</sp-action-button>
191-
<sp-action-button disabled hold-affordance>
262+
<sp-action-button label="Edit" disabled hold-affordance>
192263
<sp-icon-edit slot="icon"></sp-icon-edit>
193264
</sp-action-button>
194265
</sp-action-group>
@@ -204,10 +275,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
204275
<sp-icon-edit slot="icon"></sp-icon-edit>
205276
Edit
206277
</sp-action-button>
207-
<sp-action-button disabled selected>
278+
<sp-action-button label="Edit" disabled selected>
208279
<sp-icon-edit slot="icon"></sp-icon-edit>
209280
</sp-action-button>
210-
<sp-action-button disabled selected hold-affordance>
281+
<sp-action-button label="Edit" disabled selected hold-affordance>
211282
<sp-icon-edit slot="icon"></sp-icon-edit>
212283
</sp-action-button>
213284
</sp-action-group>
@@ -231,10 +302,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
231302
<sp-icon-edit slot="icon"></sp-icon-edit>
232303
Edit
233304
</sp-action-button>
234-
<sp-action-button quiet>
305+
<sp-action-button label="Edit" quiet>
235306
<sp-icon-edit slot="icon"></sp-icon-edit>
236307
</sp-action-button>
237-
<sp-action-button quiet hold-affordance>
308+
<sp-action-button label="Edit" quiet hold-affordance>
238309
<sp-icon-edit slot="icon"></sp-icon-edit>
239310
</sp-action-button>
240311
</sp-action-group>
@@ -248,10 +319,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
248319
<sp-icon-edit slot="icon"></sp-icon-edit>
249320
Edit
250321
</sp-action-button>
251-
<sp-action-button quiet selected>
322+
<sp-action-button label="Edit" quiet selected>
252323
<sp-icon-edit slot="icon"></sp-icon-edit>
253324
</sp-action-button>
254-
<sp-action-button quiet selected hold-affordance>
325+
<sp-action-button label="Edit" quiet selected hold-affordance>
255326
<sp-icon-edit slot="icon"></sp-icon-edit>
256327
</sp-action-button>
257328
</sp-action-group>
@@ -265,10 +336,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
265336
<sp-icon-edit slot="icon"></sp-icon-edit>
266337
Edit
267338
</sp-action-button>
268-
<sp-action-button quiet disabled>
339+
<sp-action-button label="Edit" quiet disabled>
269340
<sp-icon-edit slot="icon"></sp-icon-edit>
270341
</sp-action-button>
271-
<sp-action-button quiet disabled hold-affordance>
342+
<sp-action-button label="Edit" quiet disabled hold-affordance>
272343
<sp-icon-edit slot="icon"></sp-icon-edit>
273344
</sp-action-button>
274345
</sp-action-group>
@@ -284,10 +355,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
284355
<sp-icon-edit slot="icon"></sp-icon-edit>
285356
Edit
286357
</sp-action-button>
287-
<sp-action-button quiet disabled selected>
358+
<sp-action-button label="Edit" quiet disabled selected>
288359
<sp-icon-edit slot="icon"></sp-icon-edit>
289360
</sp-action-button>
290-
<sp-action-button quiet disabled selected hold-affordance>
361+
<sp-action-button label="Edit" quiet disabled selected hold-affordance>
291362
<sp-icon-edit slot="icon"></sp-icon-edit>
292363
</sp-action-button>
293364
</sp-action-group>
@@ -311,10 +382,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
311382
<sp-icon-edit slot="icon"></sp-icon-edit>
312383
Edit
313384
</sp-action-button>
314-
<sp-action-button emphasized>
385+
<sp-action-button label="Edit" emphasized>
315386
<sp-icon-edit slot="icon"></sp-icon-edit>
316387
</sp-action-button>
317-
<sp-action-button emphasized hold-affordance>
388+
<sp-action-button label="Edit" emphasized hold-affordance>
318389
<sp-icon-edit slot="icon"></sp-icon-edit>
319390
</sp-action-button>
320391
</sp-action-group>
@@ -328,10 +399,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
328399
<sp-icon-edit slot="icon"></sp-icon-edit>
329400
Edit
330401
</sp-action-button>
331-
<sp-action-button emphasized selected>
402+
<sp-action-button label="Edit" emphasized selected>
332403
<sp-icon-edit slot="icon"></sp-icon-edit>
333404
</sp-action-button>
334-
<sp-action-button emphasized selected hold-affordance>
405+
<sp-action-button label="Edit" emphasized selected hold-affordance>
335406
<sp-icon-edit slot="icon"></sp-icon-edit>
336407
</sp-action-button>
337408
</sp-action-group>
@@ -345,10 +416,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
345416
<sp-icon-edit slot="icon"></sp-icon-edit>
346417
Edit
347418
</sp-action-button>
348-
<sp-action-button emphasized disabled>
419+
<sp-action-button label="Edit" emphasized disabled>
349420
<sp-icon-edit slot="icon"></sp-icon-edit>
350421
</sp-action-button>
351-
<sp-action-button emphasized disabled hold-affordance>
422+
<sp-action-button label="Edit" emphasized disabled hold-affordance>
352423
<sp-icon-edit slot="icon"></sp-icon-edit>
353424
</sp-action-button>
354425
</sp-action-group>
@@ -366,10 +437,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
366437
<sp-icon-edit slot="icon"></sp-icon-edit>
367438
Edit
368439
</sp-action-button>
369-
<sp-action-button emphasized disabled selected>
440+
<sp-action-button label="Edit" emphasized disabled selected>
370441
<sp-icon-edit slot="icon"></sp-icon-edit>
371442
</sp-action-button>
372-
<sp-action-button emphasized disabled selected hold-affordance>
443+
<sp-action-button label="Edit" emphasized disabled selected hold-affordance>
373444
<sp-icon-edit slot="icon"></sp-icon-edit>
374445
</sp-action-button>
375446
</sp-action-group>
@@ -393,10 +464,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
393464
<sp-icon-edit slot="icon"></sp-icon-edit>
394465
Edit
395466
</sp-action-button>
396-
<sp-action-button emphasized quiet>
467+
<sp-action-button label="Edit" emphasized quiet>
397468
<sp-icon-edit slot="icon"></sp-icon-edit>
398469
</sp-action-button>
399-
<sp-action-button emphasized quiet hold-affordance>
470+
<sp-action-button label="Edit" emphasized quiet hold-affordance>
400471
<sp-icon-edit slot="icon"></sp-icon-edit>
401472
</sp-action-button>
402473
</sp-action-group>
@@ -410,10 +481,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
410481
<sp-icon-edit slot="icon"></sp-icon-edit>
411482
Edit
412483
</sp-action-button>
413-
<sp-action-button emphasized quiet selected>
484+
<sp-action-button label="Edit" emphasized quiet selected>
414485
<sp-icon-edit slot="icon"></sp-icon-edit>
415486
</sp-action-button>
416-
<sp-action-button emphasized quiet selected hold-affordance>
487+
<sp-action-button label="Edit" emphasized quiet selected hold-affordance>
417488
<sp-icon-edit slot="icon"></sp-icon-edit>
418489
</sp-action-button>
419490
</sp-action-group>
@@ -427,10 +498,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
427498
<sp-icon-edit slot="icon"></sp-icon-edit>
428499
Edit
429500
</sp-action-button>
430-
<sp-action-button emphasized quiet disabled>
501+
<sp-action-button label="Edit" emphasized quiet disabled>
431502
<sp-icon-edit slot="icon"></sp-icon-edit>
432503
</sp-action-button>
433-
<sp-action-button emphasized quiet disabled hold-affordance>
504+
<sp-action-button label="Edit" emphasized quiet disabled hold-affordance>
434505
<sp-icon-edit slot="icon"></sp-icon-edit>
435506
</sp-action-button>
436507
</sp-action-group>
@@ -448,10 +519,11 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
448519
<sp-icon-edit slot="icon"></sp-icon-edit>
449520
Edit
450521
</sp-action-button>
451-
<sp-action-button emphasized quiet disabled selected>
522+
<sp-action-button label="Edit" emphasized quiet disabled selected>
452523
<sp-icon-edit slot="icon"></sp-icon-edit>
453524
</sp-action-button>
454525
<sp-action-button
526+
label="Edit"
455527
emphasized
456528
quiet
457529
disabled

0 commit comments

Comments
 (0)