feat: add translation support for sorting functionality in table component

Author: deleonio

packages/components/AGENTS.md

@@ -35,3 +35,15 @@ Use the `condition && <Element />` pattern to render JSX elements only when a co
 ```
 
 Avoid using `hidden={condition}` unless the element should always be present in the DOM but visually hidden.
+
+### Language texts
+
+All UI texts must be stored in `src/locales/en.ts` and `src/locales/de.ts`.
+New translations get the prefix `kol-` and are referenced in the code using the
+`translate()` helper, e.g. `translate('kol-example')`.
+Call `translate()` once when the component instance is created (e.g. in a field
+initializer) and reuse the result. This prevents unnecessary work while still
+updating texts when the component is rerendered. Cache the value in a class
+property whose name starts with `translate` followed by the translation
+identifier, for example `translateSort` for `kol-sort` or `translateOrderBy`
+for `kol-order-by`.

packages/components/src/components/table-stateless/component.tsx

@@ -61,6 +61,8 @@ export class KolTableStateless implements TableStatelessAPI {
 
 	private checkboxRefs: HTMLInputElement[] = [];
 
+	private translateSort = translate('kol-sort');
+
 	@State()
 	private tableDivElementHasScrollbar = false;
 
@@ -671,6 +673,7 @@ export class KolTableStateless implements TableStatelessAPI {
 						exportparts="icon"
 						_icons={{ right: sortButtonIcon }}
 						_label={cell.label}
+						_ariaDescription={this.translateSort}
 						_on={{
 							onClick: (event: MouseEvent) => {
 								if (typeof this.state._on?.onSort === 'function' && cell.key && cell.sortDirection) {

packages/components/src/components/table-stateless/readme.md

@@ -68,9 +68,13 @@ const selection: KoliBriTableSelection = {
       /* Update selection.selectedKeys state */
     }
   }}
+
 />
 ```
 
+Der Sortierschalter verwendet das Attribut `_aria-description` und zeigt immer den
+Sprachtext `kol-sort` an, unabhängig vom aktuellen Sortierzustand.
+
 <!-- Auto Generated Below -->
 
 ## Properties

packages/components/src/components/table-stateless/test/__snapshots__/snapshot.spec.tsx.snap

@@ -74,7 +74,7 @@ exports[`kol-table-stateless-wc should render with _label="Table with horizontal
 </kol-table-stateless-wc>
 `;
 
-exports[`kol-table-stateless-wc should render with _label="Table with only horizontal headers" _headerCells={"horizontal":[[{"key":"header1","label":"Header 1","textAlign":"left"},{"key":"header2","label":"Header 2","textAlign":"center"}]],"vertical":[]} _data=[{"header1":"Cell 1.1","header2":"Cell 1.2"},{"header1":"Cell 2.1","header2":"Cell 2.2"}] 1`] = `
+exports[`kol-table-stateless-wc should render with _label="Table with only horizontal headers" _headerCells={"horizontal":[[{"key":"header1","label":"Header 1","textAlign":"left","sortDirection":"ASC"},{"key":"header2","label":"Header 2","textAlign":"center"}]],"vertical":[]} _data=[{"header1":"Cell 1.1","header2":"Cell 1.2"},{"header1":"Cell 2.1","header2":"Cell 2.2"}] 1`] = `
 <kol-table-stateless-wc class="kol-table-stateless-wc">
   <div class="table">
     <table>
@@ -84,8 +84,8 @@ exports[`kol-table-stateless-wc should render with _label="Table with only horiz
       </caption>
       <thead>
         <tr>
-          <th aria-sort="none" class="align-left" data-sort="sort-undefined" scope="col">
-            Header 1
+          <th aria-sort="ascending" class="align-left" data-sort="sort-ASC" scope="col">
+            <kol-button-wc _ariadescription="kol-sort" _label="Header 1" class="table-sort-button" exportparts="icon"></kol-button-wc>
           </th>
           <th aria-sort="none" class="align-center" data-sort="sort-undefined" scope="col">
             Header 2

packages/components/src/components/table-stateless/test/snapshot.spec.tsx

@@ -37,7 +37,7 @@ executeSnapshotTests<TableStatelessProps>(
 			_headerCells: {
 				horizontal: [
 					[
-						{ key: 'header1', label: 'Header 1', textAlign: 'left' },
+						{ key: 'header1', label: 'Header 1', textAlign: 'left', sortDirection: 'ASC' },
 						{ key: 'header2', label: 'Header 2', textAlign: 'center' },
 					],
 				],

packages/components/src/locales/de.ts

@@ -48,6 +48,7 @@ export default {
 	'hide-password': 'ausblenden',
 	'no-results-message': 'Keine Ergebnisse gefunden.',
 	'delete-selection': 'Auswahl entfernen',
+	sort: 'sortieren',
 	'pagination-position-top': 'oben',
 	'pagination-position-bottom': 'unten',
 };

packages/components/src/locales/en.ts

@@ -48,6 +48,7 @@ export default {
 	'hide-password': 'Hide',
 	'no-results-message': 'No results found.',
 	'delete-selection': 'Delete selection',
+	sort: 'Sort',
 	'pagination-position-top': 'top',
 	'pagination-position-bottom': 'bottom',
 };