Skip to content

Commit 250ac80

Browse files
jacobmllr95jacobmllr95
committed
fix(b-table): only set tabindex="0" for sortable TH's
1 parent 46b8b92 commit 250ac80

File tree

2 files changed

+44
-34
lines changed

2 files changed

+44
-34
lines changed

‎src/components/table/helpers/mixin-thead.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,9 @@ export default {
115115
props: { variant, stickyColumn },
116116
style: field.thStyle || {},
117117
attrs: {
118-
// We only add a tabindex of 0 if there is a head-clicked listener
119-
tabindex: hasHeadClickListener ? '0' : null,
118+
// We only add a `tabindex` of `0` if there is a head-clicked listener
119+
// and the current field is sortable
120+
tabindex: hasHeadClickListener && field.sortable ? '0' : null,
120121
abbr: field.headerAbbr || null,
121122
title: field.headerTitle || null,
122123
'aria-colindex': colIndex + 1,

‎src/components/table/table-sorting.spec.js

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,13 @@ describe('table > sorting', () => {
1818
items: testItems
1919
}
2020
})
21+
22+
await waitNT(wrapper.vm)
23+
2124
expect(wrapper).toBeDefined()
2225
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
2326
expect(wrapper.findAll('tbody > tr').length).toBe(3)
24-
await waitNT(wrapper.vm)
27+
2528
expect(wrapper.emitted('input')).toBeDefined()
2629
expect(wrapper.emitted('input').length).toBe(1)
2730
expect(wrapper.emitted('input')[0][0]).toEqual(testItems)
@@ -69,19 +72,19 @@ describe('table > sorting', () => {
6972
sortDesc: false
7073
}
7174
})
75+
76+
await waitNT(wrapper.vm)
77+
7278
expect(wrapper).toBeDefined()
7379
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
7480
expect(wrapper.findAll('tbody > tr').length).toBe(3)
75-
let $rows
76-
let columnA
7781

