blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(Field): add aria-labelledby for a11y (#9883)

Browse Source 
* feat(Field): add aria-labelledby for a11y

* fix: improve labelledby

* docs: update
This commit is contained in:
neverland 2021-11-16 21:53:58 +08:00 committed by GitHub
parent 3a56703cb0
commit c1bdba5213
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 388 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/vant/src/address-edit/test/__snapshots__/demo.spec.ts.snap
View File

@ -6,30 +6,38 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-address-edit__fields">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Name
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Name"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Phone
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
id="van-field-input"
class="van-field__control"
placeholder="Phone"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -39,16 +47,20 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Area
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
readonly
placeholder="Area"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -57,15 +69,19 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell van-field van-address-edit-detail">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Address
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<textarea rows="1"
<textarea id="van-field-input"
rows="1"
class="van-field__control"
placeholder="Address"
aria-labelledby="van-field-label"
style="height: auto;"
>
</textarea>
@ -74,15 +90,19 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Postal
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
id="van-field-input"
class="van-field__control"
placeholder="Postal"
aria-labelledby="van-field-label"
>
</div>
</div>

90
packages/vant/src/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -11,30 +11,38 @@ exports[`should render AddressEdit correctly 1`] = `
<div class="van-address-edit__fields">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Name
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Name"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Phone
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
id="van-field-input"
class="van-field__control"
placeholder="Phone"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -44,16 +52,20 @@ exports[`should render AddressEdit correctly 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Area
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
readonly
placeholder="Area"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -62,15 +74,19 @@ exports[`should render AddressEdit correctly 1`] = `
</div>
<div class="van-cell van-field van-address-edit-detail">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Address
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<textarea rows="1"
<textarea id="van-field-input"
rows="1"
class="van-field__control"
placeholder="Address"
aria-labelledby="van-field-label"
>
</textarea>
</div>
@ -96,30 +112,38 @@ exports[`should render AddressEdit with props correctly 1`] = `
<div class="van-address-edit__fields">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Name
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Name"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Phone
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
id="van-field-input"
class="van-field__control"
placeholder="Phone"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -129,16 +153,20 @@ exports[`should render AddressEdit with props correctly 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Area
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
readonly
placeholder="Area"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -147,15 +175,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
</div>
<div class="van-cell van-field van-address-edit-detail">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Address
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<textarea rows="1"
<textarea id="van-field-input"
rows="1"
class="van-field__control"
placeholder="Address"
aria-labelledby="van-field-label"
>
</textarea>
</div>
@ -163,15 +195,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Postal
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
id="van-field-input"
class="van-field__control"
placeholder="Postal"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -209,15 +245,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
exports[`should valid address detail and render error message correctly 1`] = `
<div class="van-cell van-field van-address-edit-detail">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Address
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<textarea rows="1"
<textarea id="van-field-input"
rows="1"
class="van-field__control"
placeholder="Address"
aria-labelledby="van-field-label"
style="height: auto;"
>
</textarea>
@ -235,16 +275,20 @@ exports[`should valid area code and render error message correctly 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Area
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
readonly
placeholder="Area"
aria-labelledby="van-field-label"
>
</div>
<div class="van-field__error-message">
@ -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`] = `
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Name
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Name"
aria-labelledby="van-field-label"
>
</div>
<div class="van-field__error-message">
@ -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`] = `
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Postal
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
id="van-field-input"
class="van-field__control"
placeholder="Postal"
aria-labelledby="van-field-label"
>
</div>
<div class="van-field__error-message">
@ -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`] = `
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Phone
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
id="van-field-input"
class="van-field__control"
placeholder="Phone"
aria-labelledby="van-field-label"
>
</div>
<div class="van-field__error-message">

30
packages/vant/src/cascader/test/__snapshots__/demo.spec.ts.snap
View File

@ -7,16 +7,20 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Area
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
readonly
placeholder="Select Area"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -30,16 +34,20 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Area
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
readonly
placeholder="Select Area"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -53,16 +61,20 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Area
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
readonly
placeholder="Select Area"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -76,16 +88,20 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Area
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
readonly
placeholder="Select Area"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -99,16 +115,20 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Area
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
readonly
placeholder="Select Area"
aria-labelledby="van-field-label"
>
</div>
</div>

16
packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap
View File

@ -5,7 +5,9 @@ exports[`should render demo and match snapshot 1`] = `
<form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Rate
</label>
</div>
@ -75,7 +77,9 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Slider
</label>
</div>
@ -123,7 +127,9 @@ exports[`should render demo and match snapshot 1`] = `
<form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Rate
</label>
</div>
@ -193,7 +199,9 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Slider
</label>
</div>

12
packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap
View File

@ -6,30 +6,38 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-contact-edit__fields">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Name
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Name"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Phone
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
id="van-field-input"
class="van-field__control"
placeholder="Phone"
aria-labelledby="van-field-label"
>
</div>
</div>

4
packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
View File

@ -7,6 +7,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Coupon code"
>
@ -298,6 +299,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Coupon code"
>
@ -409,6 +411,7 @@ exports[`should render list-footer slot correctly 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Coupon code"
>
@ -522,6 +525,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Coupon code"
>

