[ACS-10241]: Personal files: Column sorting state and role not communicated by buttons (parially reverted to align with hxp) (#11598)

* [ACS-10241]: partially reverted changes

* [ACS-10241]: restored aria-label

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}"
             >
-                <span *ngIf="col.title && col.sortable" class="adf-sr-only" aria-live="assertive" aria-atomic="true">
-                            {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
-                </span>
-
                 <ng-container *ngIf="!col.header">
                     <span
                         *ngIf="col.title"
@@ -117,6 +114,10 @@
                         ({{col.subtitle | translate}})
                     </span>
 
+                    <span *ngIf="col.title && col.sortable && isDraggingHeaderColumn" class="adf-sr-only" aria-live="polite">
+                        {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
+                    </span>
+
                     <span *ngIf="!col.title && !col.sortable && !headerFilterTemplate" [attr.title]="'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate"></span>
                 </ng-container>
 

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

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 {