ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-17 16:44:21 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(Tabs): add aria-orientation and tabindex for a11y (#9872)

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

* chore: update
This commit is contained in:
neverland
2021-11-16 10:41:44 +08:00
committed by GitHub
parent 6244161d6b
commit baa1b0f074
12 changed files with 130 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -60,9 +60,11 @@ exports[`should update tabs when previous tab is clicked 1`] = `
<div class="van-tabs__wrap van-tabs__wrap--scrollable">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-cascader__tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -71,6 +73,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
</div>
<div role="tab"
class="van-tab van-tab--active van-cascader__tab van-cascader__tab--unselected"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text">

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

@@ -28,9 +28,11 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -39,6 +41,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -304,9 +307,11 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -315,6 +320,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
</div>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -398,9 +404,11 @@ exports[`should render list-footer slot correctly 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -409,6 +417,7 @@ exports[`should render list-footer slot correctly 1`] = `
</div>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -494,9 +503,11 @@ exports[`should use custom src when using empty-image prop 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -505,6 +516,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">

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

@@ -16,9 +16,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -27,6 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -35,6 +38,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">

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

@@ -7,9 +7,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -18,6 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -26,6 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -34,6 +38,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">

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

@@ -5,9 +5,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -16,6 +18,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">

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

@@ -5,9 +5,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -16,6 +18,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -24,6 +27,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">

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

@@ -5,9 +5,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -16,6 +18,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -24,6 +27,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">

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

@@ -6,9 +6,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -17,6 +19,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -25,6 +28,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -33,6 +37,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -75,9 +80,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -86,6 +93,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -94,6 +102,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -131,9 +140,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap van-tabs__wrap--scrollable">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text">
@@ -142,6 +153,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -150,6 +162,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -158,6 +171,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -166,6 +180,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -174,6 +189,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -182,6 +198,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -190,6 +207,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -252,9 +270,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -271,6 +291,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -308,9 +329,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--card"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -319,6 +342,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -327,6 +351,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -360,9 +385,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -371,6 +398,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -405,9 +433,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -416,6 +446,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -424,6 +455,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -432,6 +464,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -476,9 +509,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -489,6 +524,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -523,9 +559,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -534,6 +572,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -542,6 +581,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -550,6 +590,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -607,9 +648,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -618,6 +661,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -626,6 +670,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -634,6 +679,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -693,9 +739,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap van-tabs__wrap--scrollable">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text">
@@ -704,6 +752,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -712,6 +761,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -720,6 +770,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -728,6 +779,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -736,6 +788,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -744,6 +797,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -752,6 +806,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text">
@@ -815,9 +870,11 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -826,6 +883,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -834,6 +892,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -842,6 +901,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">

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

@@ -37,9 +37,11 @@ exports[`should allow to set name prop 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -48,6 +50,7 @@ exports[`should allow to set name prop 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -118,6 +121,7 @@ exports[`should not render empty tab 1`] = `
exports[`should render badge prop correctly 1`] = `
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper">
@@ -134,10 +138,12 @@ exports[`should render nav-left、nav-right slot correctly 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
Custom nav left
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -158,9 +164,11 @@ exports[`should switch tab after click the tab title 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -169,6 +177,7 @@ exports[`should switch tab after click the tab title 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -215,9 +224,11 @@ exports[`should switch tab after click the tab title 2`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -226,6 +237,7 @@ exports[`should switch tab after click the tab title 2`] = `
</div>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -273,9 +285,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -284,6 +298,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -344,9 +359,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -355,6 +372,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
</div>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -418,9 +436,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -429,6 +449,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
</div>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">

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

@@ -5,9 +5,11 @@ exports[`should render Tab inside a component correctly 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -16,6 +18,7 @@ exports[`should render Tab inside a component correctly 1`] = `
</div>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -24,6 +27,7 @@ exports[`should render Tab inside a component correctly 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -62,9 +66,11 @@ exports[`should render correctly after inserting a tab 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -73,6 +79,7 @@ exports[`should render correctly after inserting a tab 1`] = `
</div>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -81,6 +88,7 @@ exports[`should render correctly after inserting a tab 1`] = `
</div>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -121,9 +129,11 @@ exports[`should render correctly after inserting a tab with name 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div role="tab"
class="van-tab"
tabindex="-1"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -132,6 +142,7 @@ exports[`should render correctly after inserting a tab with name 1`] = `
</div>
<div role="tab"
class="van-tab van-tab--active"
tabindex="0"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
@@ -166,6 +177,7 @@ exports[`should render nav-bottom slot correctly 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div class="van-tabs__line">
</div>

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

@@ -395,6 +395,7 @@ export default defineComponent({
role="tablist"
class={bem('nav', [type, { complete: scrollable.value }])}
style={navStyle.value}
aria-orientation="horizontal"
>
{slots['nav-left']?.()}
{renderNav()}

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

@@ -83,6 +83,7 @@ export default defineComponent({
}),
]}
style={style.value}
tabindex={props.disabled ? undefined : props.isActive ? 0 : -1}
aria-selected={props.isActive}
>
{renderText()}