mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +03:00
chore(checkbox): fix aria for checkbox list demo
PiperOrigin-RevId: 607822159
This commit is contained in:
parent
4d2684119e
commit
87d7eac5c5
@ -38,11 +38,16 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
|
||||
styles: [
|
||||
labelStyles,
|
||||
css`
|
||||
.column {
|
||||
ol {
|
||||
all: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
li {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
label {
|
||||
gap: 0;
|
||||
}
|
||||
@ -50,31 +55,37 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
|
||||
],
|
||||
render({disabled}) {
|
||||
return html`
|
||||
<div class="column" role="group" aria-label="Animals">
|
||||
<label>
|
||||
<md-checkbox
|
||||
?disabled=${disabled}
|
||||
aria-label="Cats"
|
||||
touch-target="wrapper"></md-checkbox>
|
||||
Cats
|
||||
</label>
|
||||
<label>
|
||||
<md-checkbox
|
||||
checked
|
||||
?disabled=${disabled}
|
||||
aria-label="dogs"
|
||||
touch-target="wrapper"></md-checkbox>
|
||||
Dogs
|
||||
</label>
|
||||
<label>
|
||||
<md-checkbox
|
||||
indeterminate
|
||||
?disabled=${disabled}
|
||||
aria-label="Birds"
|
||||
touch-target="wrapper"></md-checkbox>
|
||||
Birds
|
||||
</label>
|
||||
</div>
|
||||
<ol aria-label="Animals">
|
||||
<li>
|
||||
<label>
|
||||
<md-checkbox
|
||||
?disabled=${disabled}
|
||||
aria-label="Cats"
|
||||
touch-target="wrapper"></md-checkbox>
|
||||
Cats
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<md-checkbox
|
||||
checked
|
||||
?disabled=${disabled}
|
||||
aria-label="dogs"
|
||||
touch-target="wrapper"></md-checkbox>
|
||||
Dogs
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<md-checkbox
|
||||
indeterminate
|
||||
?disabled=${disabled}
|
||||
aria-label="Birds"
|
||||
touch-target="wrapper"></md-checkbox>
|
||||
Birds
|
||||
</label>
|
||||
</li>
|
||||
</ol>
|
||||
`;
|
||||
},
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user