[improvement] Collapse: improve accessibility

docs/markdown/changelog.zh-CN.md

@@ -6,6 +6,10 @@
 
 - 新增`lock-scroll`属性
 
+##### Accordion
+
+- 优化无障碍访问
+
 ##### DatetimePicker
 
 - 新增`filter`属性
@@ -24,7 +28,7 @@
 
 ##### Tab
 
-- 支持无障碍访问
+- 优化无障碍访问
 - 新增`border`属性
 
 ##### Uploader
@@ -38,6 +42,7 @@
 
 - 增加四个新组件
 - 增加数十个 API
+- 优化无障碍访问
 - 全新的卡片风格文档，支持文档搜索
 - 所有组件支持通过`less`变量自定义样式
 - 调整了部分不合理的命名，废弃少量 API

packages/collapse-item/index.js

@@ -88,9 +88,7 @@ export default sfc({
 
       const { parent } = this;
       const name =
-        parent.accordion && this.currentName === parent.value
-          ? ''
-          : this.currentName;
+        parent.accordion && this.currentName === parent.value ? '' : this.currentName;
       this.parent.switch(name, !this.expanded);
     },
 
@@ -104,6 +102,8 @@ export default sfc({
   },
 
   render(h) {
+    const { disabled, expanded } = this;
+
     const titleSlots = CELL_SLOTS.reduce((slots, name) => {
       if (this.slots(name)) {
         slots[name] = () => this.slots(name);
@@ -117,12 +117,12 @@ export default sfc({
 
     const Title = (
       <Cell
-        class={bem('title', {
-          disabled: this.disabled,
-          expanded: this.expanded
-        })}
+        role="button"
+        class={bem('title', { disabled, expanded })}
         onClick={this.onClick}
         scopedSlots={titleSlots}
+        tabindex={disabled ? -1 : 0}
+        aria-expanded={String(expanded)}
         {...{ props: this.$props }}
       />
     );

packages/collapse-item/index.less

@@ -11,6 +11,10 @@
       visibility: hidden;
     }
 
+    &:focus {
+      outline: none;
+    }
+
     &--expanded {
       .van-cell__right-icon::before {
         transform: rotate(-90deg);

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

@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-collapse van-hairline--top-bottom">
       <div class="van-collapse-item">
-        <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
+        <div role="button" tabindex="0" aria-expanded="true" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
           <div class="van-cell__title"><span>标题1</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
             <!----></i>
         </div>
@@ -14,13 +14,13 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-collapse-item van-hairline--top">
-        <div class="van-cell van-cell--clickable van-collapse-item__title">
+        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
             <!----></i>
         </div>
       </div>
       <div class="van-collapse-item van-hairline--top">
-        <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
+        <div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
           <div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
             <!----></i>
         </div>
@@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-collapse van-hairline--top-bottom">
       <div class="van-collapse-item">
-        <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
+        <div role="button" tabindex="0" aria-expanded="true" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
           <div class="van-cell__title"><span>标题1</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
             <!----></i>
         </div>
@@ -39,13 +39,13 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-collapse-item van-hairline--top">
-        <div class="van-cell van-cell--clickable van-collapse-item__title">
+        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
             <!----></i>
         </div>
       </div>
       <div class="van-collapse-item van-hairline--top">
-        <div class="van-cell van-cell--clickable van-collapse-item__title">
+        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
             <!----></i>
         </div>
@@ -55,7 +55,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-collapse van-hairline--top-bottom">
       <div class="van-collapse-item">
-        <div class="van-cell van-cell--clickable van-collapse-item__title">
+        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title">
             <div>标题1<i class="van-icon van-icon-question-o">
                 <!----></i></div>
@@ -64,7 +64,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-collapse-item van-hairline--top">
-        <div class="van-cell van-cell--clickable van-collapse-item__title"><i class="van-icon van-icon-shop-o van-cell__left-icon">
+        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title"><i class="van-icon van-icon-shop-o van-cell__left-icon">
             <!----></i>
           <div class="van-cell__title"><span>标题2</span></div>
           <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">

packages/collapse/test/__snapshots__/index.spec.js.snap

@@ -3,19 +3,19 @@
 exports[`disable border 1`] = `
 <div class="van-collapse">
   <div class="van-collapse-item">
-    <div class="van-cell van-cell--clickable van-collapse-item__title">
+    <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
       <div class="van-cell__title"><span>a</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
   </div>
   <div class="van-collapse-item van-hairline--top">
-    <div class="van-cell van-cell--clickable van-collapse-item__title">
+    <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
       <div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
   </div>
   <div class="van-collapse-item van-hairline--top">
-    <div class="van-cell van-cell--clickable van-collapse-item__title">
+    <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
       <div class="van-cell__title"><span>c</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
@@ -26,13 +26,13 @@ exports[`disable border 1`] = `
 exports[`lazy render collapse content 1`] = `
 <div class="van-collapse van-hairline--top-bottom">
   <div class="van-collapse-item" style="padding: 0px;">
-    <div class="van-cell van-cell--clickable van-collapse-item__title">
+    <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
       <div class="van-cell__title"><span>a</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
   </div>
   <div class="van-collapse-item van-hairline--top" style="padding: 0px;">
-    <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
+    <div role="button" tabindex="0" aria-expanded="true" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
       <div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
@@ -46,7 +46,7 @@ exports[`lazy render collapse content 1`] = `
 exports[`render collapse-item slot 1`] = `
 <div class="van-collapse van-hairline--top-bottom">
   <div class="van-collapse-item">
-    <div class="van-cell van-cell--clickable van-collapse-item__title">this is icon<div class="van-cell__title">this is title</div>
+    <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">this is icon<div class="van-cell__title">this is title</div>
       <div class="van-cell__value">this is value</div>this is right icon
     </div>
   </div>