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

@@ -71,6 +71,8 @@ export class KolTableStateless implements TableStatelessAPI {
 
 	private checkboxRefs: HTMLInputElement[] = [];
 
+	private translateSort = translate('kol-sort');
+
 	@State()
 	private tableDivElementHasScrollbar = false;
 
@@ -840,6 +842,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/test/__snapshots__/snapshot.spec.tsx.snap

@@ -77,7 +77,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" _minWidth="400px" _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" _minWidth="400px" _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>
   <div class="kol-table">
     <kol-table-settings-wc></kol-table-settings-wc>
@@ -89,8 +89,8 @@ exports[`kol-table-stateless-wc should render with _label="Table with only horiz
         </caption>
         <thead class="kol-table__head">
           <tr class="kol-table__head-row">
-            <th aria-sort="none" class="kol-table__cell kol-table__cell--align-left kol-table__cell--header kol-table__cell--none" data-sort="sort-undefined" scope="col">
-              Header 1
+            <th aria-sort="ascending" class="kol-table__cell kol-table__cell--align-left kol-table__cell--ascending kol-table__cell--header" data-sort="sort-ASC" scope="col">
+              <kol-button-wc _ariadescription="kol-sort" _label="Header 1" class="kol-table__sort-button" exportparts="icon"></kol-button-wc>
             </th>
             <th aria-sort="none" class="kol-table__cell kol-table__cell--align-center kol-table__cell--header kol-table__cell--none" data-sort="sort-undefined" scope="col">
               Header 2

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

@@ -39,7 +39,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

@@ -58,6 +58,7 @@ export default {
 	'delete-selection': 'Auswahl entfernen',
 	'filename-text': 'Datei auswählen oder hier ablegen...',
 	'data-browse-text': 'Datei auswählen',
+	sort: 'sortieren',
 	'pagination-position-top': 'oben',
 	'pagination-position-bottom': 'unten',
 };

packages/components/src/locales/en.ts

@@ -58,6 +58,7 @@ export default {
 	'delete-selection': 'Delete selection',
 	'filename-text': 'Choose a file or drop it here...',
 	'data-browse-text': 'Browse',
+	sort: 'Sort',
 	'pagination-position-top': 'top',
 	'pagination-position-bottom': 'bottom',
 };