Fix a11y form component ids

.xo-config.cjs

@@ -43,6 +43,13 @@ module.exports = {
 				'@typescript-eslint/no-unsafe-return': 0, // valid for app
 				'import/no-extraneous-dependencies': 0 // foundation and component.css are inside this repo
 			}
+		},
+		{
+			files: ['./**/*.spec.ts'],
+			rules: {
+				// Playwright tests are async we shall use loops there
+				'no-await-in-loop': 0
+			}
 		}
 	],
 	rules: {

packages/components/scripts/post-build/angular.ts

@@ -20,6 +20,14 @@ const changeFile = (input: string) => {
 				return line.replace(': ElementRef', ': ElementRef | undefined');
 			}
 
+			// We need to remove "nativeElement" in template part, because it only exists in ts
+			if (
+				line.includes('ref.nativeElement') &&
+				(line.includes('{{') || line.includes('}}'))
+			) {
+				return line.replace('.nativeElement', '');
+			}
+
 			if (line.includes('.nativeElement') && !line.includes('=')) {
 				return line.replace('.nativeElement', '?.nativeElement');
 			}

packages/components/scripts/post-build/components.ts

@@ -63,6 +63,10 @@ export const getComponents = (): Component[] => [
 				{
 					from: 'scrollContainer = null;',
 					to: 'scrollContainer: Element | null = null;'
+				},
+				{
+					from: '& > .db-tab-panel',
+					to: '& > dbtabpanel > .db-tab-panel, & > db-tab-panel > .db-tab-panel'
 				}
 			]
 		}
