fix(table): improve screenreader experience for sorting (#289)

allianz · Apr 21, 2021 · d191797 · d191797
1 parent 73dd003
commit d191797
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 15 deletions.
diff --git a/projects/ng-aquila/documentation/examples/table/table-sorting/table-sorting-example.ts b/projects/ng-aquila/documentation/examples/table/table-sorting/table-sorting-example.ts
@@ -13,8 +13,10 @@ interface Contract {
 
 @Injectable()
 export class MyIntl extends NxSortHeaderIntl {
-  sortAscendingAriaLabel = 'sort ascending by';
-  sortDescendingAriaLabel = 'sort descending by';
+  sortAscendingAriaLabel: string = 'click to sort ascending';
+  sortDescendingAriaLabel: string = 'click to sort descending';
+  sortedAscendingAriaLabel: string = 'sorted ascending by';
+  sortedDescendingAriaLabel: string = 'sorted descending by';
 }
 
 /**

diff --git a/projects/ng-aquila/src/table/sort-header/sort-header-intl.ts b/projects/ng-aquila/src/table/sort-header/sort-header-intl.ts
@@ -9,8 +9,12 @@ export class NxSortHeaderIntl {
    */
   readonly changes: Subject<void> = new Subject<void>();
 
-  /** The aria label for a header that can be sorted ascending. */
-  sortAscendingAriaLabel: string = 'sort ascending by';
-  /** The aria label for a header that can be sorted descending. */
-  sortDescendingAriaLabel: string = 'sort descending by';
+  /** The aria label for a header that can be clicked to sort ascending. */
+  sortAscendingAriaLabel: string = 'click to sort ascending';
+  /** The aria label for a header that can be clicked to sort descending. */
+  sortDescendingAriaLabel: string = 'click to sort descending';
+  /** The aria label for a column that is sorted ascending. */
+  sortedAscendingAriaLabel: string = 'sorted ascending by';
+  /** The aria label for a column that is sorted descending. */
+  sortedDescendingAriaLabel: string = 'sorted descending by';
 }
diff --git a/projects/ng-aquila/src/table/sort-header/sort-header.component.html b/projects/ng-aquila/src/table/sort-header/sort-header.component.html
@@ -1,6 +1,11 @@
-<div #focusContainer class="nx-sort-header__focus-container" role="button" tabindex="0">
-  <div class="nx-sort-header__icons-container"
-      [attr.aria-label]="_getAriaLabel()">
+<div #focusContainer
+  class="nx-sort-header__focus-container"
+  role="button"
+  tabindex="0"
+  [attr.title]="_getTitle()"
+  aria-live="polite"
+ >
+  <div class="nx-sort-header__icons-container" [attr.aria-label]="_getAriaLabel()">
     <nx-icon name="chevron-up-small"
         class="nx-sort-header__icon-up"
         [class.nx-sort-header__hidden-icon]="_isSortedDescending()">

diff --git a/projects/ng-aquila/src/table/sort-header/sort-header.component.ts b/projects/ng-aquila/src/table/sort-header/sort-header.component.ts
@@ -97,6 +97,17 @@ export class NxSortHeaderComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   _getAriaLabel(): string {
+    if (this._sort.active === this._key) {
+      if (this._sort.direction === 'asc') {
+        return `${this._intl.sortedAscendingAriaLabel}`;
+      }
+      return `${this._intl.sortedDescendingAriaLabel}`;
+    }
+
+    return '';
+  }
+
+    _getTitle(): string {
     if (this._sort.active === this._key && this._sort.direction === 'asc') {
       return `${this._intl.sortDescendingAriaLabel}`;
     }

diff --git a/projects/ng-aquila/src/table/sort-header/sort.spec.ts b/projects/ng-aquila/src/table/sort-header/sort.spec.ts
@@ -16,6 +16,8 @@ interface DataStructure {
 class MyIntl extends NxSortHeaderIntl {
   sortAscendingAriaLabel = 'aufsteigend sortieren';
   sortDescendingAriaLabel = 'absteigend sortieren';
+  sortedAscendingAriaLabel = 'aufsteigend sortiert';
+  sortedDescendingAriaLabel = 'absteigend sortiert';
 }
 
 @Directive()
@@ -203,30 +205,32 @@ describe ('NxSort', () => {
     it('has the correct aria label for an unsorted column', () => {
       createTestComponent(BasicSortTableComponent);
       const nameHeaderElement = fixture.nativeElement.querySelector('#nameHeader .nx-sort-header__icons-container');
-      expect(nameHeaderElement.getAttribute('aria-label')).toBe('aufsteigend sortieren');
+      expect(nameHeaderElement.getAttribute('aria-label')).toBe('');
     });
 
     it('has the correct aria label for a sorted column', () => {
       createTestComponent(BasicSortTableComponent);
-
+      const nameHeaderButtonElement = fixture.nativeElement.querySelector('#nameHeader .nx-sort-header__focus-container');
       const nameHeaderElement = fixture.nativeElement.querySelector('#nameHeader .nx-sort-header__icons-container');
       nameHeaderElement.click();
       fixture.detectChanges();
-      expect(nameHeaderElement.getAttribute('aria-label')).toBe('absteigend sortieren');
+      expect(nameHeaderElement.getAttribute('aria-label')).toBe('aufsteigend sortiert');
+      expect(nameHeaderButtonElement.getAttribute('title')).toBe('absteigend sortieren');
 
       nameHeaderElement.click();
       fixture.detectChanges();
-      expect(nameHeaderElement.getAttribute('aria-label')).toBe('aufsteigend sortieren');
+      expect(nameHeaderElement.getAttribute('aria-label')).toBe('absteigend sortiert');
+      expect(nameHeaderButtonElement.getAttribute('title')).toBe('aufsteigend sortieren');
     });
 
     it('should rerender when aria labels change', inject([NxSortHeaderIntl],
       (intl: NxSortHeaderIntl) => {
         createTestComponent(BasicSortTableComponent);
-        const nameHeaderElement = fixture.nativeElement.querySelector('#nameHeader .nx-sort-header__icons-container');
+        const nameHeaderButtonElement = fixture.nativeElement.querySelector('#nameHeader .nx-sort-header__focus-container');
         intl.sortAscendingAriaLabel = 'aufsteigend sortieren nach';
         intl.changes.next();
         fixture.detectChanges();
-        expect(nameHeaderElement.getAttribute('aria-label')).toBe('aufsteigend sortieren nach');
+        expect(nameHeaderButtonElement.getAttribute('title')).toBe('aufsteigend sortieren nach');
     }));
 
     it('should sort on ENTER press', () => {