Skip to content

Commit

Permalink
fix(b-table): only set tabindex="0" for sortable TH's (#6102)
Browse files Browse the repository at this point in the history
  • Loading branch information
jacobmllr95 authored Nov 29, 2020
1 parent 46b8b92 commit dd23742
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 34 deletions.
5 changes: 3 additions & 2 deletions src/components/table/helpers/mixin-thead.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,8 +115,9 @@ export default {
props: { variant, stickyColumn },
style: field.thStyle || {},
attrs: {
// We only add a tabindex of 0 if there is a head-clicked listener
tabindex: hasHeadClickListener ? '0' : null,
// We only add a `tabindex` of `0` if there is a head-clicked listener
// and the current field is sortable
tabindex: hasHeadClickListener && field.sortable ? '0' : null,
abbr: field.headerAbbr || null,
title: field.headerTitle || null,
'aria-colindex': colIndex + 1,
Expand Down
73 changes: 41 additions & 32 deletions src/components/table/table-sorting.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,13 @@ describe('table > sorting', () => {
items: testItems
}
})

await waitNT(wrapper.vm)

expect(wrapper).toBeDefined()
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
expect(wrapper.findAll('tbody > tr').length).toBe(3)
await waitNT(wrapper.vm)

expect(wrapper.emitted('input')).toBeDefined()
expect(wrapper.emitted('input').length).toBe(1)
expect(wrapper.emitted('input')[0][0]).toEqual(testItems)
Expand Down Expand Up @@ -69,19 +72,19 @@ describe('table > sorting', () => {
sortDesc: false
}
})

await waitNT(wrapper.vm)

expect(wrapper).toBeDefined()
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
expect(wrapper.findAll('tbody > tr').length).toBe(3)
let $rows
let columnA