@@ -149,6 +153,13 @@ export const getComponents = (): Component[] => [
 
 	{
 		name: 'select',
+		overwrites: {
+			react: [
+				// React not allowing selected for options
+				{ from: 'selected={option.selected}', to: '' },
+				{ from: 'selected={optgroupOption.selected}', to: '' }
+			]
+		},
 		config: {
 			vue: {
 				vModel: [{ modelValue: 'value', binding: ':value' }]

packages/components/scripts/post-build/react.ts

@@ -98,6 +98,12 @@ export default (tmp?: boolean) => {
 						`{...filterPassingProps(props,${JSON.stringify(
 							component?.config?.react?.propsPassingFilter ?? []
 						)})}`
+				},
+				/* We need to overwrite the internal state._value property just for react to have controlled components.
+				 * It works for Angular & Vue, so we overwrite it only for React.  */
+				{
+					from: 'props.value ?? _value',
+					to: 'props.value'
 				}
 			];
 

packages/components/scripts/post-build/vue.ts

@@ -63,9 +63,30 @@ export default (tmp?: boolean) => {
 				{
 					from: /immediate: true,/g,
 					to: 'immediate: true,\nflush: "post"'
+				},
+				/* `this` can be undefined for ssr (nuxt) we need to add */
+				{
+					from: /this.\$refs.ref\?.validationMessage/g,
+					to: 'this?.$refs.ref?.validationMessage'
 				}
 			];
 
+			/* This is a workaround for valid/invalid Messages.
+			 *  If a valid/invalid message appears it will use the old this._value,
+			 *  so we need to overwrite this._value with the current event.target.value.   */
+			[
+				'HTMLSelectElement',
+				'HTMLInputElement',
+				'HTMLTextAreaElement'
+			].forEach((element) => {
+				replacements.push({
+					from: `handleInput(event: InputEvent<${element}>) {`,
+					to:
+						`handleInput(event: InputEvent<${element}>) {\n` +
+						'this._value = (event.target as any).value;'
+				});
+			});
+
 			replaceInFileSync({
 				files: vueFile,
 				processor(input) {

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

@@ -9,7 +9,6 @@ import {
 import { DBCheckboxProps, DBCheckboxState } from './model';
 import { cls, uuid } from '../../utils';
 import {
-	DEFAULT_ID,
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 	DEFAULT_MESSAGE_ID_SUFFIX,
@@ -29,12 +28,11 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 	// jscpd:ignore-start
 	const state = useStore<DBCheckboxState>({
 		initialized: false,
-		_id: DEFAULT_ID,
-		_messageId: DEFAULT_ID + DEFAULT_MESSAGE_ID_SUFFIX,
-		_validMessageId: DEFAULT_ID + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
-		_invalidMessageId: DEFAULT_ID + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
+		_id: 'checkbox-' + uuid(),
+		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
+		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
+		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 		_descByIds: '',
-
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
@@ -44,6 +42,20 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				props.change(event);
 			}
 			handleFrameworkEvent(this, event, 'checked');
+
+			/* For a11y reasons we need to map the correct message with the checkbox */
+			if (!ref?.validity.valid || props.customValidity === 'invalid') {
+				state._descByIds = state._invalidMessageId;
+			} else if (
+				props.customValidity === 'valid' ||
+				(ref?.validity.valid && props.required)
+			) {
+				state._descByIds = state._validMessageId;
+			} else if (props.message) {
+				state._descByIds = state._messageId;
+			} else {
+				state._descByIds = '';
+			}
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onBlur) {
@@ -62,48 +74,30 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			if (props.focus) {
 				props.focus(event);
 			}
-		},
-		getValidMessage: () => {
-			return props.validMessage || DEFAULT_VALID_MESSAGE;
-		},
-		getInvalidMessage: () => {
-			return (
-				props.invalidMessage ||
-				ref?.validationMessage ||
-				DEFAULT_INVALID_MESSAGE
-			);
 		}
 	});
 
 	onMount(() => {
 		state.initialized = true;
-		state._id = props.id || 'checkbox-' + uuid();
+		state._id = props.id || state._id;
 	});
 
 	onUpdate(() => {
-		if (state.initialized && state._id) {
-			state._messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
-			state._validMessageId = state._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
-			state._invalidMessageId =
+		if (state._id) {
+			const messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
+			const validMessageId = state._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+			const invalidMessageId =
 				state._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
-		}
-	}, [state._id, state.initialized]);
+			state._messageId = messageId;
+			state._validMessageId = validMessageId;
+			state._invalidMessageId = invalidMessageId;
 
-	onUpdate(() => {
-		const descByIds = [state._validMessageId, state._invalidMessageId];
-		if (props.message) {
-			descByIds.push(state._messageId);
+			if (props.message) {
+				state._descByIds = messageId;
+			}
 		}
-		state._descByIds = descByIds.join(' ');
-	}, [
-		props.message,
-		state._messageId,
-		state._validMessageId,
-		state._invalidMessageId
-	]);
-	// jscpd:ignore-end
+	}, [state._id]);
 
-	// TODO we have to check how to update on every change..
 	onUpdate(() => {
 		if (state.initialized && document && state._id) {
 			const checkboxElement = document?.getElementById(
@@ -120,9 +114,12 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 					// It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
 					checkboxElement.indeterminate = props.indeterminate;
 				}
+
+				state.initialized = false;
 			}
 		}
 	}, [state.initialized, props.indeterminate, props.checked]);
+	// jscpd:ignore-end
 
 	return (
 		<div
@@ -171,14 +168,16 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				id={state._validMessageId}
 				size="small"
 				semantic="successful">
-				{state.getValidMessage()}
+				{props.validMessage ?? DEFAULT_VALID_MESSAGE}
 			</DBInfotext>
 
 			<DBInfotext
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{state.getInvalidMessage()}
+				{props.invalidMessage ??
+					ref?.validationMessage ??
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);

packages/components/src/components/checkbox/model.ts

@@ -1,16 +1,15 @@
 import {
+	ChangeEventProps,
+	ChangeEventState,
 	FocusEventProps,
 	FocusEventState,
-	ChangeEventState,
-	ChangeEventProps,
-	GlobalProps,
-	GlobalState,
+	FormCheckProps,
+	FormMessageProps,
 	FormProps,
 	FormState,
-	FormCheckProps,
+	GlobalProps,
+	GlobalState,
 	InitializedState,
-	FormMessageProps,
-	FormMessageState,
 	SizeProps
 } from '../../shared/model';
 
@@ -37,5 +36,4 @@ export type DBCheckboxState = DBCheckboxDefaultState &
 	ChangeEventState<HTMLInputElement> &
 	FocusEventState<HTMLInputElement> &
 	FormState &
-	InitializedState &
-	FormMessageState;
+	InitializedState;