Skip to content

Commit 5f93c82

Browse files
asynclizcopybara-github
asyncliz
authored and
copybara-github
committed
chore(iconbutton): add distinctly labelled examples for a11y
PiperOrigin-RevId: 602853997
1 parent e18d913 commit 5f93c82

File tree

2 files changed

+82
-40
lines changed

2 files changed

+82
-40
lines changed

‎iconbutton/demo/demo.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ import {stories, StoryKnobs} from './stories.js';
2020
const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
2121
'Icon Button',
2222
[
23-
new Knob('icon', {ui: textInput(), defaultValue: 'check'}),
24-
new Knob('selectedIcon', {ui: textInput(), defaultValue: 'close'}),
2523
new Knob('disabled', {ui: boolInput(), defaultValue: false}),
24+
new Knob('icon', {ui: textInput(), defaultValue: ''}),
25+
new Knob('selectedIcon', {ui: textInput(), defaultValue: ''}),
2626
],
2727
);
2828

‎iconbutton/demo/stories.ts‎

Lines changed: 80 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,20 @@ const styles = css`
2424
.column {
2525
display: flex;
2626
flex-direction: column;
27-
gap: 16px;
27+
align-items: center;
2828
}
2929
3030
.row {
3131
display: flex;
32-
gap: 16px;
32+
gap: 32px;
33+
}
34+
35+
p {
36+
color: var(--md-sys-color-on-surface);
37+
font: var(--md-sys-typescale-body-medium-weight, 400)
38+
var(--md-sys-typescale-body-medium-size, 0.875rem) /
39+
var(--md-sys-typescale-body-medium-line-height, 1.25rem)
40+
var(--md-sys-typescale-body-medium-font, 'Roboto');
3341
}
3442
`;
3543

