alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[improvement] Switch: improve accessibility

Browse Source
This commit is contained in:
陈嘉涵
2019-05-25 12:17:02 +08:00
parent a7e346ca0f
commit 6cc14d8651
8 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/switch/index.tsx
+6 -2
View File
@@ -31,6 +31,8 @@ function Switch(
inactiveValue
} = props;
const checked = value === activeValue;
const switchStyle = {
fontSize: size,
backgroundColor: value ? activeColor : inactiveColor
@@ -40,7 +42,7 @@ function Switch(
function onClick() {
if (!disabled && !loading) {
const newValue = value === activeValue ? inactiveValue : activeValue;
const newValue = checked ? inactiveValue : activeValue;
emit(ctx, 'input', newValue);
emit(ctx, 'change', newValue);
}
@@ -49,10 +51,12 @@ function Switch(
return (
<div
class={bem({
on: value === activeValue,
on: checked,
disabled
})}
role="switch"
style={switchStyle}
aria-checked={String(checked)}
onClick={onClick}
{...inherit(ctx)}
>
packages/switch/test/__snapshots__/demo.spec.js.snap
+6 -6
View File
@@ -3,34 +3,34 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-switch van-switch--on" style="font-size: 30px;">
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 30px;">
<div class="van-switch__node"></div>
</div>
</div>
<div>
<div class="van-switch van-switch--on van-switch--disabled" style="font-size: 30px;">
<div role="switch" aria-checked="true" class="van-switch van-switch--on van-switch--disabled" style="font-size: 30px;">
<div class="van-switch__node"></div>
</div>
</div>
<div>
<div class="van-switch van-switch--on" style="font-size: 30px;">
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 30px;">
<div class="van-switch__node">
<div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
</div>
</div>
<div>
<div class="van-switch van-switch--on" style="font-size: 24px;">
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
<div class="van-switch__node"></div>
</div>
</div>
<div>
<div class="van-switch van-switch--on" style="font-size: 30px; background-color: rgb(7, 193, 96);">
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 30px; background-color: rgb(7, 193, 96);">
<div class="van-switch__node"></div>
</div>
</div>
<div>
<div class="van-switch van-switch--on" style="font-size: 30px;">
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 30px;">
<div class="van-switch__node"></div>
</div>
</div>