blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/markdown/changelog.zh-CN.md
View File

@ -9,6 +9,7 @@
- List - List
- Dialog - Dialog
- Slider - Slider
- Switch
- NoticeBar - NoticeBar
##### ImagePreview ##### ImagePreview

2
packages/address-edit/test/__snapshots__/demo.spec.js.snap
View File

@ -41,7 +41,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-switch-cell">
<div class="van-cell__title"><span>设为默认收货地址</span></div> <div class="van-cell__title"><span>设为默认收货地址</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<div class="van-switch" style="font-size: 24px;"> <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
<div class="van-switch__node"></div> <div class="van-switch__node"></div>
</div> </div>
</div> </div>

2
packages/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -95,7 +95,7 @@ exports[`create a AddressEdit with props 1`] = `
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-switch-cell">
<div class="van-cell__title"><span>设为默认收货地址</span></div> <div class="van-cell__title"><span>设为默认收货地址</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<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 class="van-switch__node"></div>
</div> </div>
</div> </div>

2
packages/skeleton/test/__snapshots__/demo.spec.js.snap
View File

@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-switch" style="font-size: 24px;"> <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
<div class="van-switch__node"></div> <div class="van-switch__node"></div>
</div> </div>
<div class="van-skeleton van-skeleton--animate"> <div class="van-skeleton van-skeleton--animate">

6
packages/switch-cell/test/__snapshots__/demo.spec.js.snap
View File

@ -7,7 +7,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-switch-cell">
<div class="van-cell__title"><span>标题</span></div> <div class="van-cell__title"><span>标题</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<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 class="van-switch__node"></div>
</div> </div>
</div> </div>
@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-switch-cell">
<div class="van-cell__title"><span>标题</span></div> <div class="van-cell__title"><span>标题</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<div class="van-switch van-switch--on van-switch--disabled" style="font-size: 24px;"> <div role="switch" aria-checked="true" class="van-switch van-switch--on van-switch--disabled" style="font-size: 24px;">
<div class="van-switch__node"></div> <div class="van-switch__node"></div>
</div> </div>
</div> </div>
@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-switch-cell">
<div class="van-cell__title"><span>标题</span></div> <div class="van-cell__title"><span>标题</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<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 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 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>

4
packages/switch-cell/test/__snapshots__/index.spec.js.snap
View File

@ -3,7 +3,7 @@
exports[`border prop 1`] = ` exports[`border prop 1`] = `
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell"> <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<div class="van-switch" style="font-size: 24px;"> <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
<div class="van-switch__node"></div> <div class="van-switch__node"></div>
</div> </div>
</div> </div>
@ -13,7 +13,7 @@ exports[`border prop 1`] = `
exports[`cell-size prop 1`] = ` exports[`cell-size prop 1`] = `
<div class="van-cell van-cell--center van-cell--large van-switch-cell van-switch-cell--large"> <div class="van-cell van-cell--center van-cell--large van-switch-cell van-switch-cell--large">
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<div class="van-switch" style="font-size: 24px;"> <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
<div class="van-switch__node"></div> <div class="van-switch__node"></div>
</div> </div>
</div> </div>

8
packages/switch/index.tsx
View File

@ -31,6 +31,8 @@ function Switch(
inactiveValue inactiveValue
} = props; } = props;
const checked = value === activeValue;
const switchStyle = { const switchStyle = {
fontSize: size, fontSize: size,
backgroundColor: value ? activeColor : inactiveColor backgroundColor: value ? activeColor : inactiveColor
@ -40,7 +42,7 @@ function Switch(
function onClick() { function onClick() {
if (!disabled && !loading) { if (!disabled && !loading) {
const newValue = value === activeValue ? inactiveValue : activeValue; const newValue = checked ? inactiveValue : activeValue;
emit(ctx, 'input', newValue); emit(ctx, 'input', newValue);
emit(ctx, 'change', newValue); emit(ctx, 'change', newValue);
} }
@ -49,10 +51,12 @@ function Switch(
return ( return (
<div <div
class={bem({ class={bem({
on: value === activeValue, on: checked,
disabled disabled
})} })}
role="switch"
style={switchStyle} style={switchStyle}
aria-checked={String(checked)}
onClick={onClick} onClick={onClick}
{...inherit(ctx)} {...inherit(ctx)}
> >

12
packages/switch/test/__snapshots__/demo.spec.js.snap
View File

@ -3,34 +3,34 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<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 class="van-switch__node"></div>
</div> </div>
</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 class="van-switch__node"></div>
</div> </div>
</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-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 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> </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 class="van-switch__node"></div>
</div> </div>
</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 class="van-switch__node"></div>
</div> </div>
</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 class="van-switch__node"></div>
</div> </div>
</div> </div>