Merge remote-tracking branch 'origin/fix-a11y-form-component-ids' int…

…o fix-a11y-form-component-ids
db-ui · Jul 10, 2024 · 5d94ff2 · 5d94ff2
2 parents 71e30b7 + d6b3354
commit 5d94ff2
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 84 deletions.
diff --git a/packages/components/src/shared/constants.ts b/packages/components/src/shared/constants.ts
@@ -5,7 +5,7 @@ export const DEFAULT_MESSAGE_ID_SUFFIX: string = '-message';
 export const DEFAULT_VALID_MESSAGE_ID_SUFFIX: string = '-valid-message';
 export const DEFAULT_INVALID_MESSAGE_ID_SUFFIX: string = '-invalid-message';
 export const DEFAULT_PLACEHOLDER_ID_SUFFIX: string = '-placeholder';
-export const DEFAULT_DATALIST_ID_SUFFIX: string = '-placeholder';
+export const DEFAULT_DATALIST_ID_SUFFIX: string = '-datalist';
 
 export const DEFAULT_VALID_MESSAGE: string = 'TODO: Add a validMessage';
 export const DEFAULT_INVALID_MESSAGE: string = 'TODO: Add an invalidMessage';

diff --git a/showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.html b/showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.html
@@ -3,20 +3,23 @@
 	[model]="ngModel"
 	[control]="formControl.value"
 >
-	<db-checkbox
-		[checked]="plain"
-		(change)="plain = $event.target.checked"
-		name="checkbox"
-		label="Plain"
-	></db-checkbox>
-	<db-checkbox
-		[(ngModel)]="ngModel"
-		name="checkbox"
-		label="ngModel"
-	></db-checkbox>
-	<db-checkbox
-		[formControl]="formControl"
-		name="checkbox"
-		label="formControl"
-	></db-checkbox>
+	<fieldset>
+		<legend>Different form approaches</legend>
+		<db-checkbox
+		  [checked]="plain"
+		  (change)="plain = $event.target.checked"
+		  name="checkbox"
+		  label="Plain"
+		></db-checkbox>
+		<db-checkbox
+		  [(ngModel)]="ngModel"
+		  name="checkbox"
+		  label="ngModel"
+		></db-checkbox>
+		<db-checkbox
+		  [formControl]="formControl"
+		  name="checkbox"
+		  label="formControl"
+		></db-checkbox>
+	</fieldset>
 </app-form-wrapper>
diff --git a/showcases/angular-showcase/src/app/components/form/inputs/inputs.component.html b/showcases/angular-showcase/src/app/components/form/inputs/inputs.component.html
@@ -3,29 +3,32 @@
 	[model]="ngModel"
 	[control]="formControl.value"
 >
-	<db-input
-		label="Plain"
-		placeholder="Placeholder"
-		message="Description"
-		icon="user"
-		name="input-name"
-		[value]="plain"
-		(change)="plain = $event.target.value"
-	/>
-	<db-input
-		label="ngModel"
-		placeholder="Placeholder"
-		message="Description"
-		icon="user"
-		name="input-name"
-		[(ngModel)]="ngModel"
-	/>
-	<db-input
-		label="formControl"
-		placeholder="Placeholder"
-		message="Description"
-		icon="user"
-		name="input-name"
-		[formControl]="formControl"
-	/>
+	<fieldset>
+		<legend>Different form approaches</legend>
+		<db-input
+			label="Plain"
+			placeholder="Placeholder"
+			message="Description"
+			icon="user"
+			name="input-name"
+			[value]="plain"
+			(change)="plain = $event.target.value"
+		/>
+		<db-input
+			label="ngModel"
+			placeholder="Placeholder"
+			message="Description"
+			icon="user"
+			name="input-name"
+			[(ngModel)]="ngModel"
+		/>
+		<db-input
+			label="formControl"
+			placeholder="Placeholder"
+			message="Description"
+			icon="user"
+			name="input-name"
+			[formControl]="formControl"
+		/>
+	</fieldset>
 </app-form-wrapper>
