mirror of
https://github.com/youzan/vant.git
synced 2026-05-03 01:01:43 +08:00
[improvement] Checkbox: improve accessibility
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user