13
packages/vant/src/field/Field.tsx
View File

@ -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 <label for={props.id}>{props.label + colon}</label>;
return (
<label id={`${id}-label`} for={getInputId()}>
{props.label + colon}
</label>
);
}
};

2
packages/vant/src/field/README.md
View File

@ -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`<br>`number` `textarea` `password` | _string_ | `text` |
| size | Size，can be set to `large` | _string_ | - |
| maxlength | Max length of value | _number \| string_ | - |

2
packages/vant/src/field/README.zh-CN.md
View File

@ -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`<br>`number` `textarea` `password` 等 | _string_ | `text` |
| size | 大小，可选值为 `large` | _string_ | - |
| maxlength | 输入的最大字符数 | _number \| string_ | - |

107
packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap
View File

@ -5,15 +5,19 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Label
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Text"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -24,37 +28,47 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Text
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Text"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Phone
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
id="van-field-input"
class="van-field__control"
placeholder="Phone"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Digit
</label>
</div>
@ -62,15 +76,19 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-field__body">
<input type="tel"
inputmode="numeric"
id="van-field-input"
class="van-field__control"
placeholder="Digit"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Number
</label>
</div>
@ -78,23 +96,29 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-field__body">
<input type="text"
inputmode="decimal"
id="van-field-input"
class="van-field__control"
placeholder="Number"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Password
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="password"
id="van-field-input"
class="van-field__control"
placeholder="Password"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -105,30 +129,38 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Text
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
readonly
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field van-field--disabled">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Text
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
disabled
aria-labelledby="van-field-label"
>
</div>
</div>
@ -143,15 +175,19 @@ exports[`should render demo and match snapshot 1`] = `
</i>
</div>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Text
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Show Icon"
aria-labelledby="van-field-label"
>
<div class="van-field__right-icon">
<i class="van-badge__wrapper van-icon van-icon-warning-o">
@ -166,15 +202,19 @@ exports[`should render demo and match snapshot 1`] = `
</i>
</div>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Text
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Show Clear Icon"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -185,30 +225,38 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field van-field--error">
<div class="van-cell__title van-field__label van-field__label--required">
<label>
<label id="van-field-label"
for="van-field-input"
>
Username
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control van-field__control--error"
placeholder="Username"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label van-field__label--required">
<label>
<label id="van-field-label"
for="van-field-input"
>
Phone
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Phone"
aria-labelledby="van-field-label"
>
</div>
<div class="van-field__error-message">
@ -222,15 +270,19 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-cell--center van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
SMS
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="SMS"
aria-labelledby="van-field-label"
>
<div class="van-field__button">
<button type="button"
@ -252,30 +304,38 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Text
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Format On Change"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Text
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
placeholder="Format On Blur"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -287,7 +347,8 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<textarea rows="1"
<textarea id="van-field-input"
rows="1"
class="van-field__control"
placeholder="Message"
style="height: auto;"
@ -302,15 +363,19 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Message
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<textarea rows="2"
<textarea id="van-field-input"
rows="2"
class="van-field__control"
placeholder="Message"
aria-labelledby="van-field-label"
style="height: auto;"
>
</textarea>
@ -329,15 +394,19 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Text
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control van-field__control--right"
placeholder="Input Align Right"
aria-labelledby="van-field-label"
>
</div>
</div>

11
packages/vant/src/field/test/__snapshots__/index.spec.js.snap
View File

