[improvement] Checkbox: improve accessibility

docs/markdown/changelog.zh-CN.md

@@ -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

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

@@ -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>

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

@@ -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>

packages/checkbox/index.js

@@ -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: {

packages/checkbox/index.less

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

packages/checkbox/test/__snapshots__/demo.spec.js.snap

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

packages/mixins/checkbox.js

@@ -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);
         }}

packages/radio-group/index.js

@@ -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>
+    );
   }
 });

packages/radio/index.js

@@ -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

@@ -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

@@ -3,31 +3,31 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="demo-radio-group van-radio-group">
+    <div role="radiogroup" class="demo-radio-group van-radio-group">
-      <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><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 role="radiogroup" class="demo-radio-group van-radio-group">
-      <div class="van-radio">
+      <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>

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

@@ -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>