feat: aria support for Table

ecomfe · Jun 12, 2018 · 252ef3b · 252ef3b
1 parent 8d5ae7e
commit 252ef3b
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 14 deletions.
diff --git a/packages/veui/src/components/Table/Table.vue b/packages/veui/src/components/Table/Table.vue
@@ -61,7 +61,13 @@ export default {
         return []
       }
     },
-    order: [String, Boolean],
+    order: {
+      type: [String, Boolean],
+      default: false,
+      validator (val) {
+        return val === false || includes(['asc', 'desc'], val)
+      }
+    },
     orderBy: String,
     columnFilter: Array
   },

diff --git a/packages/veui/src/components/Table/_TableBody.js b/packages/veui/src/components/Table/_TableBody.js
@@ -19,9 +19,12 @@ export default {
       <tbody>
         {
           this.data.length
-            ? this.data.map((item, index) => <veui-table-row index={ index }></veui-table-row>)
+            ? this.data.map((item, index) => <veui-table-row index={index}/>)
             : <tr>
-              <td class="veui-table-no-data" colspan={(this.selectable ? 1 : 0) + this.columns.length}>
+              <td
+                class="veui-table-no-data"
+                colspan={(this.selectable ? 1 : 0) + this.columns.length}
+                role="cell">
                 <div class="veui-table-cell">{this.$slots['no-data'] || '没有数据'}</div>
               </td>
             </tr>

diff --git a/packages/veui/src/components/Table/_TableFoot.js b/packages/veui/src/components/Table/_TableFoot.js
@@ -14,10 +14,10 @@ export default {
     return (
       <tfoot>
         <tr>
-          {this.table.selectable ? <th></th> : ''}
+          {this.table.selectable ? <th></th> : null}
           {
             this.columns.map(col => (
-              <th class={col.align ? `veui-table-column-${col.align}` : ''}>{col.renderFoot()}</th>
+              <th class={col.align ? `veui-table-column-${col.align}` : null}>{col.renderFoot()}</th>
             ))
           }
         </tr>

diff --git a/packages/veui/src/components/Table/_TableHead.js b/packages/veui/src/components/Table/_TableHead.js
@@ -26,20 +26,29 @@ export default {
         <tr>
           {
             this.selectable
-              ? <th><div class="veui-table-cell">
+              ? <th scope="col" role="columnheader"><div class="veui-table-cell">
                 {
                   this.selectMode === 'multiple'
                     ? <veui-checkbox checked={this.selectStatus !== 'none'}
                       disabled={!this.data.length}
                       indeterminate={this.selectStatus === 'partial'}
-                      onChange={checked => { this.table.select(checked) }}/>
+                      onChange={checked => { this.table.select(checked) }}
+                      aria-label={this.checked ? '全部移除' : '全部添加'}/>
                     : null
                 }</div></th>
               : null
           }
           {
             this.columns.map(col => (
-              <th class={col.align ? `veui-table-column-${col.align}` : null}>
+              <th
+                class={col.align ? `veui-table-column-${col.align}` : null}
+                scope="col"
+                role="columnheader"
+                aria-sort={
+                  this.table.orderBy === col.field && this.table.order
+                    ? `${this.table.order}ending`
+                    : false
+                }>
                 <div class="veui-table-cell">{col.renderHead()}</div>
                 {
                   col.sortable
@@ -55,5 +64,13 @@ export default {
         </tr>
       </thead>
     )
+  },
+  methods: {
+    getAriaSort (order) {
+      if (!order) {
+        return null
+      }
+      return order === 'asc' ? 'ascending' : 'descending'
+    }
   }
 }
diff --git a/packages/veui/src/components/Table/_TableRow.js b/packages/veui/src/components/Table/_TableRow.js
@@ -44,13 +44,17 @@ export default {
     return <tr class={{ 'veui-table-selected-row': checked }}>
       {
         this.selectable && data
-          ? <td {...data}><div class="veui-table-cell">
+          ? <td role="cell" {...data}><div class="veui-table-cell">
             {
               this.selectMode === 'multiple'
-                ? <veui-checkbox checked={checked}
-                  onChange={checked => { this.table.select(checked, index) }}/>
-                : <veui-radio checked={checked}
-                  onChange={checked => { this.table.select(checked, index) }}/>
+                ? <veui-checkbox
+                  checked={checked}
+                  onChange={checked => { this.table.select(checked, index) }}
+                  aria-label={checked ? '移除本行' : '添加本行'}/>
+                : <veui-radio
+                  checked={checked}
+                  onChange={checked => { this.table.select(checked, index) }}
+                  aria-label="选择本行"/>
             }
           </div></td>
           : null
@@ -59,7 +63,10 @@ export default {
         this.columns.map(col => {
           let data = this.getCellSpan(col)
           return data
-            ? <td class={col.align ? `veui-table-column-${col.align}` : null} {...data}>
+            ? <td
+              class={col.align ? `veui-table-column-${col.align}` : null}
+              role="cell"
+              {...data}>
               <div class="veui-table-cell">{col.renderBody({ ...item, item, index })}</div>
             </td>
             : null