@ -7,7 +7,9 @@ exports[`should change clear icon when using clear-icon prop 1`] = `
exports[`should render colon when using colon prop 1`] = `
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
foo:
</label>
</div>
@ -24,6 +26,7 @@ exports[`should render extra slot correctly 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
>
</div>
@ -48,7 +51,8 @@ exports[`should render textarea when type is textarea 1`] = `
<div class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<textarea class="van-field__control"
<textarea id="van-field-input"
class="van-field__control"
style="height: auto;"
>
</textarea>
@ -62,6 +66,7 @@ exports[`should render word limit correctly 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
>
</div>
@ -80,6 +85,7 @@ exports[`should render word limit correctly when modelValue is null 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
>
</div>
@ -98,6 +104,7 @@ exports[`should render word limit correctly when modelValue is undefined 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
>
</div>

92
packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
View File

@ -6,32 +6,40 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Username
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="username"
class="van-field__control"
placeholder="Username"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Password
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="password"
id="van-field-input"
name="password"
class="van-field__control"
placeholder="Password"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -55,64 +63,80 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Label
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="pattern"
class="van-field__control"
placeholder="Use pattern"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Label
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="validator"
class="van-field__control"
placeholder="Use validator"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Label
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="validatorMessage"
class="van-field__control"
placeholder="Use validator to return message"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Label
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="asyncValidator"
class="van-field__control"
placeholder="Use async validator"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -136,7 +160,9 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Switch
</label>
</div>
@ -157,7 +183,9 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Checkbox
</label>
</div>
@ -180,7 +208,9 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Checkbox Group
</label>
</div>
@ -221,7 +251,9 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Radio
</label>
</div>
@ -264,7 +296,9 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Stepper
</label>
</div>
@ -298,7 +332,9 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Rate
</label>
</div>
@ -368,7 +404,9 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Slider
</label>
</div>
@ -398,7 +436,9 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Uploader
</label>
</div>
@ -442,17 +482,21 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Picker
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="picker"
class="van-field__control"
readonly
placeholder="Select city"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -464,17 +508,21 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Datetime Picker
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="datetimePicker"
class="van-field__control"
readonly
placeholder="Select time"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -486,17 +534,21 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Area Picker
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="area"
class="van-field__control"
readonly
placeholder="Select area"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -508,17 +560,21 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Calendar
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="calendar"
class="van-field__control"
readonly
placeholder="Select date"
aria-labelledby="van-field-label"
>
</div>
</div>

2
packages/vant/src/form/test/__snapshots__/events.spec.tsx.snap
View File

@ -6,6 +6,7 @@ exports[`should emit failed event when validating failed 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="A"
class="van-field__control"
>
@ -19,6 +20,7 @@ exports[`should emit failed event when validating failed 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="B"
class="van-field__control"
>

35
packages/vant/src/form/test/__snapshots__/props.spec.tsx.snap
View File

@ -4,14 +4,18 @@ exports[`should render colon when using colon prop 1`] = `
<form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Label:
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -23,6 +27,7 @@ exports[`should render colon when using colon prop 1`] = `
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
>
</div>
@ -37,6 +42,7 @@ exports[`should render error-message-align prop correctly 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
>
</div>
@ -54,6 +60,7 @@ exports[`should render input-align prop correctly 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control van-field__control--right"
>
</div>
@ -76,28 +83,36 @@ exports[`should render label-align prop correctly 1`] = `
<form class="van-form">
<div class="van-cell van-field van-field--label-right">
<div class="van-cell__title van-field__label van-field__label--right">
<label>
<label id="van-field-label"
for="van-field-input"
>
Label
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
aria-labelledby="van-field-label"
>
</div>
</div>
</div>
<div class="van-cell van-field van-field--label-center">
<div class="van-cell__title van-field__label van-field__label--center">
<label>
<label id="van-field-label"
for="van-field-input"
>
Label
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -111,14 +126,18 @@ exports[`should render label-width prop correctly 1`] = `
<div class="van-cell__title van-field__label"
style="width: 5rem;"
>
<label>
<label id="van-field-label"
for="van-field-input"
>
Label
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -127,14 +146,18 @@ exports[`should render label-width prop correctly 1`] = `
<div class="van-cell__title van-field__label"
style="width: 10vw;"
>
<label>
<label id="van-field-label"
for="van-field-input"
>
Label
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
aria-labelledby="van-field-label"
>
</div>
</div>
@ -148,6 +171,7 @@ exports[`should validate first field when using validate-first prop 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="A"
class="van-field__control"
>
@ -161,6 +185,7 @@ exports[`should validate first field when using validate-first prop 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="B"
class="van-field__control"
>

6
packages/vant/src/number-keyboard/test/__snapshots__/demo.spec.ts.snap
View File

@ -79,16 +79,20 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Bind Value
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
readonly
placeholder="Click To Input"
aria-labelledby="van-field-label"
>
</div>
</div>

6
packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap
View File

@ -679,16 +679,20 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
City
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
class="van-field__control"
readonly
placeholder="Choose City"
aria-labelledby="van-field-label"
>
</div>
</div>

6
packages/vant/src/popover/test/__snapshots__/demo.spec.ts.snap
View File

@ -31,16 +31,20 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-cell__title van-field__label">
<label>
<label id="van-field-label"
for="van-field-input"
>
Placement
</label>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="picker"
class="van-field__control"
readonly
aria-labelledby="van-field-label"
>
</div>
</div>

6
packages/vant/src/search/test/__snapshots__/demo.spec.ts.snap
View File

@ -12,6 +12,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
class="van-field__control"
placeholder="Placeholder"
>
@ -33,6 +34,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
class="van-field__control"
placeholder="Placeholder"
>
@ -60,6 +62,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
class="van-field__control van-field__control--center"
placeholder="Placeholder"
>
@ -80,6 +83,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
class="van-field__control"
disabled
placeholder="Placeholder"
@ -103,6 +107,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
class="van-field__control"
placeholder="Placeholder"
>
@ -126,6 +131,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
class="van-field__control"
placeholder="Placeholder"
>

1
packages/vant/src/search/test/__snapshots__/index.spec.ts.snap
View File

@ -34,6 +34,7 @@ exports[`should render left slot correctly 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
class="van-field__control"
>
</div>