78-
await waitNT(wrapper.vm)
7982
expect(wrapper.emitted('input')).toBeDefined()
8083
expect(wrapper.emitted('input').length).toBe(1)
81-
$rows = wrapper.findAll('tbody > tr').wrappers
84+
let $rows = wrapper.findAll('tbody > tr').wrappers
8285
expect($rows.length).toBe(3)
8386
// Map the rows to the first column text value
84-
columnA = $rows.map(row => {
87+
let columnA = $rows.map(row => {
8588
return row
8689
.findAll('td')
8790
.at(0)
@@ -95,6 +98,7 @@ describe('table > sorting', () => {
9598

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

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

116121
// Not a sortable column
117122
expect($ths.at(2).attributes('aria-sort')).not.toBeDefined()
123+
expect($ths.at(2).attributes('tabindex')).not.toBeDefined()
118124
// For clearing sorting
119125
expect(
120126
$ths
@@ -238,11 +244,13 @@ describe('table > sorting', () => {
238244
}
239245
}
240246
})
247+
248+
await waitNT(wrapper.vm)
249+
241250
expect(wrapper).toBeDefined()
242251
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
243252
expect(wrapper.findAll('tbody > tr').length).toBe(3)
244253

245-
await waitNT(wrapper.vm)
246254
expect(wrapper.emitted('input')).toBeDefined()
247255
expect(wrapper.emitted('input').length).toBe(1)
248256
const $rows = wrapper.findAll('tbody > tr').wrappers
@@ -268,20 +276,20 @@ describe('table > sorting', () => {
268276
items: testItems
269277
}
270278
})
279+
280+
await waitNT(wrapper.vm)
281+
271282
expect(wrapper).toBeDefined()
272283
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
273284
expect(wrapper.findAll('tbody > tr').length).toBe(3)
274-
let $rows
275-
let columnA
276285

277286
// Should not be sorted
278-
await waitNT(wrapper.vm)
279287
expect(wrapper.emitted('input')).toBeDefined()
280288
expect(wrapper.emitted('sort-changed')).not.toBeDefined()
281-
$rows = wrapper.findAll('tbody > tr').wrappers
289+
let $rows = wrapper.findAll('tbody > tr').wrappers
282290
expect($rows.length).toBe(3)
283291
// Map the rows to the first column text value
284-
columnA = $rows.map(row => {
292+
let columnA = $rows.map(row => {
285293
return row
286294
.findAll('td')
287295
.at(0)
@@ -383,20 +391,20 @@ describe('table > sorting', () => {
383391
footClone: true
384392
}
385393
})
394+
395+
await waitNT(wrapper.vm)
396+
386397
expect(wrapper).toBeDefined()
387398
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
388399
expect(wrapper.findAll('tbody > tr').length).toBe(3)
389-
let $rows
390-
let columnA
391400

392401
// Should not be sorted
393-
await waitNT(wrapper.vm)
394402
expect(wrapper.emitted('input')).toBeDefined()
395403
expect(wrapper.emitted('sort-changed')).not.toBeDefined()
396-
$rows = wrapper.findAll('tbody > tr').wrappers
404+
let $rows = wrapper.findAll('tbody > tr').wrappers
397405
expect($rows.length).toBe(3)
398406
// Map the rows to the first column text value
399-
columnA = $rows.map(row => {
407+
let columnA = $rows.map(row => {
400408
return row
401409
.findAll('td')
402410
.at(0)
@@ -511,20 +519,20 @@ describe('table > sorting', () => {
511519
noFooterSorting: true
512520
}
513521
})
522+
523+
await waitNT(wrapper.vm)
524+
514525
expect(wrapper).toBeDefined()
515526
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
516527
expect(wrapper.findAll('tbody > tr').length).toBe(3)
517-
let $rows
518-
let columnA
519528

520529
// Should not be sorted
521-
await waitNT(wrapper.vm)
522530
expect(wrapper.emitted('input')).toBeDefined()
523531
expect(wrapper.emitted('sort-changed')).not.toBeDefined()
524-
$rows = wrapper.findAll('tbody > tr').wrappers
532+
let $rows = wrapper.findAll('tbody > tr').wrappers
525533
expect($rows.length).toBe(3)
526534
// Map the rows to the first column text value
527-
columnA = $rows.map(row => {
535+
let columnA = $rows.map(row => {
528536
return row
529537
.findAll('td')
530538
.at(0)
@@ -593,17 +601,17 @@ describe('table > sorting', () => {
593601
sortDirection: 'desc'
594602
}
595603
})
604+
605+
await waitNT(wrapper.vm)
606+
596607
expect(wrapper).toBeDefined()
597608
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
598609
expect(wrapper.findAll('tbody > tr').length).toBe(3)
599-
let $rows
600-
let columnA
601610

602-
await waitNT(wrapper.vm)
603-
$rows = wrapper.findAll('tbody > tr').wrappers
611+
let $rows = wrapper.findAll('tbody > tr').wrappers
604612
expect($rows.length).toBe(3)
605613
// Map the rows to the first column text value
606-
columnA = $rows.map(row => {
614+
let columnA = $rows.map(row => {
607615
return row
608616
.findAll('td')
609617
.at(0)
@@ -707,20 +715,20 @@ describe('table > sorting', () => {
707715
noSortReset: true
708716
}
709717
})
718+
719+
await waitNT(wrapper.vm)
720+
710721
expect(wrapper).toBeDefined()
711722
expect(wrapper.findAll('tbody > tr').exists()).toBe(true)
712723
expect(wrapper.findAll('tbody > tr').length).toBe(3)
713-
let $rows
714-
let columnA
715724

716725
// Should not be sorted
717-
await waitNT(wrapper.vm)
718726
expect(wrapper.emitted('input')).toBeDefined()
719727
expect(wrapper.emitted('sort-changed')).not.toBeDefined()
720-
$rows = wrapper.findAll('tbody > tr').wrappers
728+
let $rows = wrapper.findAll('tbody > tr').wrappers
721729
expect($rows.length).toBe(3)
722730
// Map the rows to the first column text value
723-
columnA = $rows.map(row => {
731+
let columnA = $rows.map(row => {
724732
return row
725733
.findAll('td')
726734
.at(0)
@@ -794,6 +802,7 @@ describe('table > sorting', () => {
794802
})
795803

796804
expect(wrapper).toBeDefined()
805+
797806
let $trs = wrapper.findAll('tbody > tr')
798807
expect($trs.length).toBe(2)
799808

0 commit comments

Comments
 (0)