diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html index 6751cf639a..232156917a 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html @@ -54,7 +54,8 @@ 'adf-datatable__header--sorted-desc': isColumnSorted(col, 'desc')}" [ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}" role="columnheader" - [attr.aria-sort]="col.sortable ? getAriaSort(col) : null" + [attr.aria-label]="col.srTitle ? (col.srTitle | translate) : (col.title | translate) + (col.subtitle ? ' ' + (col.subtitle | translate) : '')" + [attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null" cdkDrag cdkDragLockAxis="x" (cdkDragStarted)="isDraggingHeaderColumn = true" @@ -74,7 +75,7 @@ [attr.aria-description]=" isColumnSortActive(col) ? (getSortLiveAnnouncement(col) | translate: { string: col.title | translate }) : null " - [attr.aria-label]=" + [attr.aria-label]=" col.srTitle ? (col.srTitle | translate) : ('ADF-DATATABLE.ACCESSIBILITY.SORT_DEFAULT' | translate) + @@ -96,10 +97,6 @@ !isDraggingHeaderColumn && !isResizing && col.sortable}" > - - {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }} - - + + {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }} + + diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts index d9862c6bfe..930f66198f 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts @@ -1673,25 +1673,25 @@ describe('Accessibility', () => { column = new ObjectDataColumn({ key: 'key' }); }); - it('should return correct key without translation when no sort is applied', () => { + it('should return correct translation key when no sort is applied', () => { spyOn(dataTable, 'isColumnSortActive').and.returnValue(false); - expect(dataTable.getAriaSort(column)).toBe('none'); + expect(dataTable.getAriaSort(column)).toBe('ADF-DATATABLE.ACCESSIBILITY.SORT_NONE'); }); - it('should return key without translation when column sort is ascending', () => { + it('should return translation key when column sort is ascending', () => { const isColumnSortedAsc = true; spyOn(dataTable, 'isColumnSortActive').and.returnValue(true); spyOn(dataTable, 'isColumnSorted').and.returnValue(isColumnSortedAsc); - expect(dataTable.getAriaSort(column)).toBe('ascending'); + expect(dataTable.getAriaSort(column)).toBe('ADF-DATATABLE.ACCESSIBILITY.SORT_ASCENDING'); }); - it('should return key without translation when column sort is descending', () => { + it('should return translation key when column sort is descending', () => { const isColumnSortedAsc = false; spyOn(dataTable, 'isColumnSortActive').and.returnValue(true); spyOn(dataTable, 'isColumnSorted').and.returnValue(isColumnSortedAsc); - expect(dataTable.getAriaSort(column)).toBe('descending'); + expect(dataTable.getAriaSort(column)).toBe('ADF-DATATABLE.ACCESSIBILITY.SORT_DESCENDING'); }); }); @@ -1757,7 +1757,7 @@ describe('Accessibility', () => { }); }); - it('should allow header cell focus when cell is sortable', () => { + it('should remove header cell focus when cell is sortable', () => { setupAndCheckHeaderColumns(true, headerCellSelector, (element) => { expect(element?.nativeElement.getAttribute('tabindex')).toBeNull(); }); @@ -1775,9 +1775,9 @@ describe('Accessibility', () => { }); }); - it('should set tabindex equal to 0 on header cell sortable wrapper when cell is sortable', () => { + it('should set tabindex equal to null on header cell sortable wrapper when cell is sortable', () => { setupAndCheckHeaderColumns(true, headerCellContentSelector, (element) => { - expect(element?.nativeElement.getAttribute('tabindex')).toBe('0'); + expect(element?.nativeElement.getAttribute('tabindex')).toEqual('0'); }); }); diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts index b2e435374e..55368950f6 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts @@ -1032,10 +1032,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges, getAriaSort(column: DataColumn): string { if (!this.isColumnSortActive(column)) { - return 'none'; + return 'ADF-DATATABLE.ACCESSIBILITY.SORT_NONE'; } - return this.isColumnSorted(column, 'asc') ? 'ascending' : 'descending'; + return this.isColumnSorted(column, 'asc') ? 'ADF-DATATABLE.ACCESSIBILITY.SORT_ASCENDING' : 'ADF-DATATABLE.ACCESSIBILITY.SORT_DESCENDING'; } getSortLiveAnnouncement(column: DataColumn): string {