diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js index e59a5c741..19449e73b 100644 --- a/packages/react-bootstrap-table2/src/contexts/index.js +++ b/packages/react-bootstrap-table2/src/contexts/index.js @@ -85,11 +85,11 @@ const withContext = Base => } UNSAFE_componentWillReceiveProps(nextProps) { - if (nextProps.columns.filter(col => col.sort).length > 0 && !this.SortContext) { + if (nextProps.columns.filter(col => col.sort).length <= 0) { + this.SortContext = null; + } else if (!this.SortContext) { this.SortContext = createSortContext( dataOperator, this.isRemoteSort, this.handleRemoteSortChange); - } else { - this.SortContext = null; } if (!nextProps.pagination && this.props.pagination) { this.PaginationContext = null; diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js index f49b16f1c..0ea0a82ca 100644 --- a/packages/react-bootstrap-table2/src/header-cell.js +++ b/packages/react-bootstrap-table2/src/header-cell.js @@ -77,6 +77,7 @@ class HeaderCell extends eventDelegater(React.Component) { if (sort) { const customClick = cellAttrs.onClick; + cellAttrs['aria-label'] = sorting ? `${text} sort ${sortOrder}` : `${text} sortable`; cellAttrs.onKeyUp = (e) => { if (e.key === 'Enter') { onSort(column); diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js index a5437f7db..b1a7f4332 100644 --- a/packages/react-bootstrap-table2/test/header-cell.test.js +++ b/packages/react-bootstrap-table2/test/header-cell.test.js @@ -370,6 +370,11 @@ describe('HeaderCell', () => { }); }); }); + + it('should not have aria-label', () => { + wrapper = shallow(); + expect(wrapper.find('th').prop('aria-label')).toBeUndefined(); + }); }); describe('when column.sort is enable', () => { @@ -413,11 +418,20 @@ describe('HeaderCell', () => { expect(onSortCallBack.callCount).toBe(0); }); + it('should have aria-label', () => { + expect(wrapper.find('th').prop('aria-label')).toBe('ID sortable'); + }); + + describe('and sorting prop is false', () => { it('header should render SortSymbol as default', () => { expect(wrapper.find(SortSymbol).length).toBe(1); }); + it('should describe column header as sortable', () => { + expect(wrapper.find('th').prop('aria-label')).toBe('ID sortable'); + }); + describe('when sortCaret is defined ', () => { beforeEach(() => { column = { ...column, sortCaret: jest.fn() }; @@ -445,6 +459,10 @@ describe('HeaderCell', () => { ); }); + it('should describe sort order in aria-label', () => { + expect(wrapper.find('th').prop('aria-label')).toBe(`ID sort ${order}`); + }); + it('should render SortCaret correctly', () => { expect(wrapper.find(SortCaret).length).toBe(1); expect(wrapper.find(SortCaret).prop('order')).toEqual(order);