Add translation support for sorting in UI components

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/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',
 };