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(Loading): add aria to improve a11y (#10568)

Browse Source
This commit is contained in:
neverland 2022-04-30 17:47:46 +08:00 committed by GitHub
parent 00bda60102
commit d4799dce54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 105 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/vant/src/button/test/__snapshots__/demo.spec.ts.snap
View File

@ -117,7 +117,10 @@ exports[`should render demo and match snapshot 1`] = `
class="van-button van-button--primary van-button--normal van-button--loading"
>
<div class="van-button__content">
<div class="van-loading van-loading--circular van-button__loading">
<div class="van-loading van-loading--circular van-button__loading"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular">
<svg class="van-loading__circular"
viewbox="25 25 50 50"
@ -137,7 +140,10 @@ exports[`should render demo and match snapshot 1`] = `
class="van-button van-button--primary van-button--normal van-button--loading"
>
<div class="van-button__content">
<div class="van-loading van-loading--spinner van-button__loading">
<div class="van-loading van-loading--spinner van-button__loading"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--spinner">
<i class="van-loading__line van-loading__line--1">
</i>
@ -171,7 +177,10 @@ exports[`should render demo and match snapshot 1`] = `
class="van-button van-button--success van-button--normal van-button--loading"
>
<div class="van-button__content">
<div class="van-loading van-loading--circular van-button__loading">
<div class="van-loading van-loading--circular van-button__loading"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular">
<svg class="van-loading__circular"
viewbox="25 25 50 50"

10
packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap
View File

@ -84,7 +84,10 @@ exports[`zoom in and drag image to move 1`] = `
style="object-fit: contain;"
>
<div class="van-image__loading">
<div class="van-loading van-loading--spinner">
<div class="van-loading van-loading--spinner"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--spinner">
<i class="van-loading__line van-loading__line--1">
</i>
@ -125,7 +128,10 @@ exports[`zoom in and drag image to move 2`] = `
style="object-fit: contain;"
>
<div class="van-image__loading">
<div class="van-loading van-loading--spinner">
<div class="van-loading van-loading--spinner"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--spinner">
<i class="van-loading__line van-loading__line--1">
</i>

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

@ -374,7 +374,10 @@ exports[`should render demo and match snapshot 1`] = `
style="width: 100%; height: 27vw;"
>
<div class="van-image__loading">
<div class="van-loading van-loading--spinner">
<div class="van-loading van-loading--spinner"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--spinner"
style="width: 20px; height: 20px;"
>

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

@ -59,7 +59,10 @@ exports[`should render demo and match snapshot 1`] = `
aria-busy="true"
>
<div class="van-list__loading">
<div class="van-loading van-loading--circular van-list__loading-icon">
<div class="van-loading van-loading--circular van-list__loading-icon"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular">
<svg class="van-loading__circular"
viewbox="25 25 50 50"

6
packages/vant/src/loading/Loading.tsx
View File

@ -62,7 +62,11 @@ export default defineComponent({
return () => {
const { type, vertical } = props;
return (
<div class={bem([type, { vertical }])}>
<div
class={bem([type, { vertical }])}
aria-live="polite"
aria-busy={true}
>
<span class={bem('spinner', type)} style={spinnerStyle.value}>
{type === 'spinner' ? SpinIcon : CircularIcon}
</span>

50
packages/vant/src/loading/test/__snapshots__/demo.spec.ts.snap
View File

@ -2,7 +2,10 @@
exports[`should render demo and match snapshot 1`] = `
<div>
<div class="van-loading van-loading--circular">
<div class="van-loading van-loading--circular"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular">
<svg class="van-loading__circular"
viewbox="25 25 50 50"
@ -16,7 +19,10 @@ exports[`should render demo and match snapshot 1`] = `
</svg>
</span>
</div>
<div class="van-loading van-loading--spinner">
<div class="van-loading van-loading--spinner"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--spinner">
<i class="van-loading__line van-loading__line--1">
</i>
@ -46,7 +52,10 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-loading van-loading--circular">
<div class="van-loading van-loading--circular"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular"
style="color: rgb(25, 137, 250);"
>
@ -62,7 +71,10 @@ exports[`should render demo and match snapshot 1`] = `
</svg>
</span>
</div>
<div class="van-loading van-loading--spinner">
<div class="van-loading van-loading--spinner"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--spinner"
style="color: rgb(25, 137, 250);"
>
@ -94,7 +106,10 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-loading van-loading--circular">
<div class="van-loading van-loading--circular"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular"
style="width: 24px; height: 24px;"
>
@ -110,7 +125,10 @@ exports[`should render demo and match snapshot 1`] = `
</svg>
</span>
</div>
<div class="van-loading van-loading--spinner">
<div class="van-loading van-loading--spinner"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--spinner"
style="width: 24px; height: 24px;"
>
@ -142,7 +160,10 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-loading van-loading--circular">
<div class="van-loading van-loading--circular"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular"
style="width: 24px; height: 24px;"
>
@ -163,7 +184,10 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-loading van-loading--circular van-loading--vertical">
<div class="van-loading van-loading--circular van-loading--vertical"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular"
style="width: 24px; height: 24px;"
>
@ -184,7 +208,10 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-loading van-loading--circular van-loading--vertical">
<div class="van-loading van-loading--circular van-loading--vertical"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular"
style="color: rgb(0, 148, 255); width: 24px; height: 24px;"
>
@ -205,7 +232,10 @@ exports[`should render demo and match snapshot 1`] = `
Loading...
</span>
</div>
<div class="van-loading van-loading--circular van-loading--vertical">
<div class="van-loading van-loading--circular van-loading--vertical"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular"
style="width: 24px; height: 24px;"
>

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

@ -570,7 +570,10 @@ exports[`should render demo and match snapshot 1`] = `
Confirm
</button>
</div>
<div class="van-loading van-loading--circular van-picker__loading">
<div class="van-loading van-loading--circular van-picker__loading"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular">
<svg class="van-loading__circular"
viewbox="25 25 50 50"

10
packages/vant/src/pull-refresh/test/__snapshots__/index.spec.ts.snap
View File

@ -48,7 +48,10 @@ exports[`should render different head content in different pulling status 3`] =
style="transition-duration: 300ms; transform: translate3d(0,50px, 0);"
>
<div class="van-pull-refresh__head">
<div class="van-loading van-loading--circular van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-pull-refresh__loading"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular">
<svg class="van-loading__circular"
viewbox="25 25 50 50"
@ -76,7 +79,10 @@ exports[`should render different head content in different pulling status 4`] =
style="transition-duration: 300ms; transform: translate3d(0,50px, 0);"
>
<div class="van-pull-refresh__head">
<div class="van-loading van-loading--circular van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-pull-refresh__loading"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular">
<svg class="van-loading__circular"
viewbox="25 25 50 50"

5
packages/vant/src/submit-bar/test/__snapshots__/demo.spec.ts.snap
View File

@ -82,7 +82,10 @@ exports[`should render demo and match snapshot 1`] = `
class="van-button van-button--danger van-button--normal van-button--round van-button--loading van-submit-bar__button van-submit-bar__button--danger"
>
<div class="van-button__content">
<div class="van-loading van-loading--circular van-button__loading">
<div class="van-loading van-loading--circular van-button__loading"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular">
<svg class="van-loading__circular"
viewbox="25 25 50 50"

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

@ -27,7 +27,10 @@ exports[`should render demo and match snapshot 1`] = `
aria-checked="true"
>
<div class="van-switch__node">
<div class="van-loading van-loading--circular van-switch__loading">
<div class="van-loading van-loading--circular van-switch__loading"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular">
<svg class="van-loading__circular"
viewbox="25 25 50 50"

10
packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap
View File

@ -1,7 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should apply active color to loading icon 1`] = `
<div class="van-loading van-loading--circular van-switch__loading">
<div class="van-loading van-loading--circular van-switch__loading"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular"
style="color: red;"
>
@ -20,7 +23,10 @@ exports[`should apply active color to loading icon 1`] = `
`;
exports[`should apply inactive color to loading icon 1`] = `
<div class="van-loading van-loading--circular van-switch__loading">
<div class="van-loading van-loading--circular van-switch__loading"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular"
style="color: black;"
>

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

@ -85,7 +85,10 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div class="van-uploader__mask">
<div class="van-loading van-loading--circular van-uploader__loading">
<div class="van-loading van-loading--circular van-uploader__loading"
aria-live="polite"
aria-busy="true"
>
<span class="van-loading__spinner van-loading__spinner--circular">
<svg class="van-loading__circular"
viewbox="25 25 50 50"