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(Tabs): add aria-controls for a11y (#9882)

Browse Source 
* feat(Tabs): add aria-controls for a11y

* test: keep jest snapshot stable
This commit is contained in:
neverland 2021-11-16 21:21:47 +08:00 committed by GitHub
parent ec2ff59270
commit 3a56703cb0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 731 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
View File

@ -62,7 +62,8 @@ exports[`should update tabs when previous tab is clicked 1`] = `
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-cascader__tab"
tabindex="-1"
aria-selected="false"
@ -71,7 +72,8 @@ exports[`should update tabs when previous tab is clicked 1`] = `
Jiangsu
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active van-cascader__tab van-cascader__tab--unselected"
tabindex="0"
aria-selected="true"
@ -92,8 +94,11 @@ exports[`should update tabs when previous tab is clicked 1`] = `
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-0"
style="width: 100px;"
>
<div class="van-tab__pane">
@ -114,8 +119,11 @@ exports[`should update tabs when previous tab is clicked 1`] = `
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper"
id="van-tab"
role="tabpanel"
tabindex="0"
aria-hidden="false"
aria-labelledby="van-tabs-1"
style="width: 100px;"
>
<div class="van-tab__pane">

15
packages/vant/src/composables/use-id.ts Normal file
View File

@ -0,0 +1,15 @@
import { getCurrentInstance } from 'vue';
let current = 0;
export function useId() {
const vm = getCurrentInstance();
const { name = 'unknown' } = vm?.type || {};
// keep jest snapshot stable
if (process.env.NODE_ENV === 'test') {
return name;
}
return `${name}-${++current}`;
}

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

@ -30,19 +30,23 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Available (6)
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Unavailable (2)
@ -55,8 +59,11 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@ -260,8 +267,11 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
</div>
</div>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>
@ -311,19 +321,23 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Available (0)
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Unavailable (0)
@ -336,8 +350,11 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-0"
style="display: none;"
>
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@ -351,8 +368,11 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
</div>
</div>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-1"
style
>
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@ -412,19 +432,23 @@ exports[`should render list-footer slot correctly 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Available (0)
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Unavailable (0)
@ -437,8 +461,11 @@ exports[`should render list-footer slot correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-0"
style="display: none;"
>
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@ -453,8 +480,11 @@ exports[`should render list-footer slot correctly 1`] = `
List Footer
</div>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-1"
style
>
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@ -515,19 +545,23 @@ exports[`should use custom src when using empty-image prop 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Available (0)
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Unavailable (0)
@ -540,8 +574,11 @@ exports[`should use custom src when using empty-image prop 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@ -555,8 +592,11 @@ exports[`should use custom src when using empty-image prop 1`] = `
</div>
</div>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>

27
packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap
View File

@ -18,28 +18,34 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Error
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Network
</span>
</div>
<div role="tab"
<div id="van-tabs-2"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Search
@ -52,8 +58,11 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
<div class="van-empty">
@ -65,13 +74,19 @@ exports[`should render demo and match snapshot 1`] = `
</p>
</div>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
>
</div>

36
packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
View File

@ -9,37 +9,45 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Demo
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Basic
</span>
</div>
<div role="tab"
<div id="van-tabs-2"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Outline
</span>
</div>
<div role="tab"
<div id="van-tabs-3"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Filled
@ -54,8 +62,11 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
<div>
@ -130,18 +141,27 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-3"
style="display: none;"
>
</div>

18
packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap
View File

@ -7,19 +7,23 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Basic Usage
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Custom Index List
@ -32,8 +36,11 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
<div class="van-index-bar">
@ -901,8 +908,11 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>

27
packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
View File

@ -7,28 +7,34 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Basic Usage
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Error Info
</span>
</div>
<div role="tab"
<div id="van-tabs-2"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
PullRefresh
@ -41,8 +47,11 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
<div role="feed"
@ -72,13 +81,19 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
>
</div>

27
packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap
View File

@ -7,28 +7,34 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Basic Usage
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Success Tip
</span>
</div>
<div role="tab"
<div id="van-tabs-2"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Custom Tips
@ -41,8 +47,11 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
<div class="van-pull-refresh">
@ -57,13 +66,19 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
>
</div>

20
packages/vant/src/tab/Tab.tsx
View File

@ -22,6 +22,8 @@ import { TABS_KEY } from '../tabs/Tabs';
// Composables
import { useParent } from '@vant/use';
import { useId } from '../composables/use-id';
import { useExpose } from '../composables/use-expose';
import { routeProps } from '../composables/use-route';
import { TAB_STATUS_KEY } from '../composables/use-tab-status';
@ -49,6 +51,7 @@ export default defineComponent({
props: tabProps,
setup(props, { slots }) {
const id = useId();
const inited = ref(false);
const { parent, index } = useParent(TABS_KEY);
@ -92,6 +95,7 @@ export default defineComponent({
provide(TAB_STATUS_KEY, active);
return () => {
const label = `${parent.id}-${index.value}`;
const { animated, swipeable, scrollspy, lazyRender } = parent.props;
if (!slots.default && !animated) {
@ -103,9 +107,12 @@ export default defineComponent({
if (animated || swipeable) {
return (
<SwipeItem
id={id}
role="tabpanel"
aria-hidden={!active.value}
class={bem('pane-wrapper', { inactive: !active.value })}
tabindex={active.value ? 0 : -1}
aria-hidden={!active.value}
aria-labelledby={label}
>
<div class={bem('pane')}>{slots.default?.()}</div>
</SwipeItem>
@ -115,8 +122,17 @@ export default defineComponent({
const shouldRender = inited.value || scrollspy || !lazyRender;
const Content = shouldRender ? slots.default?.() : null;
useExpose({ id });
return (
<div v-show={show} role="tabpanel" class={bem('pane')}>
<div
v-show={show}
id={id}
role="tabpanel"
class={bem('pane')}
tabindex={show ? 0 : -1}
aria-labelledby={label}
>
{Content}
</div>
);

417
packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
View File

File diff suppressed because it is too large Load Diff

166
packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
View File

@ -2,13 +2,19 @@
exports[`should allow to disable lazy-render prop 1`] = `
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-0"
style="display: none;"
>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>
@ -17,14 +23,20 @@ exports[`should allow to disable lazy-render prop 1`] = `
exports[`should allow to disable lazy-render prop 2`] = `
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
Text
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
Text
@ -39,28 +51,34 @@ exports[`should allow to set name prop 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title1
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title2
</span>
</div>
<div role="tab"
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--disabled"
aria-selected="false"
aria-disabled="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title3
@ -73,19 +91,28 @@ exports[`should allow to set name prop 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
Text
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
>
</div>
@ -103,9 +130,12 @@ DOMWrapper {
"_values": Object {},
},
"wrapperElement": <div
aria-labelledby="van-tabs-0"
class="van-tab__pane"
id="van-tab"
role="tabpanel"
style=""
tabindex="0"
>
Text
@ -120,10 +150,12 @@ exports[`should not render empty tab 1`] = `
`;
exports[`should render badge prop correctly 1`] = `
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<div class="van-badge__wrapper">
<span class="van-tab__text van-tab__text--ellipsis">
@ -142,10 +174,12 @@ exports[`should render nav-left、nav-right slot correctly 1`] = `
aria-orientation="horizontal"
>
Custom nav left
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Title
@ -167,28 +201,34 @@ exports[`should switch tab after click the tab title 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title1
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title2
</span>
</div>
<div role="tab"
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--disabled"
aria-selected="false"
aria-disabled="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title3
@ -201,19 +241,28 @@ exports[`should switch tab after click the tab title 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
Text
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
>
</div>
@ -228,28 +277,34 @@ exports[`should switch tab after click the tab title 2`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title1
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title2
</span>
</div>
<div role="tab"
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--disabled"
aria-selected="false"
aria-disabled="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title3
@ -262,20 +317,29 @@ exports[`should switch tab after click the tab title 2`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-0"
style="display: none;"
>
Text
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-1"
style
>
Text
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
>
</div>
@ -290,7 +354,8 @@ exports[`swipe switch tab after swiping tab content 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
@ -299,7 +364,8 @@ exports[`swipe switch tab after swiping tab content 1`] = `
title1
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
@ -308,7 +374,8 @@ exports[`swipe switch tab after swiping tab content 1`] = `
title2
</span>
</div>
<div role="tab"
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--disabled"
aria-selected="false"
aria-disabled="true"
@ -329,8 +396,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper"
id="van-tab"
role="tabpanel"
tabindex="0"
aria-hidden="false"
aria-labelledby="van-tabs-0"
style="width: 100px;"
>
<div class="van-tab__pane">
@ -338,8 +408,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-1"
style="width: 100px;"
>
<div class="van-tab__pane">
@ -347,8 +420,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-2"
style="width: 100px;"
>
</div>
@ -365,7 +441,8 @@ exports[`swipe switch tab after swiping tab content 2`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
@ -374,7 +451,8 @@ exports[`swipe switch tab after swiping tab content 2`] = `
title1
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
@ -383,7 +461,8 @@ exports[`swipe switch tab after swiping tab content 2`] = `
title2
</span>
</div>
<div role="tab"
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--disabled"
aria-selected="false"
aria-disabled="true"
@ -404,8 +483,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-0"
style="width: 100px;"
>
<div class="van-tab__pane">
@ -413,8 +495,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper"
id="van-tab"
role="tabpanel"
tabindex="0"
aria-hidden="false"
aria-labelledby="van-tabs-1"
style="width: 100px;"
>
<div class="van-tab__pane">
@ -422,8 +507,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-2"
style="width: 100px;"
>
<div class="van-tab__pane">
@ -443,7 +531,8 @@ exports[`swipe switch tab after swiping tab content 3`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
@ -452,7 +541,8 @@ exports[`swipe switch tab after swiping tab content 3`] = `
title1
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
@ -461,7 +551,8 @@ exports[`swipe switch tab after swiping tab content 3`] = `
title2
</span>
</div>
<div role="tab"
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--disabled"
aria-selected="false"
aria-disabled="true"
@ -482,8 +573,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-0"
style="width: 100px;"
>
<div class="van-tab__pane">
@ -491,8 +585,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper"
id="van-tab"
role="tabpanel"
tabindex="0"
aria-hidden="false"
aria-labelledby="van-tabs-1"
style="width: 100px;"
>
<div class="van-tab__pane">
@ -500,8 +597,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-2"
style="width: 100px;"
>
<div class="van-tab__pane">

72
packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
View File

@ -7,28 +7,34 @@ exports[`should render Tab inside a component correctly 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
2
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
1
</span>
</div>
<div role="tab"
<div id="van-tabs-2"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
3
@ -41,19 +47,28 @@ exports[`should render Tab inside a component correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-1"
style
>
1
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-0"
style="display: none;"
>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
>
</div>
@ -68,28 +83,34 @@ exports[`should render correctly after inserting a tab 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
1
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
2
</span>
</div>
<div role="tab"
<div id="van-tabs-2"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
3
@ -102,20 +123,29 @@ exports[`should render correctly after inserting a tab 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-0"
style="display: none;"
>
</div>
<div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-1"
>
2
</div>
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
>
3
@ -131,19 +161,23 @@ exports[`should render correctly after inserting a tab with name 1`] = `
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
<div id="van-tabs-0"
role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
bar
</span>
</div>
<div role="tab"
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
foo
@ -156,14 +190,20 @@ exports[`should render correctly after inserting a tab with name 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="-1"
aria-labelledby="van-tabs-0"
style="display: none;"
>
bar
</div>
<div role="tabpanel"
<div id="van-tab"
role="tabpanel"
class="van-tab__pane"
tabindex="0"
aria-labelledby="van-tabs-1"
style
>
foo

5
packages/vant/src/tabs/Tabs.tsx
View File

@ -44,6 +44,7 @@ import {
useEventListener,
onMountedOrActivated,
} from '@vant/use';
import { useId } from '../composables/use-id';
import { route, RouteProps } from '../composables/use-route';
import { useRefs } from '../composables/use-refs';
import { useExpose } from '../composables/use-expose';
@ -123,6 +124,7 @@ export default defineComponent({
const navRef = ref<HTMLElement>();
const wrapRef = ref<HTMLElement>();
const id = useId();
const scroller = useScrollParent(root);
const [titleRefs, setTitleRefs] = useRefs<ComponentInstance>();
const { children, linkChildren } = useChildren(TABS_KEY);
@ -359,12 +361,14 @@ export default defineComponent({
const renderNav = () =>
children.map((item, index) => (
<TabsTitle
id={`${id}-${index}`}
ref={setTitleRefs(index)}
type={props.type}
color={props.color}
style={item.titleStyle}
class={item.titleClass}
isActive={index === state.currentIndex}
controls={item.id}
scrollable={scrollable.value}
renderTitle={item.$slots.title}
activeColor={props.titleActiveColor}
@ -472,6 +476,7 @@ export default defineComponent({
useEventListener('scroll', onScroll, { target: scroller });
linkChildren({
id,
props,
setLine,
onRendered,

4
packages/vant/src/tabs/TabsTitle.tsx
View File

@ -8,6 +8,7 @@ export default defineComponent({
name,
props: {
id: String,
dot: Boolean,
type: String,
color: String,
@ -15,6 +16,7 @@ export default defineComponent({
badge: numericProp,
isActive: Boolean,
disabled: Boolean,
controls: String,
scrollable: Boolean,
activeColor: String,
renderTitle: Function,
@ -75,6 +77,7 @@ export default defineComponent({
return () => (
<div
id={props.id}
role="tab"
class={[
bem({
@ -86,6 +89,7 @@ export default defineComponent({
tabindex={props.disabled ? undefined : props.isActive ? 0 : -1}
aria-selected={props.isActive}
aria-disabled={props.disabled || undefined}
aria-controls={props.controls}
>
{renderText()}
</div>

1
packages/vant/src/tabs/types.ts
View File

@ -11,6 +11,7 @@ export type TabsClickTabEventParams = {
};
export type TabsProvide = {
id: string;
props: TabsProps;
setLine: () => void;
onRendered: (name: string | number, title?: string) => void;

1
packages/vant/src/vue-tsx-shim.d.ts vendored
View File

@ -4,6 +4,7 @@ type EventHandler = (...args: any[]) => void;
declare module 'vue' {
interface ComponentCustomProps {
id?: string;
role?: string;
tabindex?: number;
onClick?: EventHandler;