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/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: {},