Permalink
Browse files

fix(table): Remove redundant ARIA roles from b-table (#662)

* fix(table): Remove redundant ARIA roles from table
Role `grid` and `row` are implied automatically by current table semantic markup, and not necessary.
Based on chrome Accessibility Plugin Audit  of renderd `<b-table>`
* fix(texts): Remove tests for b-table roles grid and row
  • Loading branch information...
tmorehouse committed Jul 7, 2017
1 parent 22d278f commit 6919cc5a026f1168df5ea29d98aed3d01e40afce
Showing with 3 additions and 35 deletions.
  1. +0 −30 __tests__/components/table.spec.js
  2. +3 −5 lib/components/table.vue
@@ -163,36 +163,6 @@ describe('table', async() => {
}
})
it('all example tables should have ARIA role="grid"', async() => {
const { app: { $refs, $el } } = window
const tables = [ 'table_basic', 'table_paginated', 'table_inverse' ]
tables.forEach(table => {
expect($refs[table].$el.getAttribute('role')).toBe('grid')
})
})
it('each data row should have ARIA role "row"', async() => {
const { app: { $refs, $el } } = window
const app = window.app
const tables = [ 'table_basic', 'table_paginated', 'table_inverse' ]
tables.forEach(table => {
const vm = $refs[table]
const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY')
expect(tbody).toBeDefined()
if (tbody) {
const trs = [...tbody.children]
expect(trs.length).toBe(vm.perPage || app.items.length)
trs.forEach( tr => {
expect(tr.getAttribute('role')).toBe('row')
})
}
})
})
it('all example tables should have attribute aria-busy="false" when busy is false', async() => {
const { app: { $refs, $el } } = window
@@ -1,11 +1,10 @@
<template>
<table :id="id || null"
role="grid"
:aria-busy="busy ? 'true' : 'false'"
:class="tableClass"
>
<thead :class="headClass">
<tr role="row">
<tr>
<th v-for="(field,key) in fields"
@click.stop.prevent="headClicked($event,field,key)"
@keydown.enter.stop.prevent="headClicked($event,field,key)"
@@ -24,7 +23,7 @@
</tr>
</thead>
<tfoot v-if="footClone" :class="footClass">
<tr role="row">
<tr>
<th v-for="(field,key) in fields"
@click.stop.prevent="headClicked($event,field,key)"
@keydown.enter.stop.prevent="headClicked($event,field,key)"
@@ -47,7 +46,6 @@
</tfoot>
<tbody>
<tr v-for="(item,index) in _items"
role="row"
:key="index"
:class="rowClass(item)"
@click="rowClicked($event,item,index)"
@@ -57,7 +55,7 @@
<slot :name="key" :value="item[key]" :item="item" :index="index">{{item[key]}}</slot>
</td>
</tr>
<tr v-if="showEmpty && (!_items || _items.length === 0)" role="row">
<tr v-if="showEmpty && (!_items || _items.length === 0)">
<td :colspan="Object.keys(fields).length">
<div v-if="filter" role="alert" aria-live="polite">
<slot name="emptyfiltered">

0 comments on commit 6919cc5

Please sign in to comment.