material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-26 21:56:56 +03:00
Code Issues Projects Releases Wiki Activity

chore(checkbox): fix aria for checkbox list demo

Browse Source 
PiperOrigin-RevId: 607822159
This commit is contained in:
Elizabeth Mitchell 2024-02-16 15:46:52 -08:00 committed by Copybara-Service
parent 4d2684119e
commit 87d7eac5c5
1 changed files with 37 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
checkbox/demo/stories.ts
View File

@ -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>
`;
},
};