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
bootstrap-vue · Jul 7, 2017 · 6919cc5 · 6919cc5
1 parent 22d278f
commit 6919cc5
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 35 deletions.
diff --git a/__tests__/components/table.spec.js b/__tests__/components/table.spec.js
@@ -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
 

diff --git a/lib/components/table.vue b/lib/components/table.vue
@@ -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">