diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html index e6ddf4ee66..b2b41c4f5a 100644 --- a/lib/core/datatable/components/datatable/datatable.component.html +++ b/lib/core/datatable/components/datatable/datatable.component.html @@ -31,10 +31,9 @@ role="columnheader" [attr.tabindex]="showHeader ? 0 : null" [attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null" - title="{{ col.title | translate }}" adf-drop-zone dropTarget="header" [dropColumn]="col"> - {{ col.srTitle | translate }} {{ col.title | translate}} + {{ getSortLiveAnnouncement(col) | translate: {string: col.title} }}
diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts index 0fdf15d5e9..5d7dc7b11b 100644 --- a/lib/core/datatable/components/datatable/datatable.component.ts +++ b/lib/core/datatable/components/datatable/datatable.component.ts @@ -763,6 +763,15 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck, 'ADF-DATATABLE.ACCESSIBILITY.SORT_ASCENDING' : 'ADF-DATATABLE.ACCESSIBILITY.SORT_DESCENDING'; } + + getSortLiveAnnouncement(column: DataColumn): string { + if (!this.isColumnSortActive(column)) { + return 'ADF-DATATABLE.ACCESSIBILITY.SORT_DEFAULT' ; + } + return this.isColumnSorted(column, 'asc') ? + 'ADF-DATATABLE.ACCESSIBILITY.SORT_ASCENDING_BY' : + 'ADF-DATATABLE.ACCESSIBILITY.SORT_DESCENDING_BY'; + } } export interface DataTableDropEvent { diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json index a47d679aed..b95551b91f 100644 --- a/lib/core/i18n/en.json +++ b/lib/core/i18n/en.json @@ -280,6 +280,9 @@ "SORT_ASCENDING": "Ascending", "SORT_DESCENDING": "Descending", "SORT_NONE": "None", + "SORT_DEFAULT": "Sortable", + "SORT_ASCENDING_BY": "Ascending by {{ string }}", + "SORT_DESCENDING_BY": "Descending by {{ string }}", "ICON_TEXT": "Item type {{ type }}", "ICON_DISABLED": "Disabled", "ROW_OPTION_BUTTON": "Actions"