feat: add aria-* to Spin (ant-design#34408)

* feat: add aria * feat: update other snap * feat: update logic
smwhr · Mar 11, 2022 · e45fa77 · e45fa77
1 parent 662f3ad
commit e45fa77
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 1 deletion.
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -22222,6 +22222,8 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
 
 exports[`ConfigProvider components Spin configProvider 1`] = `
 <div
+  aria-busy="true"
+  aria-live="polite"
   class="config-spin config-spin-spinning"
 >
   <span
@@ -22245,6 +22247,8 @@ exports[`ConfigProvider components Spin configProvider 1`] = `
 
 exports[`ConfigProvider components Spin configProvider componentSize large 1`] = `
 <div
+  aria-busy="true"
+  aria-live="polite"
   class="config-spin config-spin-spinning"
 >
   <span
@@ -22268,6 +22272,8 @@ exports[`ConfigProvider components Spin configProvider componentSize large 1`] =
 
 exports[`ConfigProvider components Spin configProvider componentSize middle 1`] = `
 <div
+  aria-busy="true"
+  aria-live="polite"
   class="config-spin config-spin-spinning"
 >
   <span
@@ -22291,6 +22297,8 @@ exports[`ConfigProvider components Spin configProvider componentSize middle 1`]
 
 exports[`ConfigProvider components Spin configProvider virtual and dropdownMatchSelectWidth 1`] = `
 <div
+  aria-busy="true"
+  aria-live="polite"
   class="ant-spin ant-spin-spinning"
 >
   <span
@@ -22314,6 +22322,8 @@ exports[`ConfigProvider components Spin configProvider virtual and dropdownMatch
 
 exports[`ConfigProvider components Spin normal 1`] = `
 <div
+  aria-busy="true"
+  aria-live="polite"
   class="ant-spin ant-spin-spinning"
 >
   <span
@@ -22337,6 +22347,8 @@ exports[`ConfigProvider components Spin normal 1`] = `
 
 exports[`ConfigProvider components Spin prefixCls 1`] = `
 <div
+  aria-busy="true"
+  aria-live="polite"
   class="prefix-Spin prefix-Spin-spinning"
 >
   <span

diff --git a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1131,6 +1131,8 @@ exports[`renders ./components/list/demo/loadmore.md extend context correctly 1`]
   >
     <div>
       <div
+        aria-busy="true"
+        aria-live="polite"
         class="ant-spin ant-spin-spinning"
       >
         <span

diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap
@@ -1131,6 +1131,8 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
   >
     <div>
       <div
+        aria-busy="true"
+        aria-live="polite"
         class="ant-spin ant-spin-spinning"
       >
         <span

diff --git a/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2,6 +2,8 @@
 
 exports[`renders ./components/spin/demo/basic.md extend context correctly 1`] = `
 <div
+  aria-busy="true"
+  aria-live="polite"
   class="ant-spin ant-spin-spinning"
 >
   <span
@@ -25,6 +27,8 @@ exports[`renders ./components/spin/demo/basic.md extend context correctly 1`] =
 
 exports[`renders ./components/spin/demo/custom-indicator.md extend context correctly 1`] = `
 <div
+  aria-busy="true"
+  aria-live="polite"
   class="ant-spin ant-spin-spinning"
 >
   <span
@@ -106,6 +110,8 @@ exports[`renders ./components/spin/demo/inside.md extend context correctly 1`] =
   class="example"
 >
   <div
+    aria-busy="true"
+    aria-live="polite"
     class="ant-spin ant-spin-spinning"
   >
     <span
@@ -188,6 +194,8 @@ exports[`renders ./components/spin/demo/size.md extend context correctly 1`] = `
     style="margin-right:16px"
   >
     <div
+      aria-busy="true"
+      aria-live="polite"
       class="ant-spin ant-spin-sm ant-spin-spinning"
     >
       <span
@@ -213,6 +221,8 @@ exports[`renders ./components/spin/demo/size.md extend context correctly 1`] = `
     style="margin-right:16px"
   >
     <div
+      aria-busy="true"
+      aria-live="polite"
       class="ant-spin ant-spin-spinning"
     >
       <span
@@ -237,6 +247,8 @@ exports[`renders ./components/spin/demo/size.md extend context correctly 1`] = `
     class="ant-space-item"
   >
     <div
+      aria-busy="true"
+      aria-live="polite"
       class="ant-spin ant-spin-lg ant-spin-spinning"
     >
       <span
@@ -266,6 +278,8 @@ exports[`renders ./components/spin/demo/tip.md extend context correctly 1`] = `
 >
   <div>
     <div
+      aria-busy="true"
+      aria-live="polite"
       class="ant-spin ant-spin-spinning ant-spin-show-text"
     >
       <span

diff --git a/components/spin/__tests__/__snapshots__/demo.test.js.snap b/components/spin/__tests__/__snapshots__/demo.test.js.snap
@@ -2,6 +2,8 @@
 
 exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
 <div
+  aria-busy="true"
+  aria-live="polite"
   class="ant-spin ant-spin-spinning"
 >
   <span
@@ -25,6 +27,8 @@ exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/spin/demo/custom-indicator.md correctly 1`] = `
 <div
+  aria-busy="true"
+  aria-live="polite"
   class="ant-spin ant-spin-spinning"
 >
   <span
@@ -106,6 +110,8 @@ exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
   class="example"
 >
   <div
+    aria-busy="true"
+    aria-live="polite"
     class="ant-spin ant-spin-spinning"
   >
     <span
@@ -188,6 +194,8 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
     style="margin-right:16px"
   >
     <div
+      aria-busy="true"
+      aria-live="polite"
       class="ant-spin ant-spin-sm ant-spin-spinning"
     >
       <span
@@ -213,6 +221,8 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
     style="margin-right:16px"
   >
     <div
+      aria-busy="true"
+      aria-live="polite"
       class="ant-spin ant-spin-spinning"
     >
       <span
@@ -237,6 +247,8 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
     class="ant-space-item"
   >
     <div
+      aria-busy="true"
+      aria-live="polite"
       class="ant-spin ant-spin-lg ant-spin-spinning"
     >
       <span
@@ -266,6 +278,8 @@ exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
 >
   <div>
     <div
+      aria-busy="true"
+      aria-live="polite"
       class="ant-spin ant-spin-spinning ant-spin-show-text"
     >
       <span

diff --git a/components/spin/__tests__/__snapshots__/index.test.js.snap b/components/spin/__tests__/__snapshots__/index.test.js.snap
@@ -8,13 +8,17 @@ exports[`Spin if indicator set null should not be render default indicator 1`] =
   wrapperClassName=""
 >
   <div
+    aria-busy={true}
+    aria-live="polite"
     className="ant-spin ant-spin-spinning"
   />
 </Spin>
 `;
 
 exports[`Spin rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
+  aria-busy="true"
+  aria-live="polite"
   class="ant-spin ant-spin-spinning ant-spin-rtl"
 >
   <span
@@ -38,6 +42,8 @@ exports[`Spin rtl render component should be rendered correctly in RTL direction
 
 exports[`Spin should render custom indicator when it's set 1`] = `
 <div
+  aria-busy="true"
+  aria-live="polite"
   class="ant-spin ant-spin-spinning"
 >
   <div
@@ -53,6 +59,8 @@ exports[`Spin should support static method Spin.setDefaultIndicator 1`] = `
   wrapperClassName=""
 >
   <div
+    aria-busy={true}
+    aria-live="polite"
     className="ant-spin ant-spin-spinning"
   >
     <em

diff --git a/components/spin/index.tsx b/components/spin/index.tsx
@@ -159,7 +159,13 @@ class Spin extends React.Component<SpinProps, SpinState> {
     const divProps = omit(restProps, ['spinning', 'delay', 'indicator']);
 
     const spinElement = (
-      <div {...divProps} style={style} className={spinClassName}>
+      <div
+        {...divProps}
+        style={style}
+        className={spinClassName}
+        aria-live="polite"
+        aria-busy={spinning}
+      >
         {renderIndicator(prefixCls, this.props)}
         {tip ? <div className={`${prefixCls}-text`}>{tip}</div> : null}
       </div>

diff --git a/components/table/__tests__/__snapshots__/empty.test.js.snap b/components/table/__tests__/__snapshots__/empty.test.js.snap
@@ -522,6 +522,8 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
   >
     <div>
       <div
+        aria-busy="true"
+        aria-live="polite"
         class="ant-spin ant-spin-spinning"
       >
         <span
-Original file line number
+Diff line change
@@ Expand Up @@
       >
         <div>
           <div
+            aria-busy="true"
+            aria-live="polite"
             class="ant-spin ant-spin-spinning"
           >
             <span
@@ Expand Down @@