diff --git a/showcases/angular-showcase/src/app/components/form/selects/selects.component.html b/showcases/angular-showcase/src/app/components/form/selects/selects.component.html
@@ -3,23 +3,26 @@
 	[model]="ngModel"
 	[control]="formControl.value"
 >
-	<db-select
-		label="Plain"
-		[value]="plain"
-		(change)="plain = $event.target.value"
-	>
-		<option value="combobox-0">combobox-0</option>
-		<option value="combobox-1">combobox-1</option>
-		<option value="combobox-2">combobox-2</option>
-	</db-select>
-	<db-select label="ngModel" [(ngModel)]="ngModel">
-		<option value="combobox-0">combobox-0</option>
-		<option value="combobox-1">combobox-1</option>
-		<option value="combobox-2">combobox-2</option>
-	</db-select>
-	<db-select label="formControl" [formControl]="formControl">
-		<option value="combobox-0">combobox-0</option>
-		<option value="combobox-1">combobox-1</option>
-		<option value="combobox-2">combobox-2</option>
-	</db-select>
+	<fieldset>
+		<legend>Different form approaches</legend>
+		<db-select
+			label="Plain"
+			[value]="plain"
+			(change)="plain = $event.target.value"
+		>
+			<option value="combobox-0">combobox-0</option>
+			<option value="combobox-1">combobox-1</option>
+			<option value="combobox-2">combobox-2</option>
+		</db-select>
+		<db-select label="ngModel" [(ngModel)]="ngModel">
+			<option value="combobox-0">combobox-0</option>
+			<option value="combobox-1">combobox-1</option>
+			<option value="combobox-2">combobox-2</option>
+		</db-select>
+		<db-select label="formControl" [formControl]="formControl">
+			<option value="combobox-0">combobox-0</option>
+			<option value="combobox-1">combobox-1</option>
+			<option value="combobox-2">combobox-2</option>
+		</db-select>
+	</fieldset>
 </app-form-wrapper>
diff --git a/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
@@ -3,26 +3,29 @@
 	[model]="ngModel"
 	[control]="formControl.value"
 >
-	<db-textarea
-		label="Plain"
-		placeholder="Placeholder"
-		message="Description"
-		name="input-name"
-		[value]="plain"
-		(change)="plain = $event.target.value"
-	/>
-	<db-textarea
-		label="ngModel"
-		placeholder="Placeholder"
-		message="Description"
-		name="input-name"
-		[(ngModel)]="ngModel"
-	/>
-	<db-textarea
-		label="formControl"
-		placeholder="Placeholder"
-		message="Description"
-		name="input-name"
-		[formControl]="formControl"
-	/>
+	<fieldset>
+		<legend>Different form approaches</legend>
+		<db-textarea
+			label="Plain"
+			placeholder="Placeholder"
+			message="Description"
+			name="textarea-name"
+			[value]="plain"
+			(change)="plain = $event.target.value"
+		/>
+		<db-textarea
+			label="ngModel"
+			placeholder="Placeholder"
+			message="Description"
+			name="textarea-name"
+			[(ngModel)]="ngModel"
+		/>
+		<db-textarea
+			label="formControl"
+			placeholder="Placeholder"
+			message="Description"
+			name="textarea-name"
+			[formControl]="formControl"
+		/>
+	</fieldset>
 </app-form-wrapper>
diff --git a/showcases/vue-showcase/src/components/form/Textareas.vue b/showcases/vue-showcase/src/components/form/Textareas.vue
@@ -23,7 +23,7 @@ const vModel = ref("test2");
 			placeholder="Placeholder"
 			message="Description"
 			icon="user"
-			name="input-name"
+			name="textarea-name"
 			v-model:value="vModel"
 		/>
 	</FormWrapper>