mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
chore: fix demo a11y for switch and checkbox
PiperOrigin-RevId: 556113327
This commit is contained in:
parent
18b75d9c24
commit
de37349ec5
@ -49,31 +49,31 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
|
||||
render({disabled}) {
|
||||
return html`
|
||||
<div class="column" role="group" aria-label="Animals">
|
||||
<label role="presentation">
|
||||
<label>
|
||||
<md-checkbox
|
||||
?disabled=${disabled}
|
||||
aria-label="Cats"
|
||||
touch-target="wrapper"
|
||||
></md-checkbox>
|
||||
<span aria-hidden="true">Cats</span>
|
||||
Cats
|
||||
</label>
|
||||
<label role="presentation">
|
||||
<label>
|
||||
<md-checkbox
|
||||
checked
|
||||
?disabled=${disabled}
|
||||
aria-label="dogs"
|
||||
touch-target="wrapper"
|
||||
></md-checkbox>
|
||||
<span aria-hidden="true">Dogs</span>
|
||||
Dogs
|
||||
</label>
|
||||
<label role="presentation">
|
||||
<label>
|
||||
<md-checkbox
|
||||
indeterminate
|
||||
?disabled=${disabled}
|
||||
aria-label="Birds"
|
||||
touch-target="wrapper"
|
||||
></md-checkbox>
|
||||
<span aria-hidden="true">Birds</span>
|
||||
Birds
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
|
@ -8,7 +8,7 @@ import './index.js';
|
||||
import './material-collection.js';
|
||||
|
||||
import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
|
||||
import {boolInput, Knob, textInput} from './index.js';
|
||||
import {boolInput, Knob} from './index.js';
|
||||
|
||||
import {stories, StoryKnobs} from './stories.js';
|
||||
|
||||
@ -18,10 +18,6 @@ const collection =
|
||||
new Knob('selected', {defaultValue: false, ui: boolInput()}),
|
||||
new Knob('icons', {defaultValue: false, ui: boolInput()}),
|
||||
new Knob('showOnlySelectedIcon', {defaultValue: false, ui: boolInput()}),
|
||||
new Knob('value', {defaultValue: 'on', ui: textInput()}),
|
||||
new Knob('name', {defaultValue: '', ui: textInput()}),
|
||||
new Knob('aria-label', {defaultValue: '', ui: textInput()}),
|
||||
new Knob('aria-labelledby', {defaultValue: '', ui: textInput()}),
|
||||
]);
|
||||
|
||||
collection.addStories(...materialInitsToStoryInits(stories));
|
||||
|
@ -7,7 +7,7 @@
|
||||
import '@material/web/switch/switch.js';
|
||||
|
||||
import {labelStyles, MaterialStoryInit} from './material-collection.js';
|
||||
import {html, nothing} from 'lit';
|
||||
import {css, html} from 'lit';
|
||||
|
||||
/** Knob types for Switch stories. */
|
||||
export interface StoryKnobs {
|
||||
@ -15,45 +15,62 @@ export interface StoryKnobs {
|
||||
selected: boolean;
|
||||
icons: boolean;
|
||||
showOnlySelectedIcon: boolean;
|
||||
value: string;
|
||||
name: string;
|
||||
'aria-label': string;
|
||||
'aria-labelledby': string;
|
||||
}
|
||||
|
||||
const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
name: '<md-switch>',
|
||||
name: 'Switch',
|
||||
render(knobs) {
|
||||
return html`
|
||||
<md-switch
|
||||
.disabled=${knobs.disabled}
|
||||
.selected=${knobs.selected}
|
||||
.icons=${knobs.icons}
|
||||
.showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
|
||||
.value=${knobs.value}
|
||||
aria-label=${knobs['aria-label'] || nothing}
|
||||
aria-labelledby=${knobs['aria-labelledby'] || nothing}>
|
||||
</md-switch>`;
|
||||
aria-label="An example switch"
|
||||
.disabled=${knobs.disabled}
|
||||
.selected=${knobs.selected}
|
||||
.icons=${knobs.icons}
|
||||
.showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
|
||||
></md-switch>`;
|
||||
}
|
||||
};
|
||||
|
||||
const labeled: MaterialStoryInit<StoryKnobs> = {
|
||||
name: 'Labeled',
|
||||
styles: labelStyles,
|
||||
name: 'With labels',
|
||||
styles: [
|
||||
labelStyles, css`
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
label {
|
||||
justify-content: space-between;
|
||||
}
|
||||
`
|
||||
],
|
||||
render(knobs) {
|
||||
return html`
|
||||
<label>
|
||||
Switch
|
||||
<md-switch
|
||||
.disabled=${knobs.disabled}
|
||||
.selected=${knobs.selected}
|
||||
.icons=${knobs.icons}
|
||||
.showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
|
||||
.value=${knobs.value}
|
||||
aria-label=${knobs['aria-label'] || nothing}
|
||||
aria-labelledby=${knobs['aria-labelledby'] || nothing}>
|
||||
</md-switch>
|
||||
</label>`;
|
||||
<div class="column" role="group" aria-label="Settings">
|
||||
<label>
|
||||
Wi-Fi
|
||||
<md-switch
|
||||
aria-label="Wi-Fi"
|
||||
.disabled=${knobs.disabled}
|
||||
.icons=${knobs.icons}
|
||||
.showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
|
||||
></md-switch>
|
||||
</label>
|
||||
<label>
|
||||
Bluetooth
|
||||
<md-switch
|
||||
aria-label="Bluetooth"
|
||||
selected
|
||||
.disabled=${knobs.disabled}
|
||||
.icons=${knobs.icons}
|
||||
.showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
|
||||
></md-switch>
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user