@@ -51,11 +51,15 @@ export const Default: Story = {
51
51
return (
52
52
< Toolbar { ...args } >
53
53
< Text > Toolbar</ Text >
54
- < Button design = { ButtonDesign . Transparent } > Button One</ Button >
55
- < Button design = { ButtonDesign . Transparent } > Button Two</ Button >
56
- < Input />
57
- < DatePicker />
58
- < Switch />
54
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
55
+ Button One
56
+ </ Button >
57
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
58
+ Button Two
59
+ </ Button >
60
+ < Input data-accessible-name />
61
+ < DatePicker data-accessible-name />
62
+ < Switch data-accessible-name />
59
63
</ Toolbar >
60
64
) ;
61
65
}
@@ -67,9 +71,11 @@ export const RightAlignedItems: Story = {
67
71
return (
68
72
< Toolbar { ...args } >
69
73
< ToolbarSpacer />
70
- < Button design = { ButtonDesign . Transparent } > Button</ Button >
71
- < Icon name = { settingsIcon } />
72
- < Icon name = { downloadIcon } />
74
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
75
+ Button
76
+ </ Button >
77
+ < Icon data-accessible-name accessibleName = "Settings" name = { settingsIcon } />
78
+ < Icon data-accessible-name accessibleName = "Download" name = { downloadIcon } />
73
79
</ Toolbar >
74
80
) ;
75
81
}
@@ -82,11 +88,13 @@ export const EvenlyAlignedItems: Story = {
82
88
< Toolbar { ...args } >
83
89
< Text > Left</ Text >
84
90
< ToolbarSpacer />
85
- < Button design = { ButtonDesign . Transparent } > Center</ Button >
91
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
92
+ Center
93
+ </ Button >
86
94
< ToolbarSpacer />
87
95
< Text > Right</ Text >
88
- < Icon name = { settingsIcon } />
89
- < Icon name = { downloadIcon } />
96
+ < Icon data-accessible-name accessibleName = "Settings" name = { settingsIcon } />
97
+ < Icon data-accessible-name accessibleName = "Download" name = { downloadIcon } />
90
98
</ Toolbar >
91
99
) ;
92
100
}
@@ -97,16 +105,30 @@ export const WithSeparator: Story = {
97
105
render ( args ) {
98
106
return (
99
107
< Toolbar { ...args } >
100
- < Button design = { ButtonDesign . Transparent } > Item1</ Button >
101
- < Button design = { ButtonDesign . Transparent } > Item2</ Button >
102
- < Button design = { ButtonDesign . Transparent } > Item3</ Button >
108
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
109
+ Item1
110
+ </ Button >
111
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
112
+ Item2
113
+ </ Button >
114
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
115
+ Item3
116
+ </ Button >
103
117
< ToolbarSeparator />
104
- < Button design = { ButtonDesign . Transparent } > Item4</ Button >
105
- < Button design = { ButtonDesign . Transparent } > Item5</ Button >
118
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
119
+ Item4
120
+ </ Button >
121
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
122
+ Item5
123
+ </ Button >
106
124
< ToolbarSeparator />
107
- < Button design = { ButtonDesign . Transparent } > Item6</ Button >
125
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
126
+ Item6
127
+ </ Button >
108
128
< ToolbarSeparator />
109
- < Button design = { ButtonDesign . Transparent } > Item7</ Button >
129
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
130
+ Item7
131
+ </ Button >
110
132
</ Toolbar >
111
133
) ;
112
134
}
@@ -125,9 +147,18 @@ export const PopoverInOverflowPopover: Story = {
125
147
< >
126
148
< Toolbar { ...args } style = { { width : '400px' } } >
127
149
< Text > Toolbar</ Text >
128
- < Button design = { ButtonDesign . Transparent } > Button One</ Button >
129
- < Button design = { ButtonDesign . Transparent } > Button Two</ Button >
130
- < Button design = { ButtonDesign . Transparent } id = "openMenuBtn" onClick = { handlePopoverOpenerClick } >
150
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
151
+ Button One
152
+ </ Button >
153
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
154
+ Button Two
155
+ </ Button >
156
+ < Button
157
+ data-accessible-name
158
+ design = { ButtonDesign . Transparent }
159
+ id = "openMenuBtn"
160
+ onClick = { handlePopoverOpenerClick }
161
+ >
131
162
Open Popover (Menu)
132
163
</ Button >
133
164
</ Toolbar >
@@ -158,15 +189,25 @@ export const WithOverflowButton: Story = {
158
189
< Slider onInput = { handleInput } value = { value } />
159
190
< Toolbar { ...args } style = { { width : `calc(100% * ${ value / 100 } )` } } >
160
191
< Text > Toolbar</ Text >
161
- < Button design = { ButtonDesign . Transparent } > Button One</ Button >
162
- < Button design = { ButtonDesign . Transparent } icon = "accept" />
163
- < Button design = { ButtonDesign . Transparent } > Button Two</ Button >
164
- < Select style = { { width : 'auto' } } />
165
- < Switch />
166
- < Button design = { ButtonDesign . Transparent } > Button Three</ Button >
167
- < Button design = { ButtonDesign . Transparent } > Button Four</ Button >
168
- < OverflowToolbarButton icon = { editIcon } > Edit</ OverflowToolbarButton >
169
- < OverflowToolbarToggleButton design = { ButtonDesign . Transparent } icon = { favoriteIcon } >
192
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
193
+ Button One
194
+ </ Button >
195
+ < Button data-accessible-name design = { ButtonDesign . Transparent } icon = "accept" />
196
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
197
+ Button Two
198
+ </ Button >
199
+ < Select data-accessible-name style = { { width : 'auto' } } />
200
+ < Switch data-accessible-name />
201
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
202
+ Button Three
203
+ </ Button >
204
+ < Button data-accessible-name design = { ButtonDesign . Transparent } >
205
+ Button Four
206
+ </ Button >
207
+ < OverflowToolbarButton data-accessible-name icon = { editIcon } >
208
+ Edit
209
+ </ OverflowToolbarButton >
210
+ < OverflowToolbarToggleButton data-accessible-name design = { ButtonDesign . Transparent } icon = { favoriteIcon } >
170
211
Favorite
171
212
</ OverflowToolbarToggleButton >
172
213
</ Toolbar >
@@ -180,32 +221,54 @@ export const OverflowBtns: Story = {
180
221
render ( args ) {
181
222
return (
182
223
< Toolbar { ...args } style = { { width : '500px' , ...args . style } } >
183
- < Button design = { ButtonDesign . Transparent } icon = { editIcon } tooltip = "Text always visible" >
224
+ < Button data-accessible-name design = { ButtonDesign . Transparent } icon = { editIcon } tooltip = "Text always visible" >
184
225
Default Button
185
226
</ Button >
186
- < OverflowToolbarButton design = { ButtonDesign . Transparent } icon = { editIcon } tooltip = "Text only visible in popover" >
227
+ < OverflowToolbarButton
228
+ data-accessible-name
229
+ design = { ButtonDesign . Transparent }
230
+ icon = { editIcon }
231
+ tooltip = "Text only visible in popover"
232
+ >
187
233
OverflowToolbarButton (only visible in popover)
188
234
</ OverflowToolbarButton >
189
- < ToggleButton design = { ButtonDesign . Transparent } icon = { favoriteIcon } tooltip = "Text always visible" >
235
+ < ToggleButton
236
+ data-accessible-name
237
+ design = { ButtonDesign . Transparent }
238
+ icon = { favoriteIcon }
239
+ tooltip = "Text always visible"
240
+ >
190
241
Default ToggleButton
191
242
</ ToggleButton >
192
243
< OverflowToolbarToggleButton
244
+ data-accessible-name
193
245
design = { ButtonDesign . Transparent }
194
246
icon = { favoriteIcon }
195
247
tooltip = "Text only visible in popover"
196
248
>
197
249
OverflowToolbarToggleButton (only visible in popover)
198
250
</ OverflowToolbarToggleButton >
199
- < Button design = { ButtonDesign . Transparent } icon = { editIcon } tooltip = "Text always visible" >
251
+ < Button data-accessible-name design = { ButtonDesign . Transparent } icon = { editIcon } tooltip = "Text always visible" >
200
252
Default Button
201
253
</ Button >
202
- < OverflowToolbarButton design = { ButtonDesign . Transparent } icon = { editIcon } tooltip = "Text only visible in popover" >
254
+ < OverflowToolbarButton
255
+ data-accessible-name
256
+ design = { ButtonDesign . Transparent }
257
+ icon = { editIcon }
258
+ tooltip = "Text only visible in popover"
259
+ >
203
260
OverflowToolbarButton (only visible in popover)
204
261
</ OverflowToolbarButton >
205
- < ToggleButton design = { ButtonDesign . Transparent } icon = { favoriteIcon } tooltip = "Text always visible" >
262
+ < ToggleButton
263
+ data-accessible-name
264
+ design = { ButtonDesign . Transparent }
265
+ icon = { favoriteIcon }
266
+ tooltip = "Text always visible"
267
+ >
206
268
Default ToggleButton
207
269
</ ToggleButton >
208
270
< OverflowToolbarToggleButton
271
+ data-accessible-name
209
272
design = { ButtonDesign . Transparent }
210
273
icon = { favoriteIcon }
211
274
tooltip = "Text only visible in popover"
0 commit comments