kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: standardize FieldShell accessibility boundary (AEG-V16-017)

Browse Source 
Centralize label, error, help, required, and ARIA relationships across core field wrappers. Preserve WBS evidence and keep the item IN_PROGRESS pending predecessor acceptance evidence.

Evidence: frontend pnpm typecheck; pnpm test (42/42); pnpm build.
This commit is contained in:
김재현
2026-08-08 12:51:51 +09:00
parent 8c777df66b
commit 7304aafc83
16 changed files with 458 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shared/ui/components/FieldShell.vue
+1 -1
View File
@@ -8,7 +8,7 @@ const messageId = computed(() => props.error || props.help ? `${resolvedId.value
<template>
<div class="ks-field-shell" :data-invalid="Boolean(error) || undefined">
<label :for="resolvedId">{{ label }} <span v-if="required" aria-hidden="true">*</span></label>
<slot :input-id="resolvedId" :described-by="messageId" :invalid="Boolean(error)" />
<slot :input-id="resolvedId" :described-by="messageId" :invalid="Boolean(error)" :required="Boolean(required)" />
<small v-if="error || help" :id="messageId" :class="{ 'ks-danger-text': error }" :role="error ? 'alert' : undefined">{{ error ?? help }}</small>
</div>
</template>
frontend/src/shared/ui/components/FieldShell.vue.js
+2 -1
View File
@@ -30,6 +30,7 @@ var __VLS_0 = {
inputId: (__VLS_ctx.resolvedId),
describedBy: (__VLS_ctx.messageId),
invalid: (Boolean(__VLS_ctx.error)),
required: (Boolean(__VLS_ctx.required)),
};
if (__VLS_ctx.error || __VLS_ctx.help) {
__VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
@@ -43,7 +44,7 @@ if (__VLS_ctx.error || __VLS_ctx.help) {
// @ts-ignore
var __VLS_1 = __VLS_0;
// @ts-ignore
[error, error, error, error, error, error, resolvedId, resolvedId, label, required, messageId, messageId, help, help,];
[error, error, error, error, error, error, resolvedId, resolvedId, label, required, required, messageId, messageId, help, help,];
const __VLS_base = (await import('vue')).defineComponent({
__typeProps: {},
});
frontend/src/shared/ui/components/KsDateField.vue
+2 -5
View File
@@ -1,11 +1,8 @@
<script setup lang="ts">
import { computed, useId } from 'vue'
import { useUiAdapter } from '../adapter/useUiAdapter'
import FieldShell from './FieldShell.vue'
const props = defineProps<{ modelValue: string | Date | null; label: string; inputId?: string; disabled?: boolean; required?: boolean; error?: string; help?: string; min?: Date; max?: Date }>()
const emit = defineEmits<{ 'update:modelValue': [value: string | Date | null]; blur: [event: FocusEvent] }>()
const adapter = useUiAdapter()
const generatedId = useId()
const resolvedId = computed(() => props.inputId ?? `ks-date-${generatedId}`)
</script>
<template><div class="ks-field"><label :for="resolvedId">{{ label }} <span v-if="required" aria-hidden="true">*</span></label><component :is="adapter.components.DateField" :input-id="resolvedId" :model-value="modelValue" :disabled="disabled" :invalid="Boolean(error)" :min="min" :max="max" :aria-describedby="error || help ? `${resolvedId}-message` : undefined" @update:model-value="emit('update:modelValue', $event)" @blur="emit('blur', $event)" /><small v-if="error || help" :id="`${resolvedId}-message`" :class="{ 'ks-danger-text': error }">{{ error ?? help }}</small></div></template>
<style scoped>.ks-field{display:grid;gap:var(--ks-space-1)}label{font-weight:650}small{color:var(--ks-color-neutral-600)}</style>
<template><FieldShell :label="label" :input-id="inputId" :required="required" :error="error" :help="help" v-slot="field"><component :is="adapter.components.DateField" :input-id="field.inputId" :model-value="modelValue" :disabled="disabled" :invalid="field.invalid" :min="min" :max="max" :aria-describedby="field.describedBy" :aria-required="field.required || undefined" @update:model-value="emit('update:modelValue', $event)" @blur="emit('blur', $event)" /></FieldShell></template>
frontend/src/shared/ui/components/KsDateField.vue.js
+66 -62
View File
@@ -1,10 +1,8 @@
import { computed, useId } from 'vue';
import { useUiAdapter } from '../adapter/useUiAdapter';
import FieldShell from './FieldShell.vue';
const props = defineProps();
const emit = defineEmits();
const adapter = useUiAdapter();
const generatedId = useId();
const resolvedId = computed(() => props.inputId ?? `ks-date-${generatedId}`);
const __VLS_ctx = {
...{},
...{},
@@ -15,72 +13,78 @@ const __VLS_ctx = {
let __VLS_components;
let __VLS_intrinsics;
let __VLS_directives;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "ks-field" },
});
/** @type {__VLS_StyleScopedClasses['ks-field']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
for: (__VLS_ctx.resolvedId),
});
(__VLS_ctx.label);
if (__VLS_ctx.required) {
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
'aria-hidden': "true",
});
}
const __VLS_0 = (__VLS_ctx.adapter.components.DateField);
const __VLS_0 = FieldShell || FieldShell;
// @ts-ignore
const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (__VLS_ctx.resolvedId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (Boolean(__VLS_ctx.error)),
min: (__VLS_ctx.min),
max: (__VLS_ctx.max),
'aria-describedby': (__VLS_ctx.error || __VLS_ctx.help ? `${__VLS_ctx.resolvedId}-message` : undefined),
label: (__VLS_ctx.label),
inputId: (__VLS_ctx.inputId),
required: (__VLS_ctx.required),
error: (__VLS_ctx.error),
help: (__VLS_ctx.help),
}));
const __VLS_2 = __VLS_1({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (__VLS_ctx.resolvedId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (Boolean(__VLS_ctx.error)),
min: (__VLS_ctx.min),
max: (__VLS_ctx.max),
'aria-describedby': (__VLS_ctx.error || __VLS_ctx.help ? `${__VLS_ctx.resolvedId}-message` : undefined),
label: (__VLS_ctx.label),
inputId: (__VLS_ctx.inputId),
required: (__VLS_ctx.required),
error: (__VLS_ctx.error),
help: (__VLS_ctx.help),
}, ...__VLS_functionalComponentArgsRest(__VLS_1));
let __VLS_5;
const __VLS_6 = {
/** @type {typeof __VLS_5.'update:modelValue'} */
'onUpdate:modelValue': (...[$event]) => {
return (__VLS_ctx.emit('update:modelValue', $event));
// @ts-ignore
[resolvedId, resolvedId, resolvedId, label, required, adapter, modelValue, disabled, error, error, min, max, help, emit,];
},
};
const __VLS_7 = {
/** @type {typeof __VLS_5.blur} */
onBlur: (...[$event]) => {
return (__VLS_ctx.emit('blur', $event));
// @ts-ignore
[emit,];
},
};
var __VLS_3;
var __VLS_4;
if (__VLS_ctx.error || __VLS_ctx.help) {
__VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
id: (`${__VLS_ctx.resolvedId}-message`),
...{ class: ({ 'ks-danger-text': __VLS_ctx.error }) },
});
/** @type {__VLS_StyleScopedClasses['ks-danger-text']} */ ;
(__VLS_ctx.error ?? __VLS_ctx.help);
var __VLS_5;
{
const { default: __VLS_6 } = __VLS_3.slots;
const [field] = __VLS_vSlot(__VLS_6);
const __VLS_7 = (__VLS_ctx.adapter.components.DateField);
// @ts-ignore
const __VLS_8 = __VLS_asFunctionalComponent1(__VLS_7, new __VLS_7({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (field.inputId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (field.invalid),
min: (__VLS_ctx.min),
max: (__VLS_ctx.max),
'aria-describedby': (field.describedBy),
'aria-required': (field.required || undefined),
}));
const __VLS_9 = __VLS_8({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (field.inputId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (field.invalid),
min: (__VLS_ctx.min),
max: (__VLS_ctx.max),
'aria-describedby': (field.describedBy),
'aria-required': (field.required || undefined),
}, ...__VLS_functionalComponentArgsRest(__VLS_8));
let __VLS_12;
const __VLS_13 = {
/** @type {typeof __VLS_12.'update:modelValue'} */
'onUpdate:modelValue': (...[$event]) => {
return (__VLS_ctx.emit('update:modelValue', $event));
// @ts-ignore
[label, inputId, required, error, help, adapter, modelValue, disabled, min, max, emit,];
},
};
const __VLS_14 = {
/** @type {typeof __VLS_12.blur} */
onBlur: (...[$event]) => {
return (__VLS_ctx.emit('blur', $event));
// @ts-ignore
[emit,];
},
};
var __VLS_10;
var __VLS_11;
// @ts-ignore
[];
__VLS_3.slots['' /* empty slot name completion */];
}
var __VLS_3;
// @ts-ignore
[resolvedId, error, error, error, help, help,];
[];
const __VLS_export = (await import('vue')).defineComponent({
__typeEmits: {},
__typeProps: {},
frontend/src/shared/ui/components/KsNumberField.vue
+2 -5
View File
@@ -1,11 +1,8 @@
<script setup lang="ts">
import { computed, useId } from 'vue'
import { useUiAdapter } from '../adapter/useUiAdapter'
import FieldShell from './FieldShell.vue'
const props = defineProps<{ modelValue: number | null; label: string; inputId?: string; disabled?: boolean; required?: boolean; error?: string; help?: string; min?: number; max?: number; minFractionDigits?: number; maxFractionDigits?: number }>()
const emit = defineEmits<{ 'update:modelValue': [value: number | null]; blur: [event: FocusEvent] }>()
const adapter = useUiAdapter()
const generatedId = useId()
const resolvedId = computed(() => props.inputId ?? `ks-number-${generatedId}`)
</script>
<template><div class="ks-field"><label :for="resolvedId">{{ label }} <span v-if="required" aria-hidden="true">*</span></label><component :is="adapter.components.NumberField" :input-id="resolvedId" :model-value="modelValue" :disabled="disabled" :invalid="Boolean(error)" :min="min" :max="max" :min-fraction-digits="minFractionDigits" :max-fraction-digits="maxFractionDigits" :aria-describedby="error || help ? `${resolvedId}-message` : undefined" @update:model-value="emit('update:modelValue', $event)" @blur="emit('blur', $event)" /><small v-if="error || help" :id="`${resolvedId}-message`" :class="{ 'ks-danger-text': error }">{{ error ?? help }}</small></div></template>
<style scoped>.ks-field{display:grid;gap:var(--ks-space-1)}label{font-weight:650}small{color:var(--ks-color-neutral-600)}</style>
<template><FieldShell :label="label" :input-id="inputId" :required="required" :error="error" :help="help" v-slot="field"><component :is="adapter.components.NumberField" :input-id="field.inputId" :model-value="modelValue" :disabled="disabled" :invalid="field.invalid" :min="min" :max="max" :min-fraction-digits="minFractionDigits" :max-fraction-digits="maxFractionDigits" :aria-describedby="field.describedBy" :aria-required="field.required || undefined" @update:model-value="emit('update:modelValue', $event)" @blur="emit('blur', $event)" /></FieldShell></template>
frontend/src/shared/ui/components/KsNumberField.vue.js
+70 -66
View File
@@ -1,10 +1,8 @@
import { computed, useId } from 'vue';
import { useUiAdapter } from '../adapter/useUiAdapter';
import FieldShell from './FieldShell.vue';
const props = defineProps();
const emit = defineEmits();
const adapter = useUiAdapter();
const generatedId = useId();
const resolvedId = computed(() => props.inputId ?? `ks-number-${generatedId}`);
const __VLS_ctx = {
...{},
...{},
@@ -15,76 +13,82 @@ const __VLS_ctx = {
let __VLS_components;
let __VLS_intrinsics;
let __VLS_directives;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "ks-field" },
});
/** @type {__VLS_StyleScopedClasses['ks-field']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
for: (__VLS_ctx.resolvedId),
});
(__VLS_ctx.label);
if (__VLS_ctx.required) {
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
'aria-hidden': "true",
});
}
const __VLS_0 = (__VLS_ctx.adapter.components.NumberField);
const __VLS_0 = FieldShell || FieldShell;
// @ts-ignore
const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (__VLS_ctx.resolvedId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (Boolean(__VLS_ctx.error)),
min: (__VLS_ctx.min),
max: (__VLS_ctx.max),
minFractionDigits: (__VLS_ctx.minFractionDigits),
maxFractionDigits: (__VLS_ctx.maxFractionDigits),
'aria-describedby': (__VLS_ctx.error || __VLS_ctx.help ? `${__VLS_ctx.resolvedId}-message` : undefined),
label: (__VLS_ctx.label),
inputId: (__VLS_ctx.inputId),
required: (__VLS_ctx.required),
error: (__VLS_ctx.error),
help: (__VLS_ctx.help),
}));
const __VLS_2 = __VLS_1({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (__VLS_ctx.resolvedId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (Boolean(__VLS_ctx.error)),
min: (__VLS_ctx.min),
max: (__VLS_ctx.max),
minFractionDigits: (__VLS_ctx.minFractionDigits),
maxFractionDigits: (__VLS_ctx.maxFractionDigits),
'aria-describedby': (__VLS_ctx.error || __VLS_ctx.help ? `${__VLS_ctx.resolvedId}-message` : undefined),
label: (__VLS_ctx.label),
inputId: (__VLS_ctx.inputId),
required: (__VLS_ctx.required),
error: (__VLS_ctx.error),
help: (__VLS_ctx.help),
}, ...__VLS_functionalComponentArgsRest(__VLS_1));
let __VLS_5;
const __VLS_6 = {
/** @type {typeof __VLS_5.'update:modelValue'} */
'onUpdate:modelValue': (...[$event]) => {
return (__VLS_ctx.emit('update:modelValue', $event));
// @ts-ignore
[resolvedId, resolvedId, resolvedId, label, required, adapter, modelValue, disabled, error, error, min, max, minFractionDigits, maxFractionDigits, help, emit,];
},
};
const __VLS_7 = {
/** @type {typeof __VLS_5.blur} */
onBlur: (...[$event]) => {
return (__VLS_ctx.emit('blur', $event));
// @ts-ignore
[emit,];
},
};
var __VLS_3;
var __VLS_4;
if (__VLS_ctx.error || __VLS_ctx.help) {
__VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
id: (`${__VLS_ctx.resolvedId}-message`),
...{ class: ({ 'ks-danger-text': __VLS_ctx.error }) },
});
/** @type {__VLS_StyleScopedClasses['ks-danger-text']} */ ;
(__VLS_ctx.error ?? __VLS_ctx.help);
var __VLS_5;
{
const { default: __VLS_6 } = __VLS_3.slots;
const [field] = __VLS_vSlot(__VLS_6);
const __VLS_7 = (__VLS_ctx.adapter.components.NumberField);
// @ts-ignore
const __VLS_8 = __VLS_asFunctionalComponent1(__VLS_7, new __VLS_7({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (field.inputId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (field.invalid),
min: (__VLS_ctx.min),
max: (__VLS_ctx.max),
minFractionDigits: (__VLS_ctx.minFractionDigits),
maxFractionDigits: (__VLS_ctx.maxFractionDigits),
'aria-describedby': (field.describedBy),
'aria-required': (field.required || undefined),
}));
const __VLS_9 = __VLS_8({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (field.inputId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (field.invalid),
min: (__VLS_ctx.min),
max: (__VLS_ctx.max),
minFractionDigits: (__VLS_ctx.minFractionDigits),
maxFractionDigits: (__VLS_ctx.maxFractionDigits),
'aria-describedby': (field.describedBy),
'aria-required': (field.required || undefined),
}, ...__VLS_functionalComponentArgsRest(__VLS_8));
let __VLS_12;
const __VLS_13 = {
/** @type {typeof __VLS_12.'update:modelValue'} */
'onUpdate:modelValue': (...[$event]) => {
return (__VLS_ctx.emit('update:modelValue', $event));
// @ts-ignore
[label, inputId, required, error, help, adapter, modelValue, disabled, min, max, minFractionDigits, maxFractionDigits, emit,];
},
};
const __VLS_14 = {
/** @type {typeof __VLS_12.blur} */
onBlur: (...[$event]) => {
return (__VLS_ctx.emit('blur', $event));
// @ts-ignore
[emit,];
},
};
var __VLS_10;
var __VLS_11;
// @ts-ignore
[];
__VLS_3.slots['' /* empty slot name completion */];
}
var __VLS_3;
// @ts-ignore
[resolvedId, error, error, error, help, help,];
[];
const __VLS_export = (await import('vue')).defineComponent({
__typeEmits: {},
__typeProps: {},
frontend/src/shared/ui/components/KsSelect.vue
+4 -9
View File
@@ -1,18 +1,13 @@
<script setup lang="ts">
import { computed, useId } from 'vue'
import type { UiSelectOption } from '../adapter/contracts'
import { useUiAdapter } from '../adapter/useUiAdapter'
import FieldShell from './FieldShell.vue'
const props = defineProps<{ modelValue: unknown; label: string; options: UiSelectOption[]; inputId?: string; disabled?: boolean; required?: boolean; error?: string; help?: string; placeholder?: string }>()
const emit = defineEmits<{ 'update:modelValue': [value: unknown]; blur: [event: FocusEvent] }>()
const adapter = useUiAdapter()
const generatedId = useId()
const resolvedId = computed(() => props.inputId ?? `ks-select-${generatedId}`)
</script>
<template>
<div class="ks-field">
<label :for="resolvedId">{{ label }} <span v-if="required" aria-hidden="true">*</span></label>
<component :is="adapter.components.Select" :input-id="resolvedId" :model-value="modelValue" :options="options" :disabled="disabled" :invalid="Boolean(error)" :placeholder="placeholder" @update:model-value="emit('update:modelValue', $event)" @blur="emit('blur', $event)" />
<small v-if="error || help" :class="{ 'ks-danger-text': error }">{{ error ?? help }}</small>
</div>
<FieldShell :label="label" :input-id="inputId" :required="required" :error="error" :help="help" v-slot="field">
<component :is="adapter.components.Select" :input-id="field.inputId" :model-value="modelValue" :options="options" :disabled="disabled" :invalid="field.invalid" :placeholder="placeholder" :aria-describedby="field.describedBy" :aria-required="field.required || undefined" @update:model-value="emit('update:modelValue', $event)" @blur="emit('blur', $event)" />
</FieldShell>
</template>
<style scoped>.ks-field { display: grid; gap: var(--ks-space-1); } label { font-weight: 650; } small { color: var(--ks-color-neutral-600); }</style>
frontend/src/shared/ui/components/KsSelect.vue.js
+66 -59
View File
@@ -1,10 +1,8 @@
import { computed, useId } from 'vue';
import { useUiAdapter } from '../adapter/useUiAdapter';
import FieldShell from './FieldShell.vue';
const props = defineProps();
const emit = defineEmits();
const adapter = useUiAdapter();
const generatedId = useId();
const resolvedId = computed(() => props.inputId ?? `ks-select-${generatedId}`);
const __VLS_ctx = {
...{},
...{},
@@ -15,69 +13,78 @@ const __VLS_ctx = {
let __VLS_components;
let __VLS_intrinsics;
let __VLS_directives;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "ks-field" },
});
/** @type {__VLS_StyleScopedClasses['ks-field']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
for: (__VLS_ctx.resolvedId),
});
(__VLS_ctx.label);
if (__VLS_ctx.required) {
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
'aria-hidden': "true",
});
}
const __VLS_0 = (__VLS_ctx.adapter.components.Select);
const __VLS_0 = FieldShell || FieldShell;
// @ts-ignore
const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (__VLS_ctx.resolvedId),
modelValue: (__VLS_ctx.modelValue),
options: (__VLS_ctx.options),
disabled: (__VLS_ctx.disabled),
invalid: (Boolean(__VLS_ctx.error)),
placeholder: (__VLS_ctx.placeholder),
label: (__VLS_ctx.label),
inputId: (__VLS_ctx.inputId),
required: (__VLS_ctx.required),
error: (__VLS_ctx.error),
help: (__VLS_ctx.help),
}));
const __VLS_2 = __VLS_1({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (__VLS_ctx.resolvedId),
modelValue: (__VLS_ctx.modelValue),
options: (__VLS_ctx.options),
disabled: (__VLS_ctx.disabled),
invalid: (Boolean(__VLS_ctx.error)),
placeholder: (__VLS_ctx.placeholder),
label: (__VLS_ctx.label),
inputId: (__VLS_ctx.inputId),
required: (__VLS_ctx.required),
error: (__VLS_ctx.error),
help: (__VLS_ctx.help),
}, ...__VLS_functionalComponentArgsRest(__VLS_1));
let __VLS_5;
const __VLS_6 = {
/** @type {typeof __VLS_5.'update:modelValue'} */
'onUpdate:modelValue': (...[$event]) => {
return (__VLS_ctx.emit('update:modelValue', $event));
// @ts-ignore
[resolvedId, resolvedId, label, required, adapter, modelValue, options, disabled, error, placeholder, emit,];
},
};
const __VLS_7 = {
/** @type {typeof __VLS_5.blur} */
onBlur: (...[$event]) => {
return (__VLS_ctx.emit('blur', $event));
// @ts-ignore
[emit,];
},
};
var __VLS_3;
var __VLS_4;
if (__VLS_ctx.error || __VLS_ctx.help) {
__VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
...{ class: ({ 'ks-danger-text': __VLS_ctx.error }) },
});
/** @type {__VLS_StyleScopedClasses['ks-danger-text']} */ ;
(__VLS_ctx.error ?? __VLS_ctx.help);
var __VLS_5;
{
const { default: __VLS_6 } = __VLS_3.slots;
const [field] = __VLS_vSlot(__VLS_6);
const __VLS_7 = (__VLS_ctx.adapter.components.Select);
// @ts-ignore
const __VLS_8 = __VLS_asFunctionalComponent1(__VLS_7, new __VLS_7({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (field.inputId),
modelValue: (__VLS_ctx.modelValue),
options: (__VLS_ctx.options),
disabled: (__VLS_ctx.disabled),
invalid: (field.invalid),
placeholder: (__VLS_ctx.placeholder),
'aria-describedby': (field.describedBy),
'aria-required': (field.required || undefined),
}));
const __VLS_9 = __VLS_8({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (field.inputId),
modelValue: (__VLS_ctx.modelValue),
options: (__VLS_ctx.options),
disabled: (__VLS_ctx.disabled),
invalid: (field.invalid),
placeholder: (__VLS_ctx.placeholder),
'aria-describedby': (field.describedBy),
'aria-required': (field.required || undefined),
}, ...__VLS_functionalComponentArgsRest(__VLS_8));
let __VLS_12;
const __VLS_13 = {
/** @type {typeof __VLS_12.'update:modelValue'} */
'onUpdate:modelValue': (...[$event]) => {
return (__VLS_ctx.emit('update:modelValue', $event));
// @ts-ignore
[label, inputId, required, error, help, adapter, modelValue, options, disabled, placeholder, emit,];
},
};
const __VLS_14 = {
/** @type {typeof __VLS_12.blur} */
onBlur: (...[$event]) => {
return (__VLS_ctx.emit('blur', $event));
// @ts-ignore
[emit,];
},
};
var __VLS_10;
var __VLS_11;
// @ts-ignore
[];
__VLS_3.slots['' /* empty slot name completion */];
}
var __VLS_3;
// @ts-ignore
[error, error, error, help, help,];
[];
const __VLS_export = (await import('vue')).defineComponent({
__typeEmits: {},
__typeProps: {},
frontend/src/shared/ui/components/KsTextArea.vue
+4 -9
View File
@@ -1,17 +1,12 @@
<script setup lang="ts">
import { computed, useId } from 'vue'
import { useUiAdapter } from '../adapter/useUiAdapter'
import FieldShell from './FieldShell.vue'
const props = defineProps<{ modelValue: string; label: string; inputId?: string; disabled?: boolean; required?: boolean; error?: string; help?: string; rows?: number; placeholder?: string }>()
const emit = defineEmits<{ 'update:modelValue': [value: string]; blur: [event: FocusEvent] }>()
const adapter = useUiAdapter()
const generatedId = useId()
const resolvedId = computed(() => props.inputId ?? `ks-area-${generatedId}`)
</script>
<template>
<div class="ks-field">
<label :for="resolvedId">{{ label }} <span v-if="required" aria-hidden="true">*</span></label>
<component :is="adapter.components.TextArea" :input-id="resolvedId" :model-value="modelValue" :disabled="disabled" :invalid="Boolean(error)" :rows="rows" :placeholder="placeholder" @update:model-value="emit('update:modelValue', $event)" @blur="emit('blur', $event)" />
<small v-if="error || help" :class="{ 'ks-danger-text': error }">{{ error ?? help }}</small>
</div>
<FieldShell :label="label" :input-id="inputId" :required="required" :error="error" :help="help" v-slot="field">
<component :is="adapter.components.TextArea" :input-id="field.inputId" :model-value="modelValue" :disabled="disabled" :invalid="field.invalid" :rows="rows" :placeholder="placeholder" :aria-describedby="field.describedBy" :aria-required="field.required || undefined" @update:model-value="emit('update:modelValue', $event)" @blur="emit('blur', $event)" />
</FieldShell>
</template>
<style scoped>.ks-field { display: grid; gap: var(--ks-space-1); } label { font-weight: 650; } small { color: var(--ks-color-neutral-600); }</style>
frontend/src/shared/ui/components/KsTextArea.vue.js
+66 -59
View File
@@ -1,10 +1,8 @@
import { computed, useId } from 'vue';
import { useUiAdapter } from '../adapter/useUiAdapter';
import FieldShell from './FieldShell.vue';
const props = defineProps();
const emit = defineEmits();
const adapter = useUiAdapter();
const generatedId = useId();
const resolvedId = computed(() => props.inputId ?? `ks-area-${generatedId}`);
const __VLS_ctx = {
...{},
...{},
@@ -15,69 +13,78 @@ const __VLS_ctx = {
let __VLS_components;
let __VLS_intrinsics;
let __VLS_directives;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "ks-field" },
});
/** @type {__VLS_StyleScopedClasses['ks-field']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
for: (__VLS_ctx.resolvedId),
});
(__VLS_ctx.label);
if (__VLS_ctx.required) {
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
'aria-hidden': "true",
});
}
const __VLS_0 = (__VLS_ctx.adapter.components.TextArea);
const __VLS_0 = FieldShell || FieldShell;
// @ts-ignore
const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (__VLS_ctx.resolvedId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (Boolean(__VLS_ctx.error)),
rows: (__VLS_ctx.rows),
placeholder: (__VLS_ctx.placeholder),
label: (__VLS_ctx.label),
inputId: (__VLS_ctx.inputId),
required: (__VLS_ctx.required),
error: (__VLS_ctx.error),
help: (__VLS_ctx.help),
}));
const __VLS_2 = __VLS_1({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (__VLS_ctx.resolvedId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (Boolean(__VLS_ctx.error)),
rows: (__VLS_ctx.rows),
placeholder: (__VLS_ctx.placeholder),
label: (__VLS_ctx.label),
inputId: (__VLS_ctx.inputId),
required: (__VLS_ctx.required),
error: (__VLS_ctx.error),
help: (__VLS_ctx.help),
}, ...__VLS_functionalComponentArgsRest(__VLS_1));
let __VLS_5;
const __VLS_6 = {
/** @type {typeof __VLS_5.'update:modelValue'} */
'onUpdate:modelValue': (...[$event]) => {
return (__VLS_ctx.emit('update:modelValue', $event));
// @ts-ignore
[resolvedId, resolvedId, label, required, adapter, modelValue, disabled, error, rows, placeholder, emit,];
},
};
const __VLS_7 = {
/** @type {typeof __VLS_5.blur} */
onBlur: (...[$event]) => {
return (__VLS_ctx.emit('blur', $event));
// @ts-ignore
[emit,];
},
};
var __VLS_3;
var __VLS_4;
if (__VLS_ctx.error || __VLS_ctx.help) {
__VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
...{ class: ({ 'ks-danger-text': __VLS_ctx.error }) },
});
/** @type {__VLS_StyleScopedClasses['ks-danger-text']} */ ;
(__VLS_ctx.error ?? __VLS_ctx.help);
var __VLS_5;
{
const { default: __VLS_6 } = __VLS_3.slots;
const [field] = __VLS_vSlot(__VLS_6);
const __VLS_7 = (__VLS_ctx.adapter.components.TextArea);
// @ts-ignore
const __VLS_8 = __VLS_asFunctionalComponent1(__VLS_7, new __VLS_7({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (field.inputId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (field.invalid),
rows: (__VLS_ctx.rows),
placeholder: (__VLS_ctx.placeholder),
'aria-describedby': (field.describedBy),
'aria-required': (field.required || undefined),
}));
const __VLS_9 = __VLS_8({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (field.inputId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (field.invalid),
rows: (__VLS_ctx.rows),
placeholder: (__VLS_ctx.placeholder),
'aria-describedby': (field.describedBy),
'aria-required': (field.required || undefined),
}, ...__VLS_functionalComponentArgsRest(__VLS_8));
let __VLS_12;
const __VLS_13 = {
/** @type {typeof __VLS_12.'update:modelValue'} */
'onUpdate:modelValue': (...[$event]) => {
return (__VLS_ctx.emit('update:modelValue', $event));
// @ts-ignore
[label, inputId, required, error, help, adapter, modelValue, disabled, rows, placeholder, emit,];
},
};
const __VLS_14 = {
/** @type {typeof __VLS_12.blur} */
onBlur: (...[$event]) => {
return (__VLS_ctx.emit('blur', $event));
// @ts-ignore
[emit,];
},
};
var __VLS_10;
var __VLS_11;
// @ts-ignore
[];
__VLS_3.slots['' /* empty slot name completion */];
}
var __VLS_3;
// @ts-ignore
[error, error, error, help, help,];
[];
const __VLS_export = (await import('vue')).defineComponent({
__typeEmits: {},
__typeProps: {},
frontend/src/shared/ui/components/KsTextField.vue
+7 -16
View File
@@ -1,34 +1,25 @@
<script setup lang="ts">
import { computed, useId } from 'vue'
import { useUiAdapter } from '../adapter/useUiAdapter'
import FieldShell from './FieldShell.vue'
const props = defineProps<{ modelValue: string; label: string; inputId?: string; disabled?: boolean; required?: boolean; error?: string; help?: string; placeholder?: string }>()
const emit = defineEmits<{ 'update:modelValue': [value: string]; blur: [event: FocusEvent] }>()
const adapter = useUiAdapter()
const generatedId = useId()
const resolvedId = computed(() => props.inputId ?? `ks-field-${generatedId}`)
</script>
<template>
<div class="ks-field">
<label :for="resolvedId">{{ label }} <span v-if="required" aria-hidden="true">*</span></label>
<FieldShell :label="label" :input-id="inputId" :required="required" :error="error" :help="help" v-slot="field">
<component
:is="adapter.components.TextField"
:input-id="resolvedId"
:input-id="field.inputId"
:model-value="modelValue"
:disabled="disabled"
:invalid="Boolean(error)"
:invalid="field.invalid"
:placeholder="placeholder"
:aria-describedby="error || help ? `${resolvedId}-message` : undefined"
:aria-describedby="field.describedBy"
:aria-required="field.required || undefined"
@update:model-value="emit('update:modelValue', $event)"
@blur="emit('blur', $event)"
/>
<small v-if="error || help" :id="`${resolvedId}-message`" :class="{ 'ks-danger-text': error }">{{ error ?? help }}</small>
</div>
</FieldShell>
</template>
<style scoped>
.ks-field { display: grid; gap: var(--ks-space-1); }
label { font-weight: 650; }
small { color: var(--ks-color-neutral-600); }
</style>
frontend/src/shared/ui/components/KsTextField.vue.js
+64 -60
View File
@@ -1,10 +1,8 @@
import { computed, useId } from 'vue';
import { useUiAdapter } from '../adapter/useUiAdapter';
import FieldShell from './FieldShell.vue';
const props = defineProps();
const emit = defineEmits();
const adapter = useUiAdapter();
const generatedId = useId();
const resolvedId = computed(() => props.inputId ?? `ks-field-${generatedId}`);
const __VLS_ctx = {
...{},
...{},
@@ -15,70 +13,76 @@ const __VLS_ctx = {
let __VLS_components;
let __VLS_intrinsics;
let __VLS_directives;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "ks-field" },
});
/** @type {__VLS_StyleScopedClasses['ks-field']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
for: (__VLS_ctx.resolvedId),
});
(__VLS_ctx.label);
if (__VLS_ctx.required) {
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
'aria-hidden': "true",
});
}
const __VLS_0 = (__VLS_ctx.adapter.components.TextField);
const __VLS_0 = FieldShell || FieldShell;
// @ts-ignore
const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (__VLS_ctx.resolvedId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (Boolean(__VLS_ctx.error)),
placeholder: (__VLS_ctx.placeholder),
'aria-describedby': (__VLS_ctx.error || __VLS_ctx.help ? `${__VLS_ctx.resolvedId}-message` : undefined),
label: (__VLS_ctx.label),
inputId: (__VLS_ctx.inputId),
required: (__VLS_ctx.required),
error: (__VLS_ctx.error),
help: (__VLS_ctx.help),
}));
const __VLS_2 = __VLS_1({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (__VLS_ctx.resolvedId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (Boolean(__VLS_ctx.error)),
placeholder: (__VLS_ctx.placeholder),
'aria-describedby': (__VLS_ctx.error || __VLS_ctx.help ? `${__VLS_ctx.resolvedId}-message` : undefined),
label: (__VLS_ctx.label),
inputId: (__VLS_ctx.inputId),
required: (__VLS_ctx.required),
error: (__VLS_ctx.error),
help: (__VLS_ctx.help),
}, ...__VLS_functionalComponentArgsRest(__VLS_1));
let __VLS_5;
const __VLS_6 = {
/** @type {typeof __VLS_5.'update:modelValue'} */
'onUpdate:modelValue': (...[$event]) => {
return (__VLS_ctx.emit('update:modelValue', $event));
// @ts-ignore
[resolvedId, resolvedId, resolvedId, label, required, adapter, modelValue, disabled, error, error, placeholder, help, emit,];
},
};
const __VLS_7 = {
/** @type {typeof __VLS_5.blur} */
onBlur: (...[$event]) => {
return (__VLS_ctx.emit('blur', $event));
// @ts-ignore
[emit,];
},
};
var __VLS_3;
var __VLS_4;
if (__VLS_ctx.error || __VLS_ctx.help) {
__VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
id: (`${__VLS_ctx.resolvedId}-message`),
...{ class: ({ 'ks-danger-text': __VLS_ctx.error }) },
});
/** @type {__VLS_StyleScopedClasses['ks-danger-text']} */ ;
(__VLS_ctx.error ?? __VLS_ctx.help);
var __VLS_5;
{
const { default: __VLS_6 } = __VLS_3.slots;
const [field] = __VLS_vSlot(__VLS_6);
const __VLS_7 = (__VLS_ctx.adapter.components.TextField);
// @ts-ignore
const __VLS_8 = __VLS_asFunctionalComponent1(__VLS_7, new __VLS_7({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (field.inputId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (field.invalid),
placeholder: (__VLS_ctx.placeholder),
'aria-describedby': (field.describedBy),
'aria-required': (field.required || undefined),
}));
const __VLS_9 = __VLS_8({
...{ 'onUpdate:modelValue': {} },
...{ 'onBlur': {} },
inputId: (field.inputId),
modelValue: (__VLS_ctx.modelValue),
disabled: (__VLS_ctx.disabled),
invalid: (field.invalid),
placeholder: (__VLS_ctx.placeholder),
'aria-describedby': (field.describedBy),
'aria-required': (field.required || undefined),
}, ...__VLS_functionalComponentArgsRest(__VLS_8));
let __VLS_12;
const __VLS_13 = {
/** @type {typeof __VLS_12.'update:modelValue'} */
'onUpdate:modelValue': (...[$event]) => {
return (__VLS_ctx.emit('update:modelValue', $event));
// @ts-ignore
[label, inputId, required, error, help, adapter, modelValue, disabled, placeholder, emit,];
},
};
const __VLS_14 = {
/** @type {typeof __VLS_12.blur} */
onBlur: (...[$event]) => {
return (__VLS_ctx.emit('blur', $event));
// @ts-ignore
[emit,];
},
};
var __VLS_10;
var __VLS_11;
// @ts-ignore
[];
__VLS_3.slots['' /* empty slot name completion */];
}
var __VLS_3;
// @ts-ignore
[resolvedId, error, error, error, help, help,];
[];
const __VLS_export = (await import('vue')).defineComponent({
__typeEmits: {},
__typeProps: {},
frontend/src/shared/ui/components/tests/FieldShell.spec.js
+36
View File
@@ -0,0 +1,36 @@
import { h } from 'vue';
import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import FieldShell from '../FieldShell.vue';
describe('FieldShell', () => {
it('connects label, required state, invalid state, and error to the control', () => {
const wrapper = mount(FieldShell, {
props: { label: 'Customer name', inputId: 'customer-name', required: true, error: 'Required field' },
slots: {
default: ({ inputId, describedBy, invalid, required }) => h('input', {
id: inputId,
'aria-describedby': describedBy,
'aria-invalid': invalid,
'aria-required': required
})
}
});
expect(wrapper.get('label').attributes('for')).toBe('customer-name');
expect(wrapper.get('input').attributes()).toMatchObject({
id: 'customer-name',
'aria-describedby': 'customer-name-message',
'aria-invalid': 'true',
'aria-required': 'true'
});
expect(wrapper.get('[role="alert"]').attributes('id')).toBe('customer-name-message');
expect(wrapper.text()).toContain('Required field');
});
it('uses help text without announcing it as an error', () => {
const wrapper = mount(FieldShell, {
props: { label: 'Settlement date', inputId: 'settlement-date', help: 'Use the market calendar date.' },
slots: { default: ({ inputId, describedBy }) => h('input', { id: inputId, 'aria-describedby': describedBy }) }
});
expect(wrapper.get('small').attributes()).toMatchObject({ id: 'settlement-date-message' });
expect(wrapper.find('[role="alert"]').exists()).toBe(false);
});
});
frontend/src/shared/ui/components/tests/FieldShell.spec.ts
+40
View File
@@ -0,0 +1,40 @@
import { h } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import FieldShell from '../FieldShell.vue'
describe('FieldShell', () => {
it('connects label, required state, invalid state, and error to the control', () => {
const wrapper = mount(FieldShell, {
props: { label: 'Customer name', inputId: 'customer-name', required: true, error: 'Required field' },
slots: {
default: ({ inputId, describedBy, invalid, required }) => h('input', {
id: inputId,
'aria-describedby': describedBy,
'aria-invalid': invalid,
'aria-required': required
})
}
})
expect(wrapper.get('label').attributes('for')).toBe('customer-name')
expect(wrapper.get('input').attributes()).toMatchObject({
id: 'customer-name',
'aria-describedby': 'customer-name-message',
'aria-invalid': 'true',
'aria-required': 'true'
})
expect(wrapper.get('[role="alert"]').attributes('id')).toBe('customer-name-message')
expect(wrapper.text()).toContain('Required field')
})
it('uses help text without announcing it as an error', () => {
const wrapper = mount(FieldShell, {
props: { label: 'Settlement date', inputId: 'settlement-date', help: 'Use the market calendar date.' },
slots: { default: ({ inputId, describedBy }) => h('input', { id: inputId, 'aria-describedby': describedBy }) }
})
expect(wrapper.get('small').attributes()).toMatchObject({ id: 'settlement-date-message' })
expect(wrapper.find('[role="alert"]').exists()).toBe(false)
})
})