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] Checkbox: improve accessibility

Browse Source
This commit is contained in:
陈嘉涵 2019-05-24 17:07:52 +08:00
parent b6e89016b3
commit 25002828f9
15 changed files with 80 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,14 +2,20 @@
### [v2.0.0-beta.1](https://github.com/youzan/vant/tree/v2.0.0-beta.0)
#### 无障碍访问
对以下组件增加了无障碍访问的支持：
- Accordion
- Checkbox
- Radio
- Stepper
- Tab
##### ActionSheet
- 新增`lock-scroll`属性
##### Accordion
- 优化无障碍访问
##### DatetimePicker
- 新增`filter`属性
@ -26,13 +32,8 @@
- 支持惯性滚动
##### Stepper
- 优化无障碍访问
##### Tab
- 优化无障碍访问
- 新增`border`属性
##### Uploader

6
packages/address-list/test/__snapshots__/demo.spec.js.snap
View File

@ -4,10 +4,10 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-address-list">
<div class="van-radio-group">
<div role="radiogroup" class="van-radio-group">
<div class="van-cell van-cell--clickable van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-radio">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #f44; background-color: rgb(255, 68, 68);">
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
</div>
@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-cell van-cell--clickable van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-radio">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
</div>

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

@ -2,7 +2,7 @@
exports[`unswitchable 1`] = `
<div class="van-address-list">
<div class="van-radio-group">
<div role="radiogroup" class="van-radio-group">
<div class="van-cell van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__name">张三，13000000000</div>

6
packages/checkbox/index.js
View File

@ -4,7 +4,11 @@ import { CheckboxMixin } from '../mixins/checkbox';
const [sfc, bem] = use('checkbox');
export default sfc({
mixins: [CheckboxMixin('vanCheckbox', bem)],
mixins: [CheckboxMixin({
bem,
role: 'checkbox',
parent: 'vanCheckbox'
})],
computed: {
checked: {

4
packages/checkbox/index.less
View File

@ -6,6 +6,10 @@
overflow: hidden;
user-select: none;
&:focus {
outline: none;
}
&__icon {
flex: none;
height: 1em;

28
packages/checkbox/test/__snapshots__/demo.spec.js.snap
View File

@ -3,19 +3,19 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">复选框</span>
</div>
</div>
<div>
<div class="van-checkbox">
<div role="checkbox" tabindex="-1" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label van-checkbox__label--disabled">
复选框
</span>
</div>
<div class="van-checkbox">
<div role="checkbox" tabindex="-1" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label van-checkbox__label--disabled">
复选框
@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
<!----></i></div><span class="van-checkbox__label">
自定义颜色
@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"></div><span class="van-checkbox__label">
自定义图标
</span>
@ -39,19 +39,19 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-checkbox-group">
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框 a
</span>
</div>
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框 b
</span>
</div>
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框 c
@ -61,19 +61,19 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-checkbox-group">
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框 a
</span>
</div>
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框 b
</span>
</div>
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框 c
@ -87,7 +87,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>复选框a</span></div>
<div class="van-cell__value">
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
@ -96,7 +96,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>复选框b</span></div>
<div class="van-cell__value">
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
@ -105,7 +105,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>复选框c</span></div>
<div class="van-cell__value">
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>

4
packages/contact-card/test/__snapshots__/demo.spec.js.snap
View File

@ -10,10 +10,10 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
<div class="van-contact-list">
<div class="van-radio-group van-contact-list__group">
<div role="radiogroup" class="van-radio-group van-contact-list__group">
<div class="van-cell van-cell--clickable van-contact-list__item">
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
<div class="van-radio">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span>
</div>

4
packages/contact-card/test/__snapshots__/index.spec.js.snap
View File

@ -2,10 +2,10 @@
exports[`ContactList render 1`] = `
<div class="van-contact-list">
<div class="van-radio-group van-contact-list__group">
<div role="radiogroup" class="van-radio-group van-contact-list__group">
<div class="van-cell van-cell--clickable van-contact-list__item">
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
<div class="van-radio">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #f44; background-color: rgb(255, 68, 68);">
<!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">test，123123213</div></span>
</div>

2
packages/coupon-list/test/__snapshots__/index.spec.js.snap
View File

@ -57,7 +57,7 @@ exports[`render coupon list 1`] = `
<div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
<div class="van-checkbox van-coupon__corner">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-coupon__corner">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #f44; background-color: rgb(255, 68, 68);">
<!----></i></div>
</div>

13
packages/mixins/checkbox.js
View File

@ -5,7 +5,7 @@ import Icon from '../icon';
import { ChildrenMixin } from './relation';
import { suffixPx } from '../utils';
export const CheckboxMixin = (parent, bem) => ({
export const CheckboxMixin = ({ parent, bem, role }) => ({
mixins: [ChildrenMixin(parent)],
props: {
@ -35,6 +35,14 @@ export const CheckboxMixin = (parent, bem) => ({
backgroundColor: checkedColor
};
}
},
tabindex() {
if (this.isDisabled || (role === 'radio' && !this.checked)) {
return -1;
}
return 0;
}
},
@ -56,7 +64,10 @@ export const CheckboxMixin = (parent, bem) => ({
return (
<div
role={role}
class={bem()}
tabindex={this.tabindex}
aria-checked={String(this.checked)}
onClick={event => {
this.$emit('click', event);
}}

6
packages/radio-group/index.js
View File

@ -18,6 +18,10 @@ export default sfc({
},
render(h) {
return <div class={bem()}>{this.slots()}</div>;
return (
<div class={bem()} role="radiogroup">
{this.slots()}
</div>
);
}
});

6
packages/radio/index.js
View File

@ -4,7 +4,11 @@ import { CheckboxMixin } from '../mixins/checkbox';
const [sfc, bem] = use('radio');
export default sfc({
mixins: [CheckboxMixin('vanRadio', bem)],
mixins: [CheckboxMixin({
bem,
role: 'radio',
parent: 'vanRadio'
})],
computed: {
currentValue: {

4
packages/radio/index.less
View File

@ -6,6 +6,10 @@
overflow: hidden;
user-select: none;
&:focus {
outline: none;
}
&__icon {
flex: none;
height: 1em;

22
packages/radio/test/__snapshots__/demo.spec.js.snap
View File

@ -3,31 +3,31 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="demo-radio-group van-radio-group">
<div class="van-radio">
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">单选框 1</span>
</div>
<div class="van-radio">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">单选框 2</span>
</div>
</div>
</div>
<div>
<div class="demo-radio-group van-radio-group">
<div class="van-radio">
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 1</span>
</div>
<div class="van-radio">
<div role="radio" tabindex="-1" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 2</span>
</div>
</div>
</div>
<div>
<div class="demo-radio-group van-radio">
<div role="radio" tabindex="0" aria-checked="true" class="demo-radio-group van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
<!----></i></div><span class="van-radio__label">
单选框
@ -35,19 +35,19 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="demo-radio-group van-radio">
<div role="radio" tabindex="0" aria-checked="true" class="demo-radio-group van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"></div><span class="van-radio__label">
自定义图标
</span>
</div>
</div>
<div>
<div class="van-radio-group">
<div role="radiogroup" class="van-radio-group">
<div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>单选框1</span></div>
<div class="van-cell__value">
<div class="van-radio">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
@ -56,7 +56,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>单选框2</span></div>
<div class="van-cell__value">
<div class="van-radio">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>

2
packages/submit-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
修改地址
</span></span></div>
<div class="van-submit-bar__bar">
<div class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">全选</span>
</div>