diff --git a/packages/vant/src/address-edit/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/address-edit/test/__snapshots__/demo.spec.ts.snap index aabd05ff7..9084d62c2 100644 --- a/packages/vant/src/address-edit/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/address-edit/test/__snapshots__/demo.spec.ts.snap @@ -6,30 +6,38 @@ exports[`should render demo and match snapshot 1`] = `
-
-
@@ -39,16 +47,20 @@ exports[`should render demo and match snapshot 1`] = ` tabindex="0" >
-
@@ -57,15 +69,19 @@ exports[`should render demo and match snapshot 1`] = `
-
- @@ -74,15 +90,19 @@ exports[`should render demo and match snapshot 1`] = `
-
diff --git a/packages/vant/src/address-edit/test/__snapshots__/index.spec.js.snap b/packages/vant/src/address-edit/test/__snapshots__/index.spec.js.snap index 279729d12..7c39ce14e 100644 --- a/packages/vant/src/address-edit/test/__snapshots__/index.spec.js.snap +++ b/packages/vant/src/address-edit/test/__snapshots__/index.spec.js.snap @@ -11,30 +11,38 @@ exports[`should render AddressEdit correctly 1`] = `
-
-
@@ -44,16 +52,20 @@ exports[`should render AddressEdit correctly 1`] = ` tabindex="0" >
-
@@ -62,15 +74,19 @@ exports[`should render AddressEdit correctly 1`] = `
-
-
@@ -96,30 +112,38 @@ exports[`should render AddressEdit with props correctly 1`] = `
-
-
@@ -129,16 +153,20 @@ exports[`should render AddressEdit with props correctly 1`] = ` tabindex="0" >
-
@@ -147,15 +175,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
-
-
@@ -163,15 +195,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
-
@@ -209,15 +245,19 @@ exports[`should render AddressEdit with props correctly 1`] = ` exports[`should valid address detail and render error message correctly 1`] = `
-
- @@ -235,16 +275,20 @@ exports[`should valid area code and render error message correctly 1`] = ` tabindex="0" >
-
@@ -259,15 +303,19 @@ exports[`should valid area code and render error message correctly 1`] = ` exports[`should valid name and render error message correctly 1`] = `
-
@@ -280,15 +328,19 @@ exports[`should valid name and render error message correctly 1`] = ` exports[`should valid postal code and render error message correctly 1`] = `
-
@@ -301,15 +353,19 @@ exports[`should valid postal code and render error message correctly 1`] = ` exports[`should valid tel and render error message correctly 1`] = `
-
diff --git a/packages/vant/src/cascader/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/cascader/test/__snapshots__/demo.spec.ts.snap index 5ac3de7b0..3a1cb7bb1 100644 --- a/packages/vant/src/cascader/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/cascader/test/__snapshots__/demo.spec.ts.snap @@ -7,16 +7,20 @@ exports[`should render demo and match snapshot 1`] = ` tabindex="0" >
-
@@ -30,16 +34,20 @@ exports[`should render demo and match snapshot 1`] = ` tabindex="0" >
-
@@ -53,16 +61,20 @@ exports[`should render demo and match snapshot 1`] = ` tabindex="0" >
-
@@ -76,16 +88,20 @@ exports[`should render demo and match snapshot 1`] = ` tabindex="0" >
-
@@ -99,16 +115,20 @@ exports[`should render demo and match snapshot 1`] = ` tabindex="0" >
-
diff --git a/packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap index 3981beb3e..e4325a3ec 100644 --- a/packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap @@ -5,7 +5,9 @@ exports[`should render demo and match snapshot 1`] = `
-
@@ -75,7 +77,9 @@ exports[`should render demo and match snapshot 1`] = `
-
@@ -123,7 +127,9 @@ exports[`should render demo and match snapshot 1`] = `
-
@@ -193,7 +199,9 @@ exports[`should render demo and match snapshot 1`] = `
-
diff --git a/packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap index 435f81e37..51aa33cbc 100644 --- a/packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap @@ -6,30 +6,38 @@ exports[`should render demo and match snapshot 1`] = `
-
-
diff --git a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap index 1e4773214..3482bd566 100644 --- a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap @@ -7,6 +7,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
@@ -298,6 +299,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
@@ -409,6 +411,7 @@ exports[`should render list-footer slot correctly 1`] = `
@@ -522,6 +525,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx index 8f0913ee7..41aa3166a 100644 --- a/packages/vant/src/field/Field.tsx +++ b/packages/vant/src/field/Field.tsx @@ -39,6 +39,7 @@ import { cellSharedProps } from '../cell/Cell'; // Composables import { CUSTOM_FIELD_INJECTION_KEY, useParent } from '@vant/use'; +import { useId } from '../composables/use-id'; import { useExpose } from '../composables/use-expose'; // Components @@ -128,6 +129,7 @@ export default defineComponent({ ], setup(props, { emit, slots }) { + const id = useId(); const state = reactive({ focused: false, validateFailed: false, @@ -376,6 +378,8 @@ export default defineComponent({ emit('keypress', event); }; + const getInputId = () => props.id || `${id}-input`; + const renderInput = () => { const controlClass = bem('control', [ getProp('inputAlign'), @@ -395,7 +399,7 @@ export default defineComponent({ } const inputAttrs = { - id: props.id, + id: getInputId(), ref: inputRef, name: props.name, rows: props.rows !== undefined ? +props.rows : undefined, @@ -406,6 +410,7 @@ export default defineComponent({ autofocus: props.autofocus, placeholder: props.placeholder, autocomplete: props.autocomplete, + 'aria-labelledby': props.label ? `${id}-label` : undefined, onBlur, onFocus, onInput, @@ -491,7 +496,11 @@ export default defineComponent({ return [slots.label(), colon]; } if (props.label) { - return ; + return ( + + ); } }; diff --git a/packages/vant/src/field/README.md b/packages/vant/src/field/README.md index 9f1f96f98..b9c014bdf 100644 --- a/packages/vant/src/field/README.md +++ b/packages/vant/src/field/README.md @@ -250,7 +250,7 @@ Use `input-align` prop to align the input value. | v-model | Input value | _number \| string_ | - | | label | Left side label | _string_ | - | | name | As the identifier when submitting the form | _string_ | - | -| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | - | +| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | `van-field-n-input` | | type | Input type, can be set to `tel` `digit`
`number` `textarea` `password` | _string_ | `text` | | size | Size,can be set to `large` | _string_ | - | | maxlength | Max length of value | _number \| string_ | - | diff --git a/packages/vant/src/field/README.zh-CN.md b/packages/vant/src/field/README.zh-CN.md index e4d3f8f73..16f5a4966 100644 --- a/packages/vant/src/field/README.zh-CN.md +++ b/packages/vant/src/field/README.zh-CN.md @@ -269,7 +269,7 @@ export default { | v-model | 当前输入的值 | _number \| string_ | - | | label | 输入框左侧文本 | _string_ | - | | name | 名称,作为提交表单时的标识符 | _string_ | - | -| id `v3.2.2` | 输入框 id,同时会设置 label 的 for 属性 | _string_ | - | +| id `v3.2.2` | 输入框 id,同时会设置 label 的 for 属性 | _string_ | `van-field-n-input` | | type | 输入框类型, 可选值为 `tel` `digit`
`number` `textarea` `password` 等 | _string_ | `text` | | size | 大小,可选值为 `large` | _string_ | - | | maxlength | 输入的最大字符数 | _number \| string_ | - | diff --git a/packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap index 65b05ab7e..e1ea506fb 100644 --- a/packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap @@ -5,15 +5,19 @@ exports[`should render demo and match snapshot 1`] = `
-
@@ -24,37 +28,47 @@ exports[`should render demo and match snapshot 1`] = `
-
-
-
@@ -62,15 +76,19 @@ exports[`should render demo and match snapshot 1`] = `
-
@@ -78,23 +96,29 @@ exports[`should render demo and match snapshot 1`] = `
-
@@ -105,30 +129,38 @@ exports[`should render demo and match snapshot 1`] = `
-
-
@@ -143,15 +175,19 @@ exports[`should render demo and match snapshot 1`] = `
-
@@ -166,15 +202,19 @@ exports[`should render demo and match snapshot 1`] = `
-
@@ -185,30 +225,38 @@ exports[`should render demo and match snapshot 1`] = `
-
-
@@ -222,15 +270,19 @@ exports[`should render demo and match snapshot 1`] = `
-