fix: accessibility issues for builder's design

web/src/components/FieldInspector.vue

@@ -118,8 +118,8 @@ function onChoice(value: unknown) {
 }
 
 const SWITCH_UI = {
-	root: 'items-start gap-3',
-	wrapper: 'ms-0',
+	root: 'w-full flex-row-reverse items-center justify-between gap-4 border-b border-default py-3',
+	wrapper: 'ms-0 flex min-w-0 flex-col gap-0.5',
 	label: 'font-medium text-highlighted',
 	description: 'mt-0 text-xs/4.5 text-pretty text-muted',
 }
@@ -186,74 +186,36 @@ watch(
 			@update:model-value="emit('type', $event)"
 		/>
 
-		<div class="grid items-start gap-3.5" :class="gridClass">
-			<div class="flex min-w-0 flex-col gap-3.5">
-				<AppSwitch
-					:model-value="field.required"
-					:label="t('Required')"
-					:description="t('An entry can\'t be saved with this field empty.')"
-					:disabled="disabled"
-					:ui="SWITCH_UI"
-					@update:model-value="emit('required', Boolean($event))"
-				/>
-				<AppSwitch
-					:model-value="canUnique && field.unique"
-					:label="t('Unique values')"
-					:description="uniqueHelp"
-					:disabled="disabled || !canUnique"
-					:ui="SWITCH_UI"
-					@update:model-value="emit('unique', Boolean($event))"
-				/>
-				<AppSwitch
-					v-if="type === 'boolean'"
-					:model-value="field.defaultOn"
-					:label="t('On by default')"
-					:description="defaultOnHelp"
-					:disabled="disabled"
-					:ui="SWITCH_UI"
-					@update:model-value="emit('defaultOn', Boolean($event))"
-				/>
-				<DirectoryField
-					v-else
-					:label="t('Default value')"
-					name="default"
-					:error="errors.default"
-					:help="defaultHelp"
-				>
-					<USelect
-						v-if="type === 'select'"
-						:model-value="choiceValue"
-						:items="choiceItems"
-						:placeholder="t('None')"
-						:disabled="disabled || field.unique"
-						class="w-full"
-						:ui="{ base: 'h-11 text-lg md:h-8 md:text-sm' }"
-						@update:model-value="onChoice"
-					/>
-					<UTextarea
-						v-else-if="type === 'richtext'"
-						:model-value="field.defaultValue"
-						:placeholder="t('No default')"
-						:disabled="disabled || field.unique"
-						:rows="3"
-						class="w-full"
-						@update:model-value="emit('default', String($event))"
-					/>
-					<UInput
-						v-else
-						:model-value="field.defaultValue"
-						:type="type === 'number' ? 'number' : type === 'date' ? 'date' : 'text'"
-						:placeholder="t('No default')"
-						:disabled="disabled || field.unique"
-						:color="errors.default ? 'error' : undefined"
-						class="w-full"
-						:ui="{ base: 'h-11 text-lg md:h-8 md:text-sm' }"
-						@update:model-value="emit('default', String($event))"
-					/>
-				</DirectoryField>
-			</div>
+		<div class="flex min-w-0 flex-col border-t border-default">
+			<AppSwitch
+				:model-value="field.required"
+				:label="t('Required')"
+				:description="t('An entry can\'t be saved with this field empty.')"
+				:disabled="disabled"
+				:ui="SWITCH_UI"
+				@update:model-value="emit('required', Boolean($event))"
+			/>
+			<AppSwitch
+				:model-value="canUnique && field.unique"
+				:label="t('Unique values')"
+				:description="uniqueHelp"
+				:disabled="disabled || !canUnique"
+				:ui="SWITCH_UI"
+				@update:model-value="emit('unique', Boolean($event))"
+			/>
+			<AppSwitch
+				v-if="type === 'boolean'"
+				:model-value="field.defaultOn"
+				:label="t('On by default')"
+				:description="defaultOnHelp"
+				:disabled="disabled"
+				:ui="SWITCH_UI"
+				@update:model-value="emit('defaultOn', Boolean($event))"
+			/>
+		</div>
 
-			<div v-if="hasLimits" class="flex min-w-0 flex-col gap-3.5">
+		<div class="grid items-start gap-3.5" :class="gridClass">
+			<template v-if="hasLimits">
 				<DirectoryField :label="limitLabels[0]" name="min" :error="errors.min">
 					<UInput
 						:model-value="field.min"
@@ -291,8 +253,46 @@ watch(
 						</template>
 					</UInput>
 				</DirectoryField>
-			</div>
-			<div v-else class="flex min-w-0 flex-col gap-1.5">
+			</template>
+			<DirectoryField
+				v-if="type !== 'boolean'"
+				:label="t('Default value')"
+				name="default"
+				:error="errors.default"
+				:help="defaultHelp"
+			>
+				<USelect
+					v-if="type === 'select'"
+					:model-value="choiceValue"
+					:items="choiceItems"
+					:placeholder="t('None')"
+					:disabled="disabled || field.unique"
+					class="w-full"
+					:ui="{ base: 'h-11 text-lg md:h-8 md:text-sm' }"
+					@update:model-value="onChoice"
+				/>
+				<UTextarea
+					v-else-if="type === 'richtext'"
+					:model-value="field.defaultValue"
+					:placeholder="t('No default')"
+					:disabled="disabled || field.unique"
+					:rows="3"
+					class="w-full"
+					@update:model-value="emit('default', String($event))"
+				/>
+				<UInput
+					v-else
+					:model-value="field.defaultValue"
+					:type="type === 'number' ? 'number' : type === 'date' ? 'date' : 'text'"
+					:placeholder="t('No default')"
+					:disabled="disabled || field.unique"
+					:color="errors.default ? 'error' : undefined"
+					class="w-full"
+					:ui="{ base: 'h-11 text-lg md:h-8 md:text-sm' }"
+					@update:model-value="emit('default', String($event))"
+				/>
+			</DirectoryField>
+			<div v-if="!hasLimits" class="flex min-w-0 flex-col gap-1.5">
 				<span class="font-medium text-highlighted">{{ t('Limits') }}</span>
 				<span class="text-xs/4.5 text-muted">{{ noLimitsText }}</span>
 			</div>