diff --git a/src/components/DataTable/TableHeader.js b/src/components/DataTable/TableHeader.js index 1511239503c0..36a33ec976c7 100644 --- a/src/components/DataTable/TableHeader.js +++ b/src/components/DataTable/TableHeader.js @@ -12,16 +12,29 @@ const translationKeys = { const translateWithId = (key, { sortDirection, isSortHeader, sortStates }) => { if (key === translationKeys.iconDescription) { if (isSortHeader) { - const order = - sortDirection === sortStates.DESC ? 'descending' : 'ascending'; - return `Sort rows by this header in ${order} order`; + // When transitioning, we know that the sequence of states is as follows: + // NONE -> ASC -> DESC -> NONE + if (sortDirection === sortStates.NONE) { + return 'Sort rows by this header in ascending order'; + } + if (sortDirection === sortStates.ASC) { + return 'Sort rows by this header in descending order'; + } + + return 'Unsort rows by this header'; } - return `Sort rows by this header in descending order`; + return 'Sort rows by this header in ascending order'; } return ''; }; +const sortDirections = { + [sortStates.NONE]: 'none', + [sortStates.ASC]: 'ascending', + [sortStates.DESC]: 'descending', +}; + const TableHeader = ({ className: headerClassName, children, @@ -46,11 +59,12 @@ const TableHeader = ({ 'bx--table-sort-v2--active': isSortHeader && sortDirection !== sortStates.NONE, 'bx--table-sort-v2--ascending': - isSortHeader && sortDirection === sortStates.ASC, + isSortHeader && sortDirection === sortStates.DESC, }); + const ariaSort = !isSortHeader ? 'none' : sortDirections[sortDirection]; return ( - +