feat(Loading): add aria to improve a11y (#10568)

youzan · Apr 30, 2022 · d4799dc · d4799dc
1 parent 00bda60
commit d4799dc
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 26 deletions.
diff --git a/packages/vant/src/button/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/button/test/__snapshots__/demo.spec.ts.snap
@@ -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"

diff --git a/packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap
@@ -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>

diff --git a/packages/vant/src/image/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/image/test/__snapshots__/demo.spec.ts.snap
@@ -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;"
             >

diff --git a/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
@@ -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"

diff --git a/packages/vant/src/loading/Loading.tsx b/packages/vant/src/loading/Loading.tsx
@@ -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>

diff --git a/packages/vant/src/loading/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/loading/test/__snapshots__/demo.spec.ts.snap
@@ -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;"
     >

diff --git a/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap
@@ -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"

diff --git a/packages/vant/src/pull-refresh/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/pull-refresh/test/__snapshots__/index.spec.ts.snap
@@ -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"

diff --git a/packages/vant/src/submit-bar/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/submit-bar/test/__snapshots__/demo.spec.ts.snap
@@ -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"

diff --git a/packages/vant/src/switch/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/switch/test/__snapshots__/demo.spec.ts.snap
@@ -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"

diff --git a/packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap
@@ -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;"
   >

diff --git a/packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap
@@ -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"