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);