Fix ariaDescribedBy attribute for inputs

Refs: #7162

Author: sdvg

packages/components/src/functional-component-wrappers/InputStateWrapper/InputStateWrapper.tsx

@@ -35,10 +35,12 @@ export type InputStateWrapperProps = Partial<InputProps> & {
 
 /**
  * @param state
+ * @param other
  * @param customSuggestions - Set to true when a custom implementation for _suggestions is provided. Omits the native datalist.
  */
-function getInputProps(state: InputState, customSuggestions?: boolean): InputProps {
-	const { ariaDescribedBy } = getRenderStates(state);
+function getInputProps(state: InputState, other: Partial<InputProps>, customSuggestions?: boolean): InputProps {
+	const renderStates = getRenderStates(state);
+	const ariaDescribedBy = [...renderStates.ariaDescribedBy, ...(other.ariaDescribedBy ?? [])];
 
 	const props: InputProps = {
 		id: state._id,
@@ -47,8 +49,6 @@ function getInputProps(state: InputState, customSuggestions?: boolean): InputPro
 		accessKey: state._accessKey,
 		disabled: state._disabled,
 		name: state._name,
-
-		ariaDescribedBy: ariaDescribedBy,
 	};
 
 	if ('_type' in state) props.type = state._type;
@@ -76,11 +76,15 @@ function getInputProps(state: InputState, customSuggestions?: boolean): InputPro
 		}
 	}
 
-	return props;
+	return {
+		...props,
+		...other,
+		ariaDescribedBy,
+	};
 }
 
 const InputStateWrapper: FC<InputStateWrapperProps> = ({ state, customSuggestions, ...other }) => {
-	return <KolInputFc {...getInputProps(state, customSuggestions)} {...other} />;
+	return <KolInputFc {...getInputProps(state, other, customSuggestions)} />;
 };
 
 export default InputStateWrapper;

packages/components/src/functional-components/FormFieldCounter/tests/__snapshots__/snapshot.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolFormFieldCounterFc should render correctly 1`] = `
-<span aria-hidden="true" class="custom-class kol-form-field__counter" data-testid="input-counter">
+<span aria-hidden="true" class="kol-form-field__counter" data-testid="input-counter">
   kol-character-limit-remaining
 </span>
 `;

packages/components/src/functional-components/FormFieldCounter/tests/snapshot.test.tsx

@@ -8,33 +8,10 @@ const maxLength = 10;
 
 describe('KolFormFieldCounterFc', () => {
 	it('should render correctly', async () => {
-		const classNames = 'custom-class';
 		const page = await renderFunctionalComponentToSpecPage(() => (
-			<KolFormFieldCounterFc
-				id="test-id"
-				currentLength={currentLength}
-				currentLengthDebounced={currentLengthDebounced}
-				maxLength={maxLength}
-				class={classNames}
-			/>
+			<KolFormFieldCounterFc id="test-id" currentLength={currentLength} currentLengthDebounced={currentLengthDebounced} maxLength={maxLength} />
 		));
 
 		expect(page.root).toMatchSnapshot();
 	});
-
-	it('should set the correct class names', async () => {
-		const classNames = 'custom-class';
-		const page = await renderFunctionalComponentToSpecPage(() => (
-			<KolFormFieldCounterFc
-				id="test-id"
-				currentLength={currentLength}
-				currentLengthDebounced={currentLengthDebounced}
-				maxLength={maxLength}
-				class={classNames}
-			/>
-		));
-
-		expect(page.root?.className).toContain('counter');
-		expect(page.root?.className).toContain(classNames);
-	});
 });