Implement character limit feature for inputs

[sdvg]

Refs: #7162

The A11y and PO reviews will only take place after all other DoD steps have been completed by the Developer:

• Meaningful pull request title for the release notes
• Pull request is linked to an issue and all changes relate to the issue
• Tests to protect this code implemented (if applicable)
• Manual test performed successfully (if applicable)
• Documentation or migration has been updated (if applicable)

[github-actions]

Netlify Draft Deployment
URL: https://687f6cd50858d32e953b34f6--kolibri-public-ui.netlify.app
Logs: https://app.netlify.com/projects/kolibri-public-ui/deploys/687f6cd50858d32e953b34f6

[laske185]

Durch das Feature haben wir in die Textarea eine Fachlichkeit eingebaut. Denn die Anzeige, wie viele Zeichen übrig oder überschritten sind, ist ein hart gecodeter Validator. Außerdem steht die neue Property _character-limit im Konflikt zu _max-length:

<kol-textarea _label="Textara with charachter limit" _value="123213213123" _character-limit="20" class="hydrated mt" style="" _touched="" _max-length="12"></kol-textarea>

Bitte entferne das Feature wieder aus der Textarea und lasse nur das Debouncing drin (analog Version 2).

Erstelle dafür ein neues Sample (Story) unterhalb der Textarea, das genau dieses Feature mit React-Form-Hook umsetzt:

• Info-Message, wenn noch Zeichen übrig sind.
• Error-Message, wenn die maximale Anzahl überschritten ist.
• max-length darf dann nicht gesetzt und die Validierung muss mit zod umgesetzt werden.

[deleonio]

Hi @laske185 und @sdvg,

ich möchte, dass wir diesen PR morgen früh als Erstes abhaken. Stefan hat, glaube schon x Mal die Konflikte gelöst.

Viele Grüße

[deleonio]

Case	_hasCounter	_maxLength	_maxLengthBehavior	Ausgabe
1	-	-	-	Zähler nicht sichtbar
2	+	-	-	"n Zeichen"
3	+	5	- oder hard	"n/5 Zeichen" - Behavior hard (max-length ist gesetzt)
4	+	5	soft	"noch 3 Zeichen verfügbar" - Behavior soft (max-length ist nicht gesetzt)

https://stackblitz.com/edit/stackblitz-starters-7zvcawwd
Wir entscheiden uns bewusst dafür dass _maxLength nicht implizit _hasCounter aktiviert.

[deleonio]

Hi @sdvg,

kannst Du bitte da noch einmal feintunen.

_hasCounter soll es weiterhin geben.

[deleonio]

_hasCounter soll weiterhin den Text sichtbar oder nicht sichtbar schalten: #7707 (comment)

[Copilot]

Pull Request Overview

This PR implements a comprehensive character limit feature for input components (textarea, input-text, input-password, input-email) with enhanced user feedback and accessibility. The implementation adds new character counting behaviors, internationalization support, and improved styling for character limit states.

Key changes:

• Added _maxLengthBehavior property with 'hard' (default) and 'soft' modes for character limit enforcement
• Implemented debounced character counting for better screen reader accessibility
• Enhanced counter component with visual and ARIA feedback for exceeded limits

Reviewed Changes

Copilot reviewed 43 out of 47 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/components/src/schema/props/max-length-behavior.ts	New schema definition for maxLengthBehavior property
packages/components/src/functional-components/FormFieldCounter/FormFieldCounter.tsx	Redesigned counter component with visual/ARIA text separation and exceeded state handling
packages/components/src/functional-components/FormFieldCharacterLimitHint/FormFieldCharacterLimitHint.tsx	New component providing accessible character limit hints
packages/components/src/locales/*.ts	Added internationalized strings for character limit feedback
packages/components/src/components/input-*/shadow.tsx	Updated input components to support new character limit behaviors
packages/themes/*/mixins/form-field.scss	Added styling for exceeded character limit state

Comments suppressed due to low confidence (1)

packages/samples/react/src/components/input-text/partials/cases.tsx:45

• The removal of _hasCounter property from this test case suggests that the counter behavior has changed. Ensure there are adequate tests covering the new automatic counter behavior when _maxLength is set.

			<KolInputText {...props} _placeholder="Placeholder" _label="With counter" _maxLength={10} _value="Lorem Ipsum" />

[Copilot]

[nitpick] Consider returning an empty fragment (<></>) instead of null for consistency with JSX patterns and to avoid potential issues with conditional rendering.

Suggested change

	return null;
	return <></>;

[Copilot]

Consider using a lightweight debounce implementation instead of importing the entire lodash-es library to reduce bundle size. A simple setTimeout-based debounce function would be sufficient for this use case.

Suggested change

	import { debounce } from 'lodash-es';
	function debounce(func: (...args: any[]) => void, wait: number): (...args: any[]) => void {
	let timeout: ReturnType<typeof setTimeout> | null = null;
	return function (...args: any[]) {
	if (timeout) {
	clearTimeout(timeout);
	}
	timeout = setTimeout(() => func(...args), wait);
	};
	}

[Copilot]

[nitpick] The function has multiple responsibilities (calculating visual text, aria text, and CSS classes). Consider extracting the text calculation logic into separate utility functions to improve readability and testability.

Suggested change

	let visualText: string | undefined;
	let ariaText: string | undefined;
	const counterClasses = ['kol-form-field__counter'];
	const counterClasses = ['kol-form-field__counter'];
	const { visualText, ariaText, exceededLive } = calculateCounterTexts(currentLength, currentLengthDebounced, maxLength, hasCounter);
	if (exceededLive) {
	counterClasses.push('kol-form-field__counter--exceeded');
	}
	if (!visualText || !ariaText) {
	return null;
	}
	return (
	<>
	<span class={clsx(counterClasses)} aria-hidden="true" data-testid="input-counter">
	{visualText}
	</span>
	<span aria-live="polite" class="visually-hidden" data-testid="input-counter-aria">
	{ariaText}
	</span>
	</>
	);
	};
	const calculateCounterTexts = (
	currentLength: number,
	currentLengthDebounced: number,
	maxLength?: number,
	hasCounter?: boolean
	): { visualText: string | undefined; ariaText: string | undefined; exceededLive: boolean } => {
	let visualText: string | undefined;
	let ariaText: string | undefined;
	let exceededLive = false;

[Copilot]

The &__hint block was moved from lines 11-13 to lines 36-38. Ensure this relocation doesn't affect CSS specificity or cascade behavior in existing implementations.

Suggested change

	&__hint {
	@include kol-typography-hint;
	}
	// Removed &__hint block from here as it was relocated to its original position.