@@ -38,26 +46,34 @@ const buttons: MaterialStoryInit<StoryKnobs> = {
3846
styles,
3947
render({icon, disabled}) {
4048
return html`
41-
<div class="column">
42-
<div class="row">
43-
<md-icon-button aria-label="Standard icon" ?disabled=${disabled}>
44-
<md-icon>${icon}</md-icon>
49+
<div class="row">
50+
<div class="column">
51+
<p>Standard</p>
52+
<md-icon-button aria-label="Open settings" ?disabled=${disabled}>
53+
<md-icon>${icon || 'settings'}</md-icon>
4554
</md-icon-button>
55+
</div>
4656
47-
<md-outlined-icon-button
48-
aria-label="Outlined icon"
49-
?disabled=${disabled}>
50-
<md-icon>${icon}</md-icon>
57+
<div class="column">
58+
<p>Outlined</p>
59+
<md-outlined-icon-button aria-label="Search" ?disabled=${disabled}>
60+
<md-icon>${icon || 'search'}</md-icon>
5161
</md-outlined-icon-button>
62+
</div>
5263
53-
<md-filled-icon-button aria-label="Filled icon" ?disabled=${disabled}>
54-
<md-icon>${icon}</md-icon>
64+
<div class="column">
65+
<p>Filled</p>
66+
<md-filled-icon-button aria-label="Complete" ?disabled=${disabled}>
67+
<md-icon>${icon || 'done'}</md-icon>
5568
</md-filled-icon-button>
69+
</div>
5670
71+
<div class="column">
72+
<p>Filled tonal</p>
5773
<md-filled-tonal-icon-button
58-
aria-label="Filled tonal icon"
74+
aria-label="Add new"
5975
?disabled=${disabled}>
60-
<md-icon>${icon}</md-icon>
76+
<md-icon>${icon || 'add'}</md-icon>
6177
</md-filled-tonal-icon-button>
6278
</div>
6379
</div>
@@ -70,38 +86,54 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
7086
styles,
7187
render({icon, selectedIcon, disabled}) {
7288
return html`
73-
<div class="column">
74-
<div class="row">
89+
<div class="row">
90+
<div class="column">
91+
<p>Standard</p>
7592
<md-icon-button
76-
aria-label="Standard icon"
93+
aria-label="Show password"
94+
aria-label-selected="Hide password"
7795
toggle
7896
?disabled=${disabled}>
79-
<md-icon>${icon}</md-icon>
80-
<md-icon slot="selected">${selectedIcon}</md-icon>
97+
<md-icon>${icon || 'visibility'}</md-icon>
98+
<md-icon slot="selected">
99+
${selectedIcon || 'visibility_off'}
100+
</md-icon>
81101
</md-icon-button>
102+
</div>
82103
104+
<div class="column">
105+
<p>Outlined</p>
83106
<md-outlined-icon-button
84-
aria-label="Outlined icon"
107+
aria-label="Play"
108+
aria-label-selected="Pause"
85109
toggle
86110
?disabled=${disabled}>
87-
<md-icon>${icon}</md-icon>
88-
<md-icon slot="selected">${selectedIcon}</md-icon>
111+
<md-icon>${icon || 'play_arrow'}</md-icon>
112+
<md-icon slot="selected">${selectedIcon || 'pause'}</md-icon>
89113
</md-outlined-icon-button>
114+
</div>
90115
116+
<div class="column">
117+
<p>Filled</p>
91118
<md-filled-icon-button
92-
aria-label="Filled icon"
119+
aria-label="Show more"
120+
aria-label-selected="Show less"
93121
toggle
94122
?disabled=${disabled}>
95-
<md-icon>${icon}</md-icon>
96-
<md-icon slot="selected">${selectedIcon}</md-icon>
123+
<md-icon>${icon || 'expand_more'}</md-icon>
124+
<md-icon slot="selected">${selectedIcon || 'expand_less'}</md-icon>
97125
</md-filled-icon-button>
126+
</div>
98127
128+
<div class="column">
129+
<p>Filled tonal</p>
99130
<md-filled-tonal-icon-button
100-
aria-label="Filled tonal icon"
131+
aria-label="Open menu"
132+
aria-label-selected="Close menu"
101133
toggle
102134
?disabled=${disabled}>
103-
<md-icon>${icon}</md-icon>
104-
<md-icon slot="selected">${selectedIcon}</md-icon>
135+
<md-icon>${icon || 'menu'}</md-icon>
136+
<md-icon slot="selected">${selectedIcon || 'close'}</md-icon>
105137
</md-filled-tonal-icon-button>
106138
</div>
107139
</div>
@@ -114,34 +146,44 @@ const links: MaterialStoryInit<StoryKnobs> = {
114146
styles,
115147
render({icon}) {
116148
return html`
117-
<div class="column">
118-
<div class="row">
149+
<div class="row">
150+
<div class="column">
151+
<p>Standard</p>
119152
<md-icon-button
120-
aria-label="Standard icon"
153+
aria-label="Go home"
121154
href="https://google.com"
122155
target="_blank">
123-
<md-icon>${icon}</md-icon>
156+
<md-icon>${icon || 'home'}</md-icon>
124157
</md-icon-button>
158+
</div>
125159
160+
<div class="column">
161+
<p>Outlined</p>
126162
<md-outlined-icon-button
127-
aria-label="Outlined icon"
163+
aria-label="Open new tab"
128164
href="https://google.com"
129165
target="_blank">
130-
<md-icon>${icon}</md-icon>
166+
<md-icon>${icon || 'open_in_new'}</md-icon>
131167
</md-outlined-icon-button>
168+
</div>
132169
170+
<div class="column">
171+
<p>Filled</p>
133172
<md-filled-icon-button
134-
aria-label="Filled icon"
173+
aria-label="Download Google"
135174
href="https://google.com"
136175
target="_blank">
137-
<md-icon>${icon}</md-icon>
176+
<md-icon>${icon || 'download'}</md-icon>
138177
</md-filled-icon-button>
178+
</div>
139179
180+
<div class="column">
181+
<p>Filled tonal</p>
140182
<md-filled-tonal-icon-button
141-
aria-label="Filled tonal icon"
183+
aria-label="Logout"
142184
href="https://google.com"
143185
target="_blank">
144-
<md-icon>${icon}</md-icon>
186+
<md-icon>${icon || 'logout'}</md-icon>
145187
</md-filled-tonal-icon-button>
146188
</div>
147189
</div>

0 commit comments

Comments
 (0)