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 (
-
+ |
|