From 250ac804906b404754b0377cf31c581a01e6d7c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Sun, 29 Nov 2020 12:09:43 +0100 Subject: [PATCH] fix(b-table): only set `tabindex="0"` for sortable TH's --- src/components/table/helpers/mixin-thead.js | 5 +- src/components/table/table-sorting.spec.js | 73 ++++++++++++--------- 2 files changed, 44 insertions(+), 34 deletions(-) diff --git a/src/components/table/helpers/mixin-thead.js b/src/components/table/helpers/mixin-thead.js index 253cacc1757..3683525d6b2 100644 --- a/src/components/table/helpers/mixin-thead.js +++ b/src/components/table/helpers/mixin-thead.js @@ -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, diff --git a/src/components/table/table-sorting.spec.js b/src/components/table/table-sorting.spec.js index 4f85e1c3bed..fb013e6e0ed 100644 --- a/src/components/table/table-sorting.spec.js +++ b/src/components/table/table-sorting.spec.js @@ -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) @@ -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) @@ -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 @@ -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 @@ -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 @@ -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 @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -794,6 +802,7 @@ describe('table > sorting', () => { }) expect(wrapper).toBeDefined() + let $trs = wrapper.findAll('tbody > tr') expect($trs.length).toBe(2)