await waitNT(wrapper.vm)
expect(wrapper.emitted('input')).toBeDefined()
expect(wrapper.emitted('input').length).toBe(1)
$rows = wrapper.findAll('tbody > tr').wrappers
let $rows = wrapper.findAll('tbody > tr').wrappers
expect($rows.length).toBe(3)
// Map the rows to the first column text value
columnA = $rows.map(row => {
let columnA = $rows.map(row => {
return row
.findAll('td')
.at(0)
Expand All @@ -95,6 +98,7 @@ describe('table > sorting', () => {

// Currently sorted as ascending
expect($ths.at(0).attributes('aria-sort')).toBe('ascending')
expect($ths.at(0).attributes('tabindex')).toBe('0')
// For switching to descending
expect(
$ths
Expand All @@ -105,6 +109,7 @@ describe('table > sorting', () => {

// Not sorted by this column
expect($ths.at(1).attributes('aria-sort')).toBe('none')
expect($ths.at(1).attributes('tabindex')).toBe('0')
// For sorting by ascending
expect(
$ths
Expand All @@ -115,6 +120,7 @@ describe('table > sorting', () => {

// Not a sortable column
expect($ths.at(2).attributes('aria-sort')).not.toBeDefined()
expect($ths.at(2).attributes('tabindex')).not.toBeDefined()
// For clearing sorting
expect(
$ths
Expand Down Expand Up @@ -238,11 +244,13 @@ describe('table > sorting', () => {
}
}
})

await waitNT(wrapper.vm)

expect(wrapper).toBeDefined()
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
expect(wrapper.findAll('tbody > tr').length).toBe(3)

await waitNT(wrapper.vm)
expect(wrapper.emitted('input')).toBeDefined()
expect(wrapper.emitted('input').length).toBe(1)
const $rows = wrapper.findAll('tbody > tr').wrappers
Expand All @@ -268,20 +276,20 @@ describe('table > sorting', () => {
items: testItems
}
})

await waitNT(wrapper.vm)

expect(wrapper).toBeDefined()
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
expect(wrapper.findAll('tbody > tr').length).toBe(3)
let $rows
let columnA

// Should not be sorted
await waitNT(wrapper.vm)
expect(wrapper.emitted('input')).toBeDefined()
expect(wrapper.emitted('sort-changed')).not.toBeDefined()
$rows = wrapper.findAll('tbody > tr').wrappers
let $rows = wrapper.findAll('tbody > tr').wrappers
expect($rows.length).toBe(3)
// Map the rows to the first column text value
columnA = $rows.map(row => {
let columnA = $rows.map(row => {
return row
.findAll('td')
.at(0)
Expand Down Expand Up @@ -383,20 +391,20 @@ describe('table > sorting', () => {
footClone: true
}
})

await waitNT(wrapper.vm)

expect(wrapper).toBeDefined()
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
expect(wrapper.findAll('tbody > tr').length).toBe(3)
let $rows
let columnA

// Should not be sorted
await waitNT(wrapper.vm)
expect(wrapper.emitted('input')).toBeDefined()
expect(wrapper.emitted('sort-changed')).not.toBeDefined()
$rows = wrapper.findAll('tbody > tr').wrappers
let $rows = wrapper.findAll('tbody > tr').wrappers
expect($rows.length).toBe(3)
// Map the rows to the first column text value
columnA = $rows.map(row => {
let columnA = $rows.map(row => {
return row
.findAll('td')
.at(0)
Expand Down Expand Up @@ -511,20 +519,20 @@ describe('table > sorting', () => {
noFooterSorting: true
}
})

await waitNT(wrapper.vm)

expect(wrapper).toBeDefined()
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
expect(wrapper.findAll('tbody > tr').length).toBe(3)
let $rows
let columnA

// Should not be sorted
await waitNT(wrapper.vm)
expect(wrapper.emitted('input')).toBeDefined()
expect(wrapper.emitted('sort-changed')).not.toBeDefined()
$rows = wrapper.findAll('tbody > tr').wrappers
let $rows = wrapper.findAll('tbody > tr').wrappers
expect($rows.length).toBe(3)
// Map the rows to the first column text value
columnA = $rows.map(row => {
let columnA = $rows.map(row => {
return row
.findAll('td')
.at(0)
Expand Down Expand Up @@ -593,17 +601,17 @@ describe('table > sorting', () => {
sortDirection: 'desc'
}
})

await waitNT(wrapper.vm)

expect(wrapper).toBeDefined()
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
expect(wrapper.findAll('tbody > tr').length).toBe(3)
let $rows
let columnA

await waitNT(wrapper.vm)
$rows = wrapper.findAll('tbody > tr').wrappers
let $rows = wrapper.findAll('tbody > tr').wrappers
expect($rows.length).toBe(3)
// Map the rows to the first column text value
columnA = $rows.map(row => {
let columnA = $rows.map(row => {
return row
.findAll('td')
.at(0)
Expand Down Expand Up @@ -707,20 +715,20 @@ describe('table > sorting', () => {
noSortReset: true
}
})

await waitNT(wrapper.vm)

expect(wrapper).toBeDefined()
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
expect(wrapper.findAll('tbody > tr').length).toBe(3)
let $rows
let columnA

// Should not be sorted
await waitNT(wrapper.vm)
expect(wrapper.emitted('input')).toBeDefined()
expect(wrapper.emitted('sort-changed')).not.toBeDefined()
$rows = wrapper.findAll('tbody > tr').wrappers
let $rows = wrapper.findAll('tbody > tr').wrappers
expect($rows.length).toBe(3)
// Map the rows to the first column text value
columnA = $rows.map(row => {
let columnA = $rows.map(row => {
return row
.findAll('td')
.at(0)
Expand Down Expand Up @@ -794,6 +802,7 @@ describe('table > sorting', () => {
})

expect(wrapper).toBeDefined()

let $trs = wrapper.findAll('tbody > tr')
expect($trs.length).toBe(2)

Expand Down

0 comments on commit dd23742

Please sign in to comment.