From 072cac07d17eae823848ade69e1333714fea6482 Mon Sep 17 00:00:00 2001
From: "malin.klingsell@allianz.de" <malin.klingsell@allianz.com>
Date: Tue, 7 May 2024 10:37:06 +0200
Subject: [PATCH] fix(table): change sorted arial label and move myintl to docs
 (#1188)

---
 .../table-sorting/table-sorting-example.ts    | 17 ++----------
 .../src/table/sort-header/sort-header-intl.ts |  4 +--
 projects/ng-aquila/src/table/table.md         | 27 ++++++++++++++++---
 3 files changed, 28 insertions(+), 20 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
index b89c12d9f..5da1e4f27 100644
--- 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
@@ -1,9 +1,5 @@
-import { Component, Injectable } from '@angular/core';
-import {
-    NxSortHeaderIntl,
-    SortDirection,
-    SortEvent,
-} from '@aposin/ng-aquila/table';
+import { Component } from '@angular/core';
+import { SortDirection, SortEvent } from '@aposin/ng-aquila/table';
 
 interface Contract {
     product: string;
@@ -15,14 +11,6 @@ interface Contract {
     statusText: string;
 }
 
-@Injectable()
-export class MyIntl extends NxSortHeaderIntl {
-    sortAscendingAriaLabel = 'click to sort ascending';
-    sortDescendingAriaLabel = 'click to sort descending';
-    sortedAscendingAriaLabel = 'sorted ascending by';
-    sortedDescendingAriaLabel = 'sorted descending by';
-}
-
 /**
  * @title Sorting example
  */
@@ -30,7 +18,6 @@ export class MyIntl extends NxSortHeaderIntl {
     selector: 'table-sorting-example',
     templateUrl: './table-sorting-example.html',
     styleUrls: ['table-sorting-example.css'],
-    providers: [{ provide: NxSortHeaderIntl, useClass: MyIntl }],
 })
 export class TableSortingExampleComponent {
     tableElements: Contract[] = [
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
index cc6bb232c..c7b5b38b9 100644
--- a/projects/ng-aquila/src/table/sort-header/sort-header-intl.ts
+++ b/projects/ng-aquila/src/table/sort-header/sort-header-intl.ts
@@ -14,7 +14,7 @@ export class NxSortHeaderIntl {
     /** The aria label for a header that can be clicked to sort descending. */
     sortDescendingAriaLabel = 'click to sort descending';
     /** The aria label for a column that is sorted ascending. */
-    sortedAscendingAriaLabel = 'sorted ascending by';
+    sortedAscendingAriaLabel = 'sorted ascending';
     /** The aria label for a column that is sorted descending. */
-    sortedDescendingAriaLabel = 'sorted descending by';
+    sortedDescendingAriaLabel = 'sorted descending';
 }
diff --git a/projects/ng-aquila/src/table/table.md b/projects/ng-aquila/src/table/table.md
index 8de84c54a..ecc0ff32b 100644
--- a/projects/ng-aquila/src/table/table.md
+++ b/projects/ng-aquila/src/table/table.md
@@ -58,12 +58,33 @@ Application developers can implement custom column behavior, such as column hidi
 Additionally, if you need to truncate text when the column is resized and the content overflows, you can use the `nxTableCellClip` directive.
  <!-- example(table-column-resize) -->
 
+### Localization
+For **localization** please use the provider `NxHeaderSortIntl` which contains some labels for screen reader users. By default the labels are in english.
+
+```ts
+@Injectable()
+export class MyIntl extends NxSortHeaderIntl {
+    sortAscendingAriaLabel = 'klick, um absteigend zu sortieren';
+    sortDescendingAriaLabel = 'klick, um absteigend zu sortieren';
+    sortedAscendingAriaLabel = 'aufsteigend sortiert nach';
+    sortedDescendingAriaLabel = 'absteigend sortiert nach';
+}
+
+@Component({
+    ...
+    providers: [
+        { 
+            provide: NxSortHeaderIntl, 
+            useClass: MyIntl 
+        }
+    ],
+})
+```
+
 ### Sorting header
 
 This example shows how you can implement a basic sorting functionality for a table with `nxSort` and `nxSortHeaderCell`. As we don't know how your data looks like, you can implement the actual sorting function by yourself and call the function every time an `(sortChange)` event is outputted.
 
-For **localization** please use the provider `NxHeaderSortIntl` which contains some labels for screen reader users. By default the labels are in english. This is also shown in the following example.
-
 <!-- example(table-sorting) -->
 
 ### Advanced example: Combine sorting, filtering and pagination
@@ -105,4 +126,4 @@ Form elements can also be added to the table:
 
 <!-- example(table-form-elements) -->
 
-</div>
+</div>
\ No newline at end of file