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-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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 130 additions and 0 deletions
Show Stats 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()}