alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages 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
Download Patch File Download Diff File Expand all files Collapse all files
packages/radio/index.js
+5 -1
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: {
packages/radio/index.less
+4
View File
@@ -6,6 +6,10 @@
overflow: hidden;
user-select: none;
&:focus {
outline: none;
}
&__icon {
flex: none;
height: 1em;
packages/radio/test/__snapshots__/demo.spec.js.snap
+11 -11
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>