blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Sidebar): add role, aria and tabindex for a11y (#9903)

Browse Source
This commit is contained in:
neverland 2021-11-19 15:16:15 +08:00 committed by GitHub
parent 3885fd00ed
commit b35d295ad7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 192 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/vant/src/sidebar-item/SidebarItem.tsx
View File

@ -57,11 +57,17 @@ export default defineComponent({
const selected = index.value === parent.getActive(); const selected = index.value === parent.getActive();
return ( return (
<a class={bem({ select: selected, disabled })} onClick={onClick}> <div
role="tab"
class={bem({ select: selected, disabled })}
tabindex={disabled ? undefined : 0}
aria-selected={selected}
onClick={onClick}
>
<Badge dot={dot} content={badge} class={bem('text')}> <Badge dot={dot} content={badge} class={bem('text')}>
{slots.title ? slots.title() : title} {slots.title ? slots.title() : title}
</Badge> </Badge>
</a> </div>
); );
}; };
}, },

2
packages/vant/src/sidebar/Sidebar.tsx
View File

@ -41,6 +41,6 @@ export default defineComponent({
setActive, setActive,
}); });
return () => <div class={bem()}>{slots.default?.()}</div>; return () => <div role="tablist" class={bem()}>{slots.default?.()}</div>;
}, },
}); });

111
packages/vant/src/sidebar/test/__snapshots__/demo.spec.ts.snap
View File

@ -9,22 +9,36 @@ exports[`should render demo and match snapshot 1`] = `
<h3 class="demo-sidebar-title"> <h3 class="demo-sidebar-title">
Basic Usage Basic Usage
</h3> </h3>
<div class="van-sidebar"> <div role="tablist"
<a class="van-sidebar-item van-sidebar-item--select"> class="van-sidebar"
>
<div role="tab"
class="van-sidebar-item van-sidebar-item--select"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Title Title
</div> </div>
</a> </div>
<a class="van-sidebar-item"> <div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Title Title
</div> </div>
</a> </div>
<a class="van-sidebar-item"> <div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Title Title
</div> </div>
</a> </div>
</div> </div>
</div> </div>
</div> </div>
@ -35,30 +49,44 @@ exports[`should render demo and match snapshot 1`] = `
<h3 class="demo-sidebar-title"> <h3 class="demo-sidebar-title">
Show Badge Show Badge
</h3> </h3>
<div class="van-sidebar"> <div role="tablist"
<a class="van-sidebar-item van-sidebar-item--select"> class="van-sidebar"
>
<div role="tab"
class="van-sidebar-item van-sidebar-item--select"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Title Title
<div class="van-badge van-badge--dot van-badge--fixed"> <div class="van-badge van-badge--dot van-badge--fixed">
</div> </div>
</div> </div>
</a> </div>
<a class="van-sidebar-item"> <div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Title Title
<div class="van-badge van-badge--fixed"> <div class="van-badge van-badge--fixed">
5 5
</div> </div>
</div> </div>
</a> </div>
<a class="van-sidebar-item"> <div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Title Title
<div class="van-badge van-badge--fixed"> <div class="van-badge van-badge--fixed">
20 20
</div> </div>
</div> </div>
</a> </div>
</div> </div>
</div> </div>
</div> </div>
@ -69,22 +97,35 @@ exports[`should render demo and match snapshot 1`] = `
<h3 class="demo-sidebar-title"> <h3 class="demo-sidebar-title">
Disabled Disabled
</h3> </h3>
<div class="van-sidebar"> <div role="tablist"
<a class="van-sidebar-item van-sidebar-item--select"> class="van-sidebar"
>
<div role="tab"
class="van-sidebar-item van-sidebar-item--select"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Title Title
</div> </div>
</a> </div>
<a class="van-sidebar-item van-sidebar-item--disabled"> <div role="tab"
class="van-sidebar-item van-sidebar-item--disabled"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Title Title
</div> </div>
</a> </div>
<a class="van-sidebar-item"> <div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Title Title
</div> </div>
</a> </div>
</div> </div>
</div> </div>
</div> </div>
@ -95,22 +136,36 @@ exports[`should render demo and match snapshot 1`] = `
<h3 class="demo-sidebar-title"> <h3 class="demo-sidebar-title">
Change Event Change Event
</h3> </h3>
<div class="van-sidebar"> <div role="tablist"
<a class="van-sidebar-item van-sidebar-item--select"> class="van-sidebar"
>
<div role="tab"
class="van-sidebar-item van-sidebar-item--select"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Title 1 Title 1
</div> </div>
</a> </div>
<a class="van-sidebar-item"> <div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Title 2 Title 2
</div> </div>
</a> </div>
<a class="van-sidebar-item"> <div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Title 3 Title 3
</div> </div>
</a> </div>
</div> </div>
</div> </div>
</div> </div>

12
packages/vant/src/sidebar/test/__snapshots__/index.spec.tsx.snap
View File

@ -1,11 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render title slot correctly 1`] = ` exports[`should render title slot correctly 1`] = `
<div class="van-sidebar"> <div role="tablist"
<a class="van-sidebar-item van-sidebar-item--select"> class="van-sidebar"
>
<div role="tab"
class="van-sidebar-item van-sidebar-item--select"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Custom Title Custom Title
</div> </div>
</a> </div>
</div> </div>
`; `;

94
packages/vant/src/tree-select/test/__snapshots__/demo.spec.ts.snap
View File

@ -5,22 +5,35 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tree-select" <div class="van-tree-select"
style="height: 300px;" style="height: 300px;"
> >
<div class="van-sidebar van-tree-select__nav"> <div role="tablist"
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"> class="van-sidebar van-tree-select__nav"
>
<div role="tab"
class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Group 1 Group 1
</div> </div>
</a> </div>
<a class="van-sidebar-item van-tree-select__nav-item"> <div role="tab"
class="van-sidebar-item van-tree-select__nav-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Group 2 Group 2
</div> </div>
</a> </div>
<a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item"> <div role="tab"
class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Group 3 Group 3
</div> </div>
</a> </div>
</div> </div>
<div class="van-tree-select__content"> <div class="van-tree-select__content">
<div class="van-ellipsis van-tree-select__item van-tree-select__item--active"> <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
@ -44,22 +57,35 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tree-select" <div class="van-tree-select"
style="height: 300px;" style="height: 300px;"
> >
<div class="van-sidebar van-tree-select__nav"> <div role="tablist"
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"> class="van-sidebar van-tree-select__nav"
>
<div role="tab"
class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Group 1 Group 1
</div> </div>
</a> </div>
<a class="van-sidebar-item van-tree-select__nav-item"> <div role="tab"
class="van-sidebar-item van-tree-select__nav-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Group 2 Group 2
</div> </div>
</a> </div>
<a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item"> <div role="tab"
class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Group 3 Group 3
</div> </div>
</a> </div>
</div> </div>
<div class="van-tree-select__content"> <div class="van-tree-select__content">
<div class="van-ellipsis van-tree-select__item van-tree-select__item--active"> <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
@ -85,17 +111,27 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tree-select" <div class="van-tree-select"
style="height: 55vw;" style="height: 55vw;"
> >
<div class="van-sidebar van-tree-select__nav"> <div role="tablist"
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"> class="van-sidebar van-tree-select__nav"
>
<div role="tab"
class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Group 1 Group 1
</div> </div>
</a> </div>
<a class="van-sidebar-item van-tree-select__nav-item"> <div role="tab"
class="van-sidebar-item van-tree-select__nav-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Group 2 Group 2
</div> </div>
</a> </div>
</div> </div>
<div class="van-tree-select__content"> <div class="van-tree-select__content">
<div class="van-image"> <div class="van-image">
@ -110,22 +146,32 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tree-select" <div class="van-tree-select"
style="height: 55vw;" style="height: 55vw;"
> >
<div class="van-sidebar van-tree-select__nav"> <div role="tablist"
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"> class="van-sidebar van-tree-select__nav"
>
<div role="tab"
class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Group 1 Group 1
<div class="van-badge van-badge--dot van-badge--fixed"> <div class="van-badge van-badge--dot van-badge--fixed">
</div> </div>
</div> </div>
</a> </div>
<a class="van-sidebar-item van-tree-select__nav-item"> <div role="tab"
class="van-sidebar-item van-tree-select__nav-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
Group 2 Group 2
<div class="van-badge van-badge--fixed"> <div class="van-badge van-badge--fixed">
5 5
</div> </div>
</div> </div>
</a> </div>
</div> </div>
<div class="van-tree-select__content"> <div class="van-tree-select__content">
<div class="van-ellipsis van-tree-select__item van-tree-select__item--active"> <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">

28
packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap
View File

@ -12,12 +12,18 @@ exports[`should render content slot correctly 1`] = `
<div class="van-tree-select" <div class="van-tree-select"
style="height: 300px;" style="height: 300px;"
> >
<div class="van-sidebar van-tree-select__nav"> <div role="tablist"
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"> class="van-sidebar van-tree-select__nav"
>
<div role="tab"
class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
group1 group1
</div> </div>
</a> </div>
</div> </div>
<div class="van-tree-select__content"> <div class="van-tree-select__content">
Custom Content Custom Content
@ -29,7 +35,9 @@ exports[`should render empty TreeSelect correctly 1`] = `
<div class="van-tree-select" <div class="van-tree-select"
style="height: 300px;" style="height: 300px;"
> >
<div class="van-sidebar van-tree-select__nav"> <div role="tablist"
class="van-sidebar van-tree-select__nav"
>
</div> </div>
<div class="van-tree-select__content"> <div class="van-tree-select__content">
</div> </div>
@ -40,15 +48,21 @@ exports[`should render nav badge correctly 1`] = `
<div class="van-tree-select" <div class="van-tree-select"
style="height: 300px;" style="height: 300px;"
> >
<div class="van-sidebar van-tree-select__nav"> <div role="tablist"
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"> class="van-sidebar van-tree-select__nav"
>
<div role="tab"
class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper van-sidebar-item__text"> <div class="van-badge__wrapper van-sidebar-item__text">
group1 group1
<div class="van-badge van-badge--fixed"> <div class="van-badge van-badge--fixed">
3 3
</div> </div>
</div> </div>
</a> </div>
</div> </div>
<div class="van-tree-select__content"> <div class="van-tree-select__content">
</div> </div>