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(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();
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')}>
{slots.title ? slots.title() : title}
</Badge>
</a>
</div>
);
};
},

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

@ -41,6 +41,6 @@ export default defineComponent({
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">
Basic Usage
</h3>
<div class="van-sidebar">
<a class="van-sidebar-item van-sidebar-item--select">
<div role="tablist"
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">
Title
</div>
</a>
<a class="van-sidebar-item">
</div>
<div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text">
Title
</div>
</a>
<a class="van-sidebar-item">
</div>
<div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text">
Title
</div>
</a>
</div>
</div>
</div>
</div>
@ -35,30 +49,44 @@ exports[`should render demo and match snapshot 1`] = `
<h3 class="demo-sidebar-title">
Show Badge
</h3>
<div class="van-sidebar">
<a class="van-sidebar-item van-sidebar-item--select">
<div role="tablist"
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">
Title
<div class="van-badge van-badge--dot van-badge--fixed">
</div>
</div>
</a>
<a class="van-sidebar-item">
</div>
<div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text">
Title
<div class="van-badge van-badge--fixed">
5
</div>
</div>
</a>
<a class="van-sidebar-item">
</div>
<div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text">
Title
<div class="van-badge van-badge--fixed">
20
</div>
</div>
</a>
</div>
</div>
</div>
</div>
@ -69,22 +97,35 @@ exports[`should render demo and match snapshot 1`] = `
<h3 class="demo-sidebar-title">
Disabled
</h3>
<div class="van-sidebar">
<a class="van-sidebar-item van-sidebar-item--select">
<div role="tablist"
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">
Title
</div>
</a>
<a class="van-sidebar-item van-sidebar-item--disabled">
</div>
<div role="tab"
class="van-sidebar-item van-sidebar-item--disabled"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text">
Title
</div>
</a>
<a class="van-sidebar-item">
</div>
<div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text">
Title
</div>
</a>
</div>
</div>
</div>
</div>
@ -95,22 +136,36 @@ exports[`should render demo and match snapshot 1`] = `
<h3 class="demo-sidebar-title">
Change Event
</h3>
<div class="van-sidebar">
<a class="van-sidebar-item van-sidebar-item--select">
<div role="tablist"
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">
Title 1
</div>
</a>
<a class="van-sidebar-item">
</div>
<div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text">
Title 2
</div>
</a>
<a class="van-sidebar-item">
</div>
<div role="tab"
class="van-sidebar-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text">
Title 3
</div>
</a>
</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
exports[`should render title slot correctly 1`] = `
<div class="van-sidebar">
<a class="van-sidebar-item van-sidebar-item--select">
<div role="tablist"
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">
Custom Title
</div>
</a>
</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"
style="height: 300px;"
>
<div class="van-sidebar van-tree-select__nav">
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
<div role="tablist"
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">
Group 1
</div>
</a>
<a class="van-sidebar-item van-tree-select__nav-item">
</div>
<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">
Group 2
</div>
</a>
<a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
</div>
<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">
Group 3
</div>
</a>
</div>
</div>
<div class="van-tree-select__content">
<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"
style="height: 300px;"
>
<div class="van-sidebar van-tree-select__nav">
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
<div role="tablist"
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">
Group 1
</div>
</a>
<a class="van-sidebar-item van-tree-select__nav-item">
</div>
<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">
Group 2
</div>
</a>
<a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
</div>
<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">
Group 3
</div>
</a>
</div>
</div>
<div class="van-tree-select__content">
<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"
style="height: 55vw;"
>
<div class="van-sidebar van-tree-select__nav">
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
<div role="tablist"
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">
Group 1
</div>
</a>
<a class="van-sidebar-item van-tree-select__nav-item">
</div>
<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">
Group 2
</div>
</a>
</div>
</div>
<div class="van-tree-select__content">
<div class="van-image">
@ -110,22 +146,32 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tree-select"
style="height: 55vw;"
>
<div class="van-sidebar van-tree-select__nav">
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
<div role="tablist"
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">
Group 1
<div class="van-badge van-badge--dot van-badge--fixed">
</div>
</div>
</a>
<a class="van-sidebar-item van-tree-select__nav-item">
</div>
<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">
Group 2
<div class="van-badge van-badge--fixed">
5
</div>
</div>
</a>
</div>
</div>
<div class="van-tree-select__content">
<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"
style="height: 300px;"
>
<div class="van-sidebar van-tree-select__nav">
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
<div role="tablist"
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">
group1
</div>
</a>
</div>
</div>
<div class="van-tree-select__content">
Custom Content
@ -29,7 +35,9 @@ exports[`should render empty TreeSelect correctly 1`] = `
<div class="van-tree-select"
style="height: 300px;"
>
<div class="van-sidebar van-tree-select__nav">
<div role="tablist"
class="van-sidebar van-tree-select__nav"
>
</div>
<div class="van-tree-select__content">
</div>
@ -40,15 +48,21 @@ exports[`should render nav badge correctly 1`] = `
<div class="van-tree-select"
style="height: 300px;"
>
<div class="van-sidebar van-tree-select__nav">
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
<div role="tablist"
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">
group1
<div class="van-badge van-badge--fixed">
3
</div>
</div>
</a>
</div>
</div>
<div class="van-tree-select__content">
</div>