fix: issue with empty aria-describedby (#4610)

* fix: issue with empty aria-describedby

* test: updated snapshot

* test: updated snapshot

---------

Co-authored-by: Maximilian Franzke <[email protected]>
Co-authored-by: Maximilian Franzke <[email protected]>

Author: nmerget

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -53,7 +53,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 		_validMessageId: undefined,
 		_invalidMessageId: undefined,
 		_invalidMessage: undefined,
-		_descByIds: '',
+		_descByIds: undefined,
 		_voiceOverFallback: '',
 		hasValidState: () => {
 			return !!(props.validMessage ?? props.validation === 'valid');
@@ -84,7 +84,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			} else if (stringPropVisible(props.message, props.showMessage)) {
 				state._descByIds = state._messageId;
 			} else {
-				state._descByIds = '';
+				state._descByIds = undefined;
 			}
 		},
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
@@ -139,6 +139,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			if (stringPropVisible(props.message, props.showMessage)) {
 				state._descByIds = messageId;
 			}
+			state.handleValidation();
 		}
 	}, [state._id]);
 

packages/components/src/components/custom-select/custom-select.lite.tsx

@@ -104,7 +104,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 		_validity: 'no-validation',
 		_userInteraction: false,
 		// Workaround for Vue output: TS for Vue would think that it could be a function, and by this we clarify that it's a string
-		_descByIds: '',
+		_descByIds: undefined,
 		_selectedLabels: '',
 		_selectedLabelsId: undefined,
 		_voiceOverFallback: '',

packages/components/src/components/input/input.lite.tsx

@@ -67,8 +67,8 @@ export default function DBInput(props: DBInputProps) {
 		_invalidMessageId: undefined,
 		_invalidMessage: undefined,
 		_dataListId: undefined,
-		_descByIds: '',
-		_value: '',
+		_descByIds: undefined,
+		_value: undefined,
 		_voiceOverFallback: '',
 		hasValidState: () => {
 			return !!(props.validMessage ?? props.validation === 'valid');
@@ -102,7 +102,7 @@ export default function DBInput(props: DBInputProps) {
 			} else if (stringPropVisible(props.message, props.showMessage)) {
 				state._descByIds = state._messageId;
 			} else {
-				state._descByIds = '';
+				state._descByIds = undefined;
 			}
 		},
 		handleInput: (event: InputEvent<HTMLInputElement>) => {
@@ -192,6 +192,8 @@ export default function DBInput(props: DBInputProps) {
 			if (stringPropVisible(props.message, props.showMessage)) {
 				state._descByIds = messageId;
 			}
+
+			state.handleValidation();
 		}
 	}, [state._id]);
 

packages/components/src/components/select/select.lite.tsx

@@ -63,7 +63,7 @@ export default function DBSelect(props: DBSelectProps) {
 		_invalidMessage: undefined,
 		_placeholderId: '',
 		// Workaround for Vue output: TS for Vue would think that it could be a function, and by this we clarify that it's a string
-		_descByIds: '',
+		_descByIds: undefined,
 		_value: '',
 		initialized: false,
 		_voiceOverFallback: '',
@@ -187,6 +187,7 @@ export default function DBSelect(props: DBSelectProps) {
 				state._descByIds = placeholderId;
 			}
 
+			state.handleValidation();
 			state.initialized = false;
 		}
 	}, [state._id, state.initialized]);

packages/components/src/components/textarea/textarea.lite.tsx

@@ -56,7 +56,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 		_invalidMessageId: undefined,
 		_invalidMessage: undefined,
 		// Workaround for Vue output: TS for Vue would think that it could be a function, and by this we clarify that it's a string
-		_descByIds: '',
+		_descByIds: undefined,
 		_value: '',
 		_voiceOverFallback: '',
 		hasValidState: () => {
@@ -88,7 +88,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 			} else if (stringPropVisible(props.message, props.showMessage)) {
 				state._descByIds = state._messageId;
 			} else {
-				state._descByIds = '';
+				state._descByIds = undefined;
 			}
 		},
 		handleInput: (event: InputEvent<HTMLTextAreaElement>) => {
@@ -162,6 +162,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 			if (stringPropVisible(props.message, props.showMessage)) {
 				state._descByIds = messageId;
 			}
+			state.handleValidation();
 		}
 	}, [state._id]);
 

showcases/screen-reader/__snapshots__/windows/chromium/DBInput-required-1.txt

@@ -1 +1 @@
-["Label, edit, required, True, blank","T. e. s. t","Test selected","blank. Please fill out this field.. unselected","T. e. s. t"]
+["Label, edit, required, Please fill out this field., True, blank","T. e. s. t","Test selected","blank. Please fill out this field.. unselected","T. e. s. t"]

showcases/screen-reader/__snapshots__/windows/chromium/DBTextarea-required-1.txt

@@ -1 +1 @@
-["Label, edit, required, multi line, True, blank","T. e. s. t","Test selected","blank. Please fill out this field.. unselected","T. e. s. t"]
+["Label, edit, required, multi line, Please fill out this field., True, blank","T. e. s. t","Test selected","blank. Please fill out this field.. unselected","T. e. s. t"]