From c30d1b191f77ec72483e8ad3beddf2564340661d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=90=E4=BB=AA?= <linya.qu@alipay.com>
Date: Sun, 28 May 2017 14:20:59 +0800
Subject: [PATCH 1/5] add Avatar

---
 .../__snapshots__/index.test.js.snap          |   1 +
 .../__tests__/__snapshots__/demo.test.js.snap | 146 ++++++++++++++++++
 components/avatar/__tests__/demo.test.js      |   3 +
 components/avatar/demo/basic.md               |  33 ++++
 components/avatar/demo/type.md                |  32 ++++
 components/avatar/index.en-US.md              |  19 +++
 components/avatar/index.tsx                   |  73 +++++++++
 components/avatar/index.zh-CN.md              |  19 +++
 components/avatar/style/index.less            |  45 ++++++
 components/avatar/style/index.tsx             |   2 +
 components/index.tsx                          |   2 +
 components/style/themes/default.less          |  11 ++
 tests/__snapshots__/index.test.js.snap        |   1 +
 13 files changed, 387 insertions(+)
 create mode 100644 components/avatar/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/avatar/__tests__/demo.test.js
 create mode 100644 components/avatar/demo/basic.md
 create mode 100644 components/avatar/demo/type.md
 create mode 100644 components/avatar/index.en-US.md
 create mode 100644 components/avatar/index.tsx
 create mode 100644 components/avatar/index.zh-CN.md
 create mode 100644 components/avatar/style/index.less
 create mode 100644 components/avatar/style/index.tsx

diff --git a/components/__tests__/__snapshots__/index.test.js.snap b/components/__tests__/__snapshots__/index.test.js.snap
index e2261c093..2e507f928 100644
--- a/components/__tests__/__snapshots__/index.test.js.snap
+++ b/components/__tests__/__snapshots__/index.test.js.snap
@@ -6,6 +6,7 @@ Array [
   "Anchor",
   "AutoComplete",
   "Alert",
+  "Avatar",
   "BackTop",
   "Badge",
   "Breadcrumb",
diff --git a/components/avatar/__tests__/__snapshots__/demo.test.js.snap b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..ea7abaaf2
--- /dev/null
+++ b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="ant-row"
+  >
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-row"
+  >
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-square ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
+<div>
+  <div
+    class="ant-row"
+  >
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+      >
+        U
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-image"
+      >
+        <img
+          src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"
+        />
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-row"
+  >
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+        style="color:#f56a00;background-color:#fde3cf;"
+      >
+        U
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+        style="background-color:#87d068;"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/avatar/__tests__/demo.test.js b/components/avatar/__tests__/demo.test.js
new file mode 100644
index 000000000..bb02eea33
--- /dev/null
+++ b/components/avatar/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('avatar');
diff --git a/components/avatar/demo/basic.md b/components/avatar/demo/basic.md
new file mode 100644
index 000000000..d67a9ac36
--- /dev/null
+++ b/components/avatar/demo/basic.md
@@ -0,0 +1,33 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+头像有三种尺寸，两种形状可选。
+
+## en-US
+
+Three sizes and two shapes are available.
+
+````jsx
+import { Avatar, Row, Col } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Row>
+      <Col span={4}><Avatar size="large" icon="user" /></Col>
+      <Col span={4}><Avatar icon="user" /></Col>
+      <Col span={4}><Avatar size="small" icon="user" /></Col>
+    </Row>
+    <Row>
+      <Col span={4}><Avatar shape="square" size="large" icon="user" /></Col>
+      <Col span={4}><Avatar shape="square" icon="user" /></Col>
+      <Col span={4}><Avatar shape="square" size="small" icon="user" /></Col>
+    </Row>
+  </div>
+, mountNode);
+````
diff --git a/components/avatar/demo/type.md b/components/avatar/demo/type.md
new file mode 100644
index 000000000..b85627339
--- /dev/null
+++ b/components/avatar/demo/type.md
@@ -0,0 +1,32 @@
+---
+order: 1
+title:
+  zh-CN: 类型
+  en-US: Type
+---
+
+## zh-CN
+
+支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。
+
+## en-US
+
+Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.
+
+````jsx
+import { Avatar, Row, Col } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Row>
+      <Col span={4}><Avatar icon="user" /></Col>
+      <Col span={4}><Avatar>U</Avatar></Col>
+      <Col span={4}><Avatar src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" /></Col>
+    </Row>
+    <Row>
+      <Col span={4}><Avatar backgroundColor="#fde3cf" color="#f56a00">U</Avatar></Col>
+      <Col span={4}><Avatar backgroundColor="#87d068" icon="user" /></Col>
+    </Row>
+  </div>
+, mountNode);
+````
diff --git a/components/avatar/index.en-US.md b/components/avatar/index.en-US.md
new file mode 100644
index 000000000..2204c4ab4
--- /dev/null
+++ b/components/avatar/index.en-US.md
@@ -0,0 +1,19 @@
+---
+category: Components
+type: Data Display
+title: Avatar
+---
+
+Avatars can be used to represent people or object, which supports image, antd-Icon, or letter. 
+
+## API
+
+| Property   | Description                                               | Type       | Default |
+|----------- |---------------------------------------------------------  | ---------- |-------|
+| type       | to set the shape of avatar | Enum{ 'circle', 'square' } | `circle` |
+| size   | to set the size of avatar | Enum{ 'large', 'small', 'default' } | `default` |
+| src  | the address of a image avatar | string | - |
+| icon    | the icon type of a icon avatar, see `Icon` Component | string | - |
+| color | to set the color of the icon or letter in avatar | string | - |
+| backgroundColor    | to set the background color of the icon or letter in avatar  | string | - |
+
diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx
new file mode 100644
index 000000000..8de4ccce7
--- /dev/null
+++ b/components/avatar/index.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import Icon from '../icon';
+import classNames from 'classnames';
+
+export interface AvatarProps {
+  /** Shape of avatar, options:`circle`, `square` */
+  shape?: 'circle' | 'square';
+  /** Size of avatar, options:`large`, `small`, `default` */
+  size?: 'large' | 'small' | 'default';
+  /** Src of image avatar */
+  src?: string;
+  /** Type of the Icon to be used in avatar */
+  icon?: string;
+  /** The icon or letter's color */
+  color?: string;
+  /** The backgroundColor of the avatar. Does not apply to image avatars */
+  backgroundColor?: string;
+  style?: React.CSSProperties;
+  prefixCls?: string;
+  className?: string;
+  children?: any;
+}
+
+export default (props: AvatarProps) => {
+  const {
+    prefixCls = 'ant-avatar', shape = 'circle', size = 'default', src,
+    icon, color, backgroundColor, className, ...others,
+  } = props;
+
+  let sizeCls = '';
+  switch (size) {
+    case 'large':
+      sizeCls = 'lg';
+      break;
+    case 'small':
+      sizeCls = 'sm';
+      break;
+    default:
+      sizeCls = '';
+      break;
+  }
+
+  const classString = classNames(prefixCls, className, {
+    [`${prefixCls}-${sizeCls}`]: sizeCls,
+    [`${prefixCls}-${shape}`]: shape,
+    [`${prefixCls}-image`]: src,
+    [`${prefixCls}-icon`]: icon,
+  });
+
+  let children = props.children;
+  if (src) {
+    children = <img src={src} />;
+  } else if (icon) {
+    children = <Icon type={icon} />;
+  }
+  interface ColorStyle {
+    color?: string;
+    backgroundColor?: string;
+  }
+  const style: ColorStyle = {}; 
+  if (color) {
+    style.color = color;
+  }
+  if (backgroundColor) {
+    style.backgroundColor = backgroundColor;
+  }
+  return (
+    <span {...others} style={style} className={classString}>
+      {children}
+    </span>
+  );
+};
+
diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md
new file mode 100644
index 000000000..7c97cb085
--- /dev/null
+++ b/components/avatar/index.zh-CN.md
@@ -0,0 +1,19 @@
+---
+category: Components
+subtitle: 头像
+type: Data Display
+title: Avatar
+---
+
+用来代表用户或事物，支持图片、Icon(antd-Icon)或字符展示。
+
+## API
+
+| 参数        | 说明                                                      | 类型        | 默认值 |
+|----------- |--------------------------------------------------------- | ----------  | ------- |
+| shape       | 指定头像的形状                          | Enum{ 'circle', 'square' }     | `circle`  |
+| size       | 设置头像的大小                           | Enum{ 'large', 'small', 'default' }       | `default` |
+| src  | 图片类头像的资源地址                                     | string   | -    |
+| icon    | 设置头像的图标类型，参考 `Icon` 组件                                       | string   | -    |
+| color | 设置头像颜色，仅支持 Icon、字符类头像                            | string   | -    |
+| backgroundColor     | 设置头像背景色，仅支持 Icon、字符类头像            | string   | -    |
\ No newline at end of file
diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less
new file mode 100644
index 000000000..12f3bcbd1
--- /dev/null
+++ b/components/avatar/style/index.less
@@ -0,0 +1,45 @@
+@import "../../style/themes/default";
+
+@avatar-prefix-cls: ~"@{ant-prefix}-avatar";
+
+.@{avatar-prefix-cls} {
+  display: inline-block;
+  text-align: center;
+  background: @avatar-bg;
+  color: @avatar-color;
+  overflow: hidden;
+
+  .avatar-size(@avatar-size-base, @avatar-font-size-base);
+
+  &-lg {
+    .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
+  }
+
+  &-sm {
+    .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
+  }
+
+  &-square {
+    border-radius: @avatar-border-radius;
+  }
+
+  & > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.avatar-size(@size, @font-size) {
+  width: @size;
+  height: @size;
+  line-height: @size;
+  border-radius: @size / 2;
+
+  & > * {
+    line-height: @size;
+  }
+
+  &.@{avatar-prefix-cls}-icon {
+    font-size: @font-size;
+  }
+}
diff --git a/components/avatar/style/index.tsx b/components/avatar/style/index.tsx
new file mode 100644
index 000000000..3a3ab0de5
--- /dev/null
+++ b/components/avatar/style/index.tsx
@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
diff --git a/components/index.tsx b/components/index.tsx
index 0d951e2c9..5264e5ce4 100644
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -19,6 +19,8 @@ export { default as AutoComplete } from './auto-complete';
 
 export { default as Alert } from './alert';
 
+export { default as Avatar } from './avatar';
+
 export { default as BackTop } from './back-top';
 
 export { default as Badge } from './badge';
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 089fca9ad..b82dc1396 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -335,3 +335,14 @@
 @back-top-color: #fff;
 @back-top-bg: rgba(64, 64, 64, 0.4);
 @back-top-hover-bg: rgba(64, 64, 64, 0.6);
+
+// Avatar
+@avatar-size-base: 32px;
+@avatar-size-lg: 40px;
+@avatar-size-sm: 24px;
+@avatar-font-size-base: 18px;
+@avatar-font-size-lg: 24px;
+@avatar-font-size-sm: 14px;
+@avatar-bg: #ccc;
+@avatar-color: #fff;
+@avatar-border-radius: @border-radius-base;
diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.js.snap
index fc474223e..ff1355fb9 100644
--- a/tests/__snapshots__/index.test.js.snap
+++ b/tests/__snapshots__/index.test.js.snap
@@ -6,6 +6,7 @@ Array [
   "Anchor",
   "AutoComplete",
   "Alert",
+  "Avatar",
   "BackTop",
   "Badge",
   "Breadcrumb",

From 7667225b0f10fea5d59d8a2e1da4b3ab3fcfa5f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=90=E4=BB=AA?= <linya.qu@alipay.com>
Date: Wed, 7 Jun 2017 11:18:31 +0800
Subject: [PATCH 2/5] improve

---
 components/avatar/__tests__/Avatar.test.js    |  11 ++
 .../__tests__/__snapshots__/demo.test.js.snap |  25 +++-
 components/avatar/demo/type.md                |   5 +-
 components/avatar/index.en-US.md              |   5 +-
 components/avatar/index.tsx                   | 127 +++++++++++-------
 components/avatar/index.zh-CN.md              |   2 -
 components/avatar/style/index.less            |   2 +
 7 files changed, 118 insertions(+), 59 deletions(-)
 create mode 100644 components/avatar/__tests__/Avatar.test.js

diff --git a/components/avatar/__tests__/Avatar.test.js b/components/avatar/__tests__/Avatar.test.js
new file mode 100644
index 000000000..685cb1422
--- /dev/null
+++ b/components/avatar/__tests__/Avatar.test.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Avatar from '..';
+
+describe('Avatar Render', () => {
+  it('Render long string correctly', () => {
+    const wrapper = mount(<Avatar>TestString</Avatar>);
+    const children = wrapper.find('.ant-avatar-string');
+    expect(children.length).toBe(1);
+  });
+});
diff --git a/components/avatar/__tests__/__snapshots__/demo.test.js.snap b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
index ea7abaaf2..cb854d6d7 100644
--- a/components/avatar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
@@ -101,7 +101,24 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
       <span
         class="ant-avatar ant-avatar-circle"
       >
-        U
+        <span
+          class="ant-avatar-string"
+        >
+          U
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-col-4"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+      >
+        <span
+          class="ant-avatar-string"
+        >
+          USER
+        </span>
       </span>
     </div>
     <div
@@ -126,7 +143,11 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
         class="ant-avatar ant-avatar-circle"
         style="color:#f56a00;background-color:#fde3cf;"
       >
-        U
+        <span
+          class="ant-avatar-string"
+        >
+          U
+        </span>
       </span>
     </div>
     <div
diff --git a/components/avatar/demo/type.md b/components/avatar/demo/type.md
index b85627339..e24ab3386 100644
--- a/components/avatar/demo/type.md
+++ b/components/avatar/demo/type.md
@@ -21,11 +21,12 @@ ReactDOM.render(
     <Row>
       <Col span={4}><Avatar icon="user" /></Col>
       <Col span={4}><Avatar>U</Avatar></Col>
+      <Col span={4}><Avatar>USER</Avatar></Col>
       <Col span={4}><Avatar src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" /></Col>
     </Row>
     <Row>
-      <Col span={4}><Avatar backgroundColor="#fde3cf" color="#f56a00">U</Avatar></Col>
-      <Col span={4}><Avatar backgroundColor="#87d068" icon="user" /></Col>
+      <Col span={4}><Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar></Col>
+      <Col span={4}><Avatar style={{ backgroundColor: '#87d068' }} icon="user" /></Col>
     </Row>
   </div>
 , mountNode);
diff --git a/components/avatar/index.en-US.md b/components/avatar/index.en-US.md
index 2204c4ab4..d16865689 100644
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@@ -4,7 +4,7 @@ type: Data Display
 title: Avatar
 ---
 
-Avatars can be used to represent people or object, which supports image, antd-Icon, or letter. 
+Avatars can be used to represent people or object, which supports image, antd-Icon, or letter.
 
 ## API
 
@@ -14,6 +14,3 @@ Avatars can be used to represent people or object, which supports image, antd-Ic
 | size   | to set the size of avatar | Enum{ 'large', 'small', 'default' } | `default` |
 | src  | the address of a image avatar | string | - |
 | icon    | the icon type of a icon avatar, see `Icon` Component | string | - |
-| color | to set the color of the icon or letter in avatar | string | - |
-| backgroundColor    | to set the background color of the icon or letter in avatar  | string | - |
-
diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx
index 8de4ccce7..2068216c4 100644
--- a/components/avatar/index.tsx
+++ b/components/avatar/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Icon from '../icon';
 import classNames from 'classnames';
 
@@ -11,63 +12,91 @@ export interface AvatarProps {
   src?: string;
   /** Type of the Icon to be used in avatar */
   icon?: string;
-  /** The icon or letter's color */
-  color?: string;
-  /** The backgroundColor of the avatar. Does not apply to image avatars */
-  backgroundColor?: string;
   style?: React.CSSProperties;
   prefixCls?: string;
   className?: string;
   children?: any;
 }
 
-export default (props: AvatarProps) => {
-  const {
-    prefixCls = 'ant-avatar', shape = 'circle', size = 'default', src,
-    icon, color, backgroundColor, className, ...others,
-  } = props;
+export default class Avatar extends React.Component<AvatarProps, any> {
+  static defaultProps = {
+    prefixCls: 'ant-avatar',
+    shape: 'circle',
+    size: 'default',
+  };
+  refs: {
+    avatarChildren: HTMLElement;
+  };
 
-  let sizeCls = '';
-  switch (size) {
-    case 'large':
-      sizeCls = 'lg';
-      break;
-    case 'small':
-      sizeCls = 'sm';
-      break;
-    default:
-      sizeCls = '';
-      break;
+  constructor(props) {
+    super(props);
+    this.state = {
+      scale: 1,
+    };
   }
 
-  const classString = classNames(prefixCls, className, {
-    [`${prefixCls}-${sizeCls}`]: sizeCls,
-    [`${prefixCls}-${shape}`]: shape,
-    [`${prefixCls}-image`]: src,
-    [`${prefixCls}-icon`]: icon,
-  });
+  componentDidMount() {
+    const childrenNode = this.refs.avatarChildren;
+    if (childrenNode) {
+      const childrenWidth = childrenNode.offsetWidth;
+      const avatarWidth = ReactDOM.findDOMNode(this).getBoundingClientRect().width;
+      // add 4px gap for each side to get better performance
+      if (avatarWidth - 8 < childrenWidth) {
+        this.setState({
+          scale: (avatarWidth - 8) / childrenWidth,
+        });
+      }
+    }
+  }
 
-  let children = props.children;
-  if (src) {
-    children = <img src={src} />;
-  } else if (icon) {
-    children = <Icon type={icon} />;
-  }
-  interface ColorStyle {
-    color?: string;
-    backgroundColor?: string;
-  }
-  const style: ColorStyle = {}; 
-  if (color) {
-    style.color = color;
-  }
-  if (backgroundColor) {
-    style.backgroundColor = backgroundColor;
-  }
-  return (
-    <span {...others} style={style} className={classString}>
-      {children}
-    </span>
-  );
-};
+  render() {
+    const {
+      prefixCls, shape, size, src, icon, className, ...others,
+    } = this.props;
 
+    let sizeCls = '';
+    switch (size) {
+      case 'large':
+        sizeCls = 'lg';
+        break;
+      case 'small':
+        sizeCls = 'sm';
+        break;
+      default:
+        sizeCls = '';
+        break;
+    }
+
+    const classString = classNames(prefixCls, className, {
+      [`${prefixCls}-${sizeCls}`]: sizeCls,
+      [`${prefixCls}-${shape}`]: shape,
+      [`${prefixCls}-image`]: src,
+      [`${prefixCls}-icon`]: icon,
+    });
+
+    let children = this.props.children;
+    if (src) {
+      children = <img src={src} />;
+    } else if (icon) {
+      children = <Icon type={icon} />;
+    } else {
+      const childrenNode = this.refs.avatarChildren;
+      if (childrenNode && this.state.scale !== 1) {
+        const childrenStyle: React.CSSProperties = {
+          transform: `scale(${this.state.scale})`,
+          position: 'absolute',
+          display: 'inline-block',
+          left: `calc(50% - ${childrenNode.offsetWidth / 2}px)`,
+        };
+        children = <span className={`${prefixCls}-string`} ref="avatarChildren" style={childrenStyle}>{children}</span>;
+      } else {
+        children = <span className={`${prefixCls}-string`} ref="avatarChildren">{children}</span>;
+      }
+    }
+    return (
+      <span {...others} className={classString}>
+        {children}
+      </span>
+    );
+  }
+}
diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md
index 7c97cb085..91690defb 100644
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@@ -15,5 +15,3 @@ title: Avatar
 | size       | 设置头像的大小                           | Enum{ 'large', 'small', 'default' }       | `default` |
 | src  | 图片类头像的资源地址                                     | string   | -    |
 | icon    | 设置头像的图标类型，参考 `Icon` 组件                                       | string   | -    |
-| color | 设置头像颜色，仅支持 Icon、字符类头像                            | string   | -    |
-| backgroundColor     | 设置头像背景色，仅支持 Icon、字符类头像            | string   | -    |
\ No newline at end of file
diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less
index 12f3bcbd1..cf9fce56c 100644
--- a/components/avatar/style/index.less
+++ b/components/avatar/style/index.less
@@ -7,6 +7,8 @@
   text-align: center;
   background: @avatar-bg;
   color: @avatar-color;
+  white-space: nowrap;
+  position: relative;
   overflow: hidden;
 
   .avatar-size(@avatar-size-base, @avatar-font-size-base);

From 153fb0fc3485d8101b8768840f1c4b18c3bbc426 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=90=E4=BB=AA?= <linya.qu@alipay.com>
Date: Thu, 8 Jun 2017 11:44:04 +0800
Subject: [PATCH 3/5] improve2

---
 .../__tests__/__snapshots__/demo.test.js.snap |  24 ++++
 components/avatar/demo/dynamic.md             |  49 +++++++
 components/avatar/index.tsx                   |  64 ++++++---
 .../__tests__/__snapshots__/demo.test.js.snap |   6 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  12 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  14 --
 .../__tests__/__snapshots__/demo.test.js.snap |  81 -----------
 .../__tests__/__snapshots__/demo.test.js.snap | 132 +++---------------
 .../Table.pagination.test.js.snap             |   4 -
 .../__tests__/__snapshots__/demo.test.js.snap |  87 ------------
 10 files changed, 139 insertions(+), 334 deletions(-)
 create mode 100644 components/avatar/demo/dynamic.md

diff --git a/components/avatar/__tests__/__snapshots__/demo.test.js.snap b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
index cb854d6d7..2a3d38406 100644
--- a/components/avatar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
@@ -79,6 +79,30 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
+<div>
+  <span
+    class="ant-avatar ant-avatar-lg ant-avatar-circle"
+    style="background-color:#f56a00;"
+  >
+    <span
+      class="ant-avatar-string"
+    >
+      U
+    </span>
+  </span>
+  <button
+    class="ant-btn ant-btn-sm"
+    style="margin-left:16px;"
+    type="button"
+  >
+    <span>
+      Change
+    </span>
+  </button>
+</div>
+`;
+
 exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
 <div>
   <div
diff --git a/components/avatar/demo/dynamic.md b/components/avatar/demo/dynamic.md
new file mode 100644
index 000000000..c4eda2706
--- /dev/null
+++ b/components/avatar/demo/dynamic.md
@@ -0,0 +1,49 @@
+---
+order: 2
+title:
+  zh-CN: 自动调整字符大小
+  en-US: Autoset Font Size
+---
+
+## zh-CN
+
+对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。
+
+## en-US
+
+For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.
+
+````jsx
+import { Avatar, Button } from 'antd';
+
+const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
+const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
+
+class Autoset extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      user: UserList[0],
+      color: colorList[0],
+    };
+  }
+  changeUser = () => {
+    const index = UserList.indexOf(this.state.user);
+    this.setState({
+      user: index < UserList.length - 1 ? UserList[index + 1] : UserList[0],
+      color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0],
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Avatar style={{ backgroundColor: this.state.color }} size="large">{this.state.user}</Avatar>
+        <Button size="small" style={{ marginLeft: 16 }} onClick={this.changeUser}>Change</Button>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Autoset />
+, mountNode);
+````
diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx
index 2068216c4..4320b0539 100644
--- a/components/avatar/index.tsx
+++ b/components/avatar/index.tsx
@@ -24,9 +24,8 @@ export default class Avatar extends React.Component<AvatarProps, any> {
     shape: 'circle',
     size: 'default',
   };
-  refs: {
-    avatarChildren: HTMLElement;
-  };
+
+  private avatarChildren: any;
 
   constructor(props) {
     super(props);
@@ -36,7 +35,18 @@ export default class Avatar extends React.Component<AvatarProps, any> {
   }
 
   componentDidMount() {
-    const childrenNode = this.refs.avatarChildren;
+    this.setScale();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.children !== this.props.children
+        || (prevState.scale !== this.state.scale && this.state.scale === 1)) {
+      this.setScale();
+    }
+  }
+
+  setScale = () => {
+    const childrenNode = this.avatarChildren;
     if (childrenNode) {
       const childrenWidth = childrenNode.offsetWidth;
       const avatarWidth = ReactDOM.findDOMNode(this).getBoundingClientRect().width;
@@ -45,6 +55,10 @@ export default class Avatar extends React.Component<AvatarProps, any> {
         this.setState({
           scale: (avatarWidth - 8) / childrenWidth,
         });
+      } else {
+        this.setState({
+          scale: 1,
+        });
       }
     }
   }
@@ -54,21 +68,12 @@ export default class Avatar extends React.Component<AvatarProps, any> {
       prefixCls, shape, size, src, icon, className, ...others,
     } = this.props;
 
-    let sizeCls = '';
-    switch (size) {
-      case 'large':
-        sizeCls = 'lg';
-        break;
-      case 'small':
-        sizeCls = 'sm';
-        break;
-      default:
-        sizeCls = '';
-        break;
-    }
+    const sizeCls = classNames({
+      [`${prefixCls}-lg`]: size === 'large',
+      [`${prefixCls}-sm`]: size === 'small',
+    });
 
-    const classString = classNames(prefixCls, className, {
-      [`${prefixCls}-${sizeCls}`]: sizeCls,
+    const classString = classNames(prefixCls, className, sizeCls, {
       [`${prefixCls}-${shape}`]: shape,
       [`${prefixCls}-image`]: src,
       [`${prefixCls}-icon`]: icon,
@@ -80,17 +85,30 @@ export default class Avatar extends React.Component<AvatarProps, any> {
     } else if (icon) {
       children = <Icon type={icon} />;
     } else {
-      const childrenNode = this.refs.avatarChildren;
-      if (childrenNode && this.state.scale !== 1) {
+      const childrenNode = this.avatarChildren;
+      if (childrenNode || this.state.scale !== 1) {
         const childrenStyle: React.CSSProperties = {
+          msTransform: `scale(${this.state.scale})`,
+          WebkitTransform: `scale(${this.state.scale})`,
           transform: `scale(${this.state.scale})`,
           position: 'absolute',
           display: 'inline-block',
-          left: `calc(50% - ${childrenNode.offsetWidth / 2}px)`,
+          left: `calc(50% - ${Math.round(childrenNode.offsetWidth / 2)}px)`,
         };
-        children = <span className={`${prefixCls}-string`} ref="avatarChildren" style={childrenStyle}>{children}</span>;
+        children = <span
+          className={`${prefixCls}-string`}
+          ref={span => this.avatarChildren = span}
+          style={childrenStyle}
+        >
+          {children}
+        </span>;
       } else {
-        children = <span className={`${prefixCls}-string`} ref="avatarChildren">{children}</span>;
+        children = <span
+          className={`${prefixCls}-string`}
+          ref={span => this.avatarChildren = span}
+        >
+          {children}
+        </span>;
       }
     }
     return (
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index d0c4ffbc1..c759bfb5f 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -2268,13 +2268,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             />
           </div>
           <div
-            aria-disabled="false"
-            aria-valuemax="100"
-            aria-valuemin="0"
-            aria-valuenow="0"
             class="ant-slider-handle"
-            role="slider"
             style="left:0%;"
+            value="0"
           />
           <div
             class="ant-slider-mark"
diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap
index fbd1aa81a..d6f109d6a 100644
--- a/components/grid/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/grid/__tests__/__snapshots__/demo.test.js.snap
@@ -511,13 +511,9 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
           />
         </div>
         <div
-          aria-disabled="false"
-          aria-valuemax="5"
-          aria-valuemin="0"
-          aria-valuenow="1"
           class="ant-slider-handle"
-          role="slider"
           style="left:20%;"
+          value="1"
         />
         <div
           class="ant-slider-mark"
@@ -608,13 +604,9 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
           />
         </div>
         <div
-          aria-disabled="false"
-          aria-valuemax="5"
-          aria-valuemin="0"
-          aria-valuenow="2"
           class="ant-slider-handle"
-          role="slider"
           style="left:40%;"
+          value="2"
         />
         <div
           class="ant-slider-mark"
diff --git a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
index e527d7667..c00df91a7 100644
--- a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
@@ -65,14 +65,12 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="Previous Page"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -81,7 +79,6 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-2"
-          tabindex="0"
           title="2"
         >
           <a>
@@ -90,7 +87,6 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-3"
-          tabindex="0"
           title="3"
         >
           <a>
@@ -99,7 +95,6 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-4"
-          tabindex="0"
           title="4"
         >
           <a>
@@ -108,7 +103,6 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-5"
-          tabindex="0"
           title="5"
         >
           <a>
@@ -118,7 +112,6 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
         <li
           aria-disabled="false"
           class=" ant-pagination-next"
-          tabindex="0"
           title="Next Page"
         >
           <a />
@@ -1548,14 +1541,12 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
     <li
       aria-disabled="true"
       class="ant-pagination-disabled ant-pagination-prev"
-      tabindex="0"
       title="Previous Page"
     >
       <a />
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-      tabindex="0"
       title="1"
     >
       <a>
@@ -1564,7 +1555,6 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-2"
-      tabindex="0"
       title="2"
     >
       <a>
@@ -1573,7 +1563,6 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-3"
-      tabindex="0"
       title="3"
     >
       <a>
@@ -1582,7 +1571,6 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-4"
-      tabindex="0"
       title="4"
     >
       <a>
@@ -1591,7 +1579,6 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-5"
-      tabindex="0"
       title="5"
     >
       <a>
@@ -1601,7 +1588,6 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
     <li
       aria-disabled="false"
       class=" ant-pagination-next"
-      tabindex="0"
       title="Next Page"
     >
       <a />
diff --git a/components/pagination/__tests__/__snapshots__/demo.test.js.snap b/components/pagination/__tests__/__snapshots__/demo.test.js.snap
index 286eb15ae..74882c235 100644
--- a/components/pagination/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/pagination/__tests__/__snapshots__/demo.test.js.snap
@@ -8,14 +8,12 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
   <li
     aria-disabled="true"
     class="ant-pagination-disabled ant-pagination-prev"
-    tabindex="0"
     title="上一页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-    tabindex="0"
     title="1"
   >
     <a>
@@ -24,7 +22,6 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-2"
-    tabindex="0"
     title="2"
   >
     <a>
@@ -33,7 +30,6 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-3"
-    tabindex="0"
     title="3"
   >
     <a>
@@ -42,7 +38,6 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-4"
-    tabindex="0"
     title="4"
   >
     <a>
@@ -51,7 +46,6 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-5"
-    tabindex="0"
     title="5"
   >
     <a>
@@ -61,7 +55,6 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-next"
-    tabindex="0"
     title="下一页"
   >
     <a />
@@ -77,14 +70,12 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-prev"
-    tabindex="0"
     title="上一页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-1"
-    tabindex="0"
     title="1"
   >
     <a>
@@ -93,7 +84,6 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-2"
-    tabindex="0"
     title="2"
   >
     <a>
@@ -102,7 +92,6 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active"
-    tabindex="0"
     title="3"
   >
     <a>
@@ -111,7 +100,6 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-4"
-    tabindex="0"
     title="4"
   >
     <a>
@@ -120,7 +108,6 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
-    tabindex="0"
     title="5"
   >
     <a>
@@ -129,14 +116,12 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-jump-next"
-    tabindex="0"
     title="向后 5 页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-50"
-    tabindex="0"
     title="50"
   >
     <a>
@@ -146,7 +131,6 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-next"
-    tabindex="0"
     title="下一页"
   >
     <a />
@@ -198,14 +182,12 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-prev"
-    tabindex="0"
     title="上一页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-1"
-    tabindex="0"
     title="1"
   >
     <a>
@@ -214,7 +196,6 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-2"
-    tabindex="0"
     title="2"
   >
     <a>
@@ -223,7 +204,6 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active"
-    tabindex="0"
     title="3"
   >
     <a>
@@ -232,7 +212,6 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-4"
-    tabindex="0"
     title="4"
   >
     <a>
@@ -241,7 +220,6 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-5"
-    tabindex="0"
     title="5"
   >
     <a>
@@ -251,7 +229,6 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-next"
-    tabindex="0"
     title="下一页"
   >
     <a />
@@ -267,14 +244,12 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-prev"
-    tabindex="0"
     title="上一页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-1"
-    tabindex="0"
     title="1"
   >
     <a>
@@ -283,7 +258,6 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-2 ant-pagination-item-active"
-    tabindex="0"
     title="2"
   >
     <a>
@@ -292,7 +266,6 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-3"
-    tabindex="0"
     title="3"
   >
     <a>
@@ -301,7 +274,6 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-4"
-    tabindex="0"
     title="4"
   >
     <a>
@@ -310,7 +282,6 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
-    tabindex="0"
     title="5"
   >
     <a>
@@ -319,14 +290,12 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-jump-next"
-    tabindex="0"
     title="向后 5 页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-50"
-    tabindex="0"
     title="50"
   >
     <a>
@@ -336,7 +305,6 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-next"
-    tabindex="0"
     title="下一页"
   >
     <a />
@@ -367,14 +335,12 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     <li
       aria-disabled="true"
       class="ant-pagination-disabled ant-pagination-prev"
-      tabindex="0"
       title="上一页"
     >
       <a />
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-      tabindex="0"
       title="1"
     >
       <a>
@@ -383,7 +349,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-2"
-      tabindex="0"
       title="2"
     >
       <a>
@@ -392,7 +357,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-3"
-      tabindex="0"
       title="3"
     >
       <a>
@@ -401,7 +365,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-4"
-      tabindex="0"
       title="4"
     >
       <a>
@@ -410,7 +373,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-5"
-      tabindex="0"
       title="5"
     >
       <a>
@@ -420,7 +382,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     <li
       aria-disabled="false"
       class=" ant-pagination-next"
-      tabindex="0"
       title="下一页"
     >
       <a />
@@ -433,14 +394,12 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     <li
       aria-disabled="true"
       class="ant-pagination-disabled ant-pagination-prev"
-      tabindex="0"
       title="上一页"
     >
       <a />
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-      tabindex="0"
       title="1"
     >
       <a>
@@ -449,7 +408,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-2"
-      tabindex="0"
       title="2"
     >
       <a>
@@ -458,7 +416,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-3"
-      tabindex="0"
       title="3"
     >
       <a>
@@ -467,7 +424,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-4"
-      tabindex="0"
       title="4"
     >
       <a>
@@ -476,7 +432,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-5"
-      tabindex="0"
       title="5"
     >
       <a>
@@ -486,7 +441,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     <li
       aria-disabled="false"
       class=" ant-pagination-next"
-      tabindex="0"
       title="下一页"
     >
       <a />
@@ -550,14 +504,12 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     <li
       aria-disabled="true"
       class="ant-pagination-disabled ant-pagination-prev"
-      tabindex="0"
       title="上一页"
     >
       <a />
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-      tabindex="0"
       title="1"
     >
       <a>
@@ -566,7 +518,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-2"
-      tabindex="0"
       title="2"
     >
       <a>
@@ -575,7 +526,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-3"
-      tabindex="0"
       title="3"
     >
       <a>
@@ -584,7 +534,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-4"
-      tabindex="0"
       title="4"
     >
       <a>
@@ -593,7 +542,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-5"
-      tabindex="0"
       title="5"
     >
       <a>
@@ -603,7 +551,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     <li
       aria-disabled="false"
       class=" ant-pagination-next"
-      tabindex="0"
       title="下一页"
     >
       <a />
@@ -620,14 +567,12 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-prev"
-    tabindex="0"
     title="上一页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-1"
-    tabindex="0"
     title="1"
   >
     <a>
@@ -636,14 +581,12 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-jump-prev"
-    tabindex="0"
     title="向前 5 页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-4 ant-pagination-item-after-jump-prev"
-    tabindex="0"
     title="4"
   >
     <a>
@@ -652,7 +595,6 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-5"
-    tabindex="0"
     title="5"
   >
     <a>
@@ -661,7 +603,6 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-6 ant-pagination-item-active"
-    tabindex="0"
     title="6"
   >
     <a>
@@ -670,7 +611,6 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-7"
-    tabindex="0"
     title="7"
   >
     <a>
@@ -679,7 +619,6 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-8 ant-pagination-item-before-jump-next"
-    tabindex="0"
     title="8"
   >
     <a>
@@ -688,14 +627,12 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-jump-next"
-    tabindex="0"
     title="向后 5 页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-50"
-    tabindex="0"
     title="50"
   >
     <a>
@@ -705,7 +642,6 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-next"
-    tabindex="0"
     title="下一页"
   >
     <a />
@@ -720,7 +656,6 @@ exports[`renders ./components/pagination/demo/simple.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-prev"
-    tabindex="0"
     title="上一页"
   >
     <a />
@@ -730,7 +665,6 @@ exports[`renders ./components/pagination/demo/simple.md correctly 1`] = `
     title="2/5"
   >
     <input
-      size="3"
       type="text"
       value="2"
     />
@@ -744,7 +678,6 @@ exports[`renders ./components/pagination/demo/simple.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-next"
-    tabindex="0"
     title="下一页"
   >
     <a />
@@ -766,14 +699,12 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     <li
       aria-disabled="true"
       class="ant-pagination-disabled ant-pagination-prev"
-      tabindex="0"
       title="上一页"
     >
       <a />
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-      tabindex="0"
       title="1"
     >
       <a>
@@ -782,7 +713,6 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-2"
-      tabindex="0"
       title="2"
     >
       <a>
@@ -791,7 +721,6 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-3"
-      tabindex="0"
       title="3"
     >
       <a>
@@ -800,7 +729,6 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-4"
-      tabindex="0"
       title="4"
     >
       <a>
@@ -809,7 +737,6 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-5"
-      tabindex="0"
       title="5"
     >
       <a>
@@ -819,7 +746,6 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     <li
       aria-disabled="false"
       class=" ant-pagination-next"
-      tabindex="0"
       title="下一页"
     >
       <a />
@@ -838,14 +764,12 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     <li
       aria-disabled="true"
       class="ant-pagination-disabled ant-pagination-prev"
-      tabindex="0"
       title="上一页"
     >
       <a />
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-      tabindex="0"
       title="1"
     >
       <a>
@@ -854,7 +778,6 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-2"
-      tabindex="0"
       title="2"
     >
       <a>
@@ -863,7 +786,6 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-3"
-      tabindex="0"
       title="3"
     >
       <a>
@@ -872,7 +794,6 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-4"
-      tabindex="0"
       title="4"
     >
       <a>
@@ -881,7 +802,6 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-5"
-      tabindex="0"
       title="5"
     >
       <a>
@@ -891,7 +811,6 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     <li
       aria-disabled="false"
       class=" ant-pagination-next"
-      tabindex="0"
       title="下一页"
     >
       <a />
diff --git a/components/slider/__tests__/__snapshots__/demo.test.js.snap b/components/slider/__tests__/__snapshots__/demo.test.js.snap
index 740975305..dfd03eef3 100644
--- a/components/slider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/slider/__tests__/__snapshots__/demo.test.js.snap
@@ -16,13 +16,9 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="30"
       class="ant-slider-handle"
-      role="slider"
       style="left:30%;"
+      value="30"
     />
     <div
       class="ant-slider-mark"
@@ -42,22 +38,14 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="20"
       class="ant-slider-handle ant-slider-handle-1"
-      role="slider"
       style="left:20%;"
+      value="20"
     />
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="50"
       class="ant-slider-handle ant-slider-handle-2"
-      role="slider"
       style="left:50%;"
+      value="50"
     />
     <div
       class="ant-slider-mark"
@@ -91,13 +79,9 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="30"
       class="ant-slider-handle"
-      role="slider"
       style="left:30%;"
+      value="30"
     />
     <div
       class="ant-slider-mark"
@@ -117,22 +101,14 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="20"
       class="ant-slider-handle ant-slider-handle-1"
-      role="slider"
       style="left:20%;"
+      value="20"
     />
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="50"
       class="ant-slider-handle ant-slider-handle-2"
-      role="slider"
       style="left:50%;"
+      value="50"
     />
     <div
       class="ant-slider-mark"
@@ -162,13 +138,9 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
-      aria-disabled="false"
-      aria-valuemax="20"
-      aria-valuemin="0"
-      aria-valuenow="0"
       class="ant-slider-handle"
-      role="slider"
       style="left:0%;"
+      value="0"
     />
     <div
       class="ant-slider-mark"
@@ -202,13 +174,9 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
           class="ant-slider-step"
         />
         <div
-          aria-disabled="false"
-          aria-valuemax="20"
-          aria-valuemin="1"
-          aria-valuenow="1"
           class="ant-slider-handle"
-          role="slider"
           style="left:0%;"
+          value="1"
         />
         <div
           class="ant-slider-mark"
@@ -288,13 +256,9 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
           class="ant-slider-step"
         />
         <div
-          aria-disabled="false"
-          aria-valuemax="1"
-          aria-valuemin="0"
-          aria-valuenow="0"
           class="ant-slider-handle"
-          role="slider"
           style="left:0%;"
+          value="0"
         />
         <div
           class="ant-slider-mark"
@@ -393,13 +357,9 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       />
     </div>
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="37"
       class="ant-slider-handle"
-      role="slider"
       style="left:37%;"
+      value="37"
     />
     <div
       class="ant-slider-mark"
@@ -463,22 +423,14 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       />
     </div>
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="26"
       class="ant-slider-handle ant-slider-handle-1"
-      role="slider"
       style="left:26%;"
+      value="26"
     />
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="37"
       class="ant-slider-handle ant-slider-handle-2"
-      role="slider"
       style="left:37%;"
+      value="37"
     />
     <div
       class="ant-slider-mark"
@@ -545,13 +497,9 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       />
     </div>
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="37"
       class="ant-slider-handle"
-      role="slider"
       style="left:37%;"
+      value="37"
     />
     <div
       class="ant-slider-mark"
@@ -618,13 +566,9 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       />
     </div>
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="37"
       class="ant-slider-handle"
-      role="slider"
       style="left:37%;"
+      value="37"
     />
     <div
       class="ant-slider-mark"
@@ -691,13 +635,9 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       />
     </div>
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="37"
       class="ant-slider-handle"
-      role="slider"
       style="left:37%;"
+      value="37"
     />
     <div
       class="ant-slider-mark"
@@ -749,13 +689,9 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="0"
       class="ant-slider-handle"
-      role="slider"
       style="left:0%;"
+      value="0"
     />
     <div
       class="ant-slider-mark"
@@ -775,13 +711,9 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
-      aria-disabled="false"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="0"
       class="ant-slider-handle"
-      role="slider"
       style="left:0%;"
+      value="0"
     />
     <div
       class="ant-slider-mark"
@@ -811,13 +743,9 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         class="ant-slider-step"
       />
       <div
-        aria-disabled="false"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="30"
         class="ant-slider-handle"
-        role="slider"
         style="bottom:30%;"
+        value="30"
       />
       <div
         class="ant-slider-mark"
@@ -841,22 +769,14 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         class="ant-slider-step"
       />
       <div
-        aria-disabled="false"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="20"
         class="ant-slider-handle ant-slider-handle-1"
-        role="slider"
         style="bottom:20%;"
+        value="20"
       />
       <div
-        aria-disabled="false"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="50"
         class="ant-slider-handle ant-slider-handle-2"
-        role="slider"
         style="bottom:50%;"
+        value="50"
       />
       <div
         class="ant-slider-mark"
@@ -897,22 +817,14 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         />
       </div>
       <div
-        aria-disabled="false"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="26"
         class="ant-slider-handle ant-slider-handle-1"
-        role="slider"
         style="bottom:26%;"
+        value="26"
       />
       <div
-        aria-disabled="false"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="37"
         class="ant-slider-handle ant-slider-handle-2"
-        role="slider"
         style="bottom:37%;"
+        value="37"
       />
       <div
         class="ant-slider-mark"
diff --git a/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap b/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
index 56805d7a7..c2c3e6bc8 100644
--- a/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
@@ -79,14 +79,12 @@ exports[`Table.pagination renders pagination correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -95,7 +93,6 @@ exports[`Table.pagination renders pagination correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-2"
-          tabindex="0"
           title="2"
         >
           <a>
@@ -105,7 +102,6 @@ exports[`Table.pagination renders pagination correctly 1`] = `
         <li
           aria-disabled="false"
           class=" ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index ff959eec3..3cbaa7766 100644
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -355,14 +355,12 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -372,7 +370,6 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -543,14 +540,12 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -560,7 +555,6 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -812,14 +806,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -829,7 +821,6 @@ exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -1010,14 +1001,12 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -1027,7 +1016,6 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -2351,14 +2339,12 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-prev"
-            tabindex="0"
             title="上一页"
           >
             <a />
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-            tabindex="0"
             title="1"
           >
             <a>
@@ -2368,7 +2354,6 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-next"
-            tabindex="0"
             title="下一页"
           >
             <a />
@@ -2554,14 +2539,12 @@ exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-prev"
-            tabindex="0"
             title="上一页"
           >
             <a />
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-            tabindex="0"
             title="1"
           >
             <a>
@@ -2571,7 +2554,6 @@ exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-next"
-            tabindex="0"
             title="下一页"
           >
             <a />
@@ -2714,14 +2696,12 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -2731,7 +2711,6 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -2932,14 +2911,12 @@ exports[`renders ./components/table/demo/expand.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -2949,7 +2926,6 @@ exports[`renders ./components/table/demo/expand.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -3489,14 +3465,12 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -3506,7 +3480,6 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -3944,14 +3917,12 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -3961,7 +3932,6 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -5270,14 +5240,12 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -5286,7 +5254,6 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-2"
-          tabindex="0"
           title="2"
         >
           <a>
@@ -5295,7 +5262,6 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-3"
-          tabindex="0"
           title="3"
         >
           <a>
@@ -5304,7 +5270,6 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-4"
-          tabindex="0"
           title="4"
         >
           <a>
@@ -5313,7 +5278,6 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
-          tabindex="0"
           title="5"
         >
           <a>
@@ -5322,14 +5286,12 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-jump-next"
-          tabindex="0"
           title="向后 5 页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-10"
-          tabindex="0"
           title="10"
         >
           <a>
@@ -5339,7 +5301,6 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         <li
           aria-disabled="false"
           class=" ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -6595,14 +6556,12 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -6611,7 +6570,6 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-2"
-          tabindex="0"
           title="2"
         >
           <a>
@@ -6621,7 +6579,6 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
         <li
           aria-disabled="false"
           class=" ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -7668,14 +7625,12 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -7684,7 +7639,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-2"
-          tabindex="0"
           title="2"
         >
           <a>
@@ -7693,7 +7647,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-3"
-          tabindex="0"
           title="3"
         >
           <a>
@@ -7702,7 +7655,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-4"
-          tabindex="0"
           title="4"
         >
           <a>
@@ -7711,7 +7663,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
-          tabindex="0"
           title="5"
         >
           <a>
@@ -7720,14 +7671,12 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-jump-next"
-          tabindex="0"
           title="向后 5 页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-10"
-          tabindex="0"
           title="10"
         >
           <a>
@@ -7737,7 +7686,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         <li
           aria-disabled="false"
           class=" ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -7977,14 +7925,12 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -7994,7 +7940,6 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -8280,14 +8225,12 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -8297,7 +8240,6 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -8567,14 +8509,12 @@ exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -8584,7 +8524,6 @@ exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -8853,14 +8792,12 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-prev"
-            tabindex="0"
             title="上一页"
           >
             <a />
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-            tabindex="0"
             title="1"
           >
             <a>
@@ -8870,7 +8807,6 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-next"
-            tabindex="0"
             title="下一页"
           >
             <a />
@@ -9170,14 +9106,12 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -9187,7 +9121,6 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -9750,14 +9683,12 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-prev"
-            tabindex="0"
             title="上一页"
           >
             <a />
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-            tabindex="0"
             title="1"
           >
             <a>
@@ -9766,7 +9697,6 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-2"
-            tabindex="0"
             title="2"
           >
             <a>
@@ -9775,7 +9705,6 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-3"
-            tabindex="0"
             title="3"
           >
             <a>
@@ -9784,7 +9713,6 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-4"
-            tabindex="0"
             title="4"
           >
             <a>
@@ -9793,7 +9721,6 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-5"
-            tabindex="0"
             title="5"
           >
             <a>
@@ -9803,7 +9730,6 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
           <li
             aria-disabled="false"
             class=" ant-pagination-next"
-            tabindex="0"
             title="下一页"
           >
             <a />
@@ -10357,14 +10283,12 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
-          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-          tabindex="0"
           title="1"
         >
           <a>
@@ -10373,7 +10297,6 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-2"
-          tabindex="0"
           title="2"
         >
           <a>
@@ -10382,7 +10305,6 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-3"
-          tabindex="0"
           title="3"
         >
           <a>
@@ -10391,7 +10313,6 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-4"
-          tabindex="0"
           title="4"
         >
           <a>
@@ -10400,7 +10321,6 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-5"
-          tabindex="0"
           title="5"
         >
           <a>
@@ -10410,7 +10330,6 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
         <li
           aria-disabled="false"
           class=" ant-pagination-next"
-          tabindex="0"
           title="下一页"
         >
           <a />
@@ -10563,14 +10482,12 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-prev"
-            tabindex="0"
             title="上一页"
           >
             <a />
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-            tabindex="0"
             title="1"
           >
             <a>
@@ -10580,7 +10497,6 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-next"
-            tabindex="0"
             title="下一页"
           >
             <a />
@@ -10729,14 +10645,12 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-prev"
-            tabindex="0"
             title="上一页"
           >
             <a />
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-            tabindex="0"
             title="1"
           >
             <a>
@@ -10746,7 +10660,6 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-next"
-            tabindex="0"
             title="下一页"
           >
             <a />

From 8749438aed42f23cab8a54e33c01c9c59caa059b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=90=E4=BB=AA?= <linya.qu@alipay.com>
Date: Fri, 9 Jun 2017 15:00:44 +0800
Subject: [PATCH 4/5] add Badge demo

---
 .../__tests__/__snapshots__/demo.test.js.snap | 198 ++++++++++++++++++
 components/avatar/demo/badge.md               |  29 +++
 components/avatar/index.zh-CN.md              |   2 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   7 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  12 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  14 ++
 .../__tests__/__snapshots__/demo.test.js.snap |  81 +++++++
 .../__tests__/__snapshots__/demo.test.js.snap | 132 ++++++++++--
 .../Table.pagination.test.js.snap             |   4 +
 .../__tests__/__snapshots__/demo.test.js.snap |  87 ++++++++
 10 files changed, 539 insertions(+), 27 deletions(-)
 create mode 100644 components/avatar/demo/badge.md

diff --git a/components/avatar/__tests__/__snapshots__/demo.test.js.snap b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
index 2a3d38406..34f60465b 100644
--- a/components/avatar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
@@ -1,5 +1,203 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
+<div>
+  <span
+    style="margin-right:24px;"
+  >
+    <span
+      class="ant-badge"
+      title="1"
+    >
+      <span
+        class="ant-avatar ant-avatar-square ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+      <sup
+        class="ant-scroll-number ant-badge-count"
+        data-show="true"
+      >
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%);"
+        >
+          <p
+            class=""
+          >
+            0
+          </p>
+          <p
+            class=""
+          >
+            1
+          </p>
+          <p
+            class=""
+          >
+            2
+          </p>
+          <p
+            class=""
+          >
+            3
+          </p>
+          <p
+            class=""
+          >
+            4
+          </p>
+          <p
+            class=""
+          >
+            5
+          </p>
+          <p
+            class=""
+          >
+            6
+          </p>
+          <p
+            class=""
+          >
+            7
+          </p>
+          <p
+            class=""
+          >
+            8
+          </p>
+          <p
+            class=""
+          >
+            9
+          </p>
+          <p
+            class=""
+          >
+            0
+          </p>
+          <p
+            class="current"
+          >
+            1
+          </p>
+          <p
+            class=""
+          >
+            2
+          </p>
+          <p
+            class=""
+          >
+            3
+          </p>
+          <p
+            class=""
+          >
+            4
+          </p>
+          <p
+            class=""
+          >
+            5
+          </p>
+          <p
+            class=""
+          >
+            6
+          </p>
+          <p
+            class=""
+          >
+            7
+          </p>
+          <p
+            class=""
+          >
+            8
+          </p>
+          <p
+            class=""
+          >
+            9
+          </p>
+          <p
+            class=""
+          >
+            0
+          </p>
+          <p
+            class=""
+          >
+            1
+          </p>
+          <p
+            class=""
+          >
+            2
+          </p>
+          <p
+            class=""
+          >
+            3
+          </p>
+          <p
+            class=""
+          >
+            4
+          </p>
+          <p
+            class=""
+          >
+            5
+          </p>
+          <p
+            class=""
+          >
+            6
+          </p>
+          <p
+            class=""
+          >
+            7
+          </p>
+          <p
+            class=""
+          >
+            8
+          </p>
+          <p
+            class=""
+          >
+            9
+          </p>
+        </span>
+      </sup>
+    </span>
+  </span>
+  <span>
+    <span
+      class="ant-badge"
+    >
+      <span
+        class="ant-avatar ant-avatar-square ant-avatar-icon"
+      >
+        <i
+          class="anticon anticon-user"
+        />
+      </span>
+      <sup
+        class="ant-scroll-number ant-badge-dot"
+        data-show="true"
+      />
+    </span>
+  </span>
+</div>
+`;
+
 exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
 <div>
   <div
diff --git a/components/avatar/demo/badge.md b/components/avatar/demo/badge.md
new file mode 100644
index 000000000..11d7b1074
--- /dev/null
+++ b/components/avatar/demo/badge.md
@@ -0,0 +1,29 @@
+---
+order: 3
+title:
+  zh-CN: 带徽标的头像
+  en-US: With Badge
+---
+
+## zh-CN
+
+通常用于消息提示。
+
+## en-US
+
+Usually used for messages remind.
+
+````jsx
+import { Avatar, Badge } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <span style={{ marginRight: 24 }}>
+      <Badge count={1}><Avatar shape="square" icon="user" /></Badge>
+    </span>
+    <span>
+      <Badge dot><Avatar shape="square" icon="user" /></Badge>
+    </span>
+  </div>
+, mountNode);
+````
diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md
index 91690defb..a9c45e59a 100644
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@@ -5,7 +5,7 @@ type: Data Display
 title: Avatar
 ---
 
-用来代表用户或事物，支持图片、Icon(antd-Icon)或字符展示。
+用来代表用户或事物，支持图片、图标或字符展示。
 
 ## API
 
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index c759bfb5f..a2c4934f0 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -2161,7 +2161,6 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             <input
               autocomplete="off"
               class="ant-input-number-input"
-              id="input-number"
               max="10"
               min="1"
               value="3"
@@ -2268,9 +2267,13 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             />
           </div>
           <div
+            aria-disabled="false"
+            aria-valuemax="100"
+            aria-valuemin="0"
+            aria-valuenow="0"
             class="ant-slider-handle"
+            role="slider"
             style="left:0%;"
-            value="0"
           />
           <div
             class="ant-slider-mark"
diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap
index d6f109d6a..fbd1aa81a 100644
--- a/components/grid/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/grid/__tests__/__snapshots__/demo.test.js.snap
@@ -511,9 +511,13 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
           />
         </div>
         <div
+          aria-disabled="false"
+          aria-valuemax="5"
+          aria-valuemin="0"
+          aria-valuenow="1"
           class="ant-slider-handle"
+          role="slider"
           style="left:20%;"
-          value="1"
         />
         <div
           class="ant-slider-mark"
@@ -604,9 +608,13 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
           />
         </div>
         <div
+          aria-disabled="false"
+          aria-valuemax="5"
+          aria-valuemin="0"
+          aria-valuenow="2"
           class="ant-slider-handle"
+          role="slider"
           style="left:40%;"
-          value="2"
         />
         <div
           class="ant-slider-mark"
diff --git a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
index c00df91a7..e527d7667 100644
--- a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
@@ -65,12 +65,14 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="Previous Page"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -79,6 +81,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-2"
+          tabindex="0"
           title="2"
         >
           <a>
@@ -87,6 +90,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-3"
+          tabindex="0"
           title="3"
         >
           <a>
@@ -95,6 +99,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-4"
+          tabindex="0"
           title="4"
         >
           <a>
@@ -103,6 +108,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-5"
+          tabindex="0"
           title="5"
         >
           <a>
@@ -112,6 +118,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
         <li
           aria-disabled="false"
           class=" ant-pagination-next"
+          tabindex="0"
           title="Next Page"
         >
           <a />
@@ -1541,12 +1548,14 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
     <li
       aria-disabled="true"
       class="ant-pagination-disabled ant-pagination-prev"
+      tabindex="0"
       title="Previous Page"
     >
       <a />
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+      tabindex="0"
       title="1"
     >
       <a>
@@ -1555,6 +1564,7 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
       title="2"
     >
       <a>
@@ -1563,6 +1573,7 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-3"
+      tabindex="0"
       title="3"
     >
       <a>
@@ -1571,6 +1582,7 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
       title="4"
     >
       <a>
@@ -1579,6 +1591,7 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-5"
+      tabindex="0"
       title="5"
     >
       <a>
@@ -1588,6 +1601,7 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
     <li
       aria-disabled="false"
       class=" ant-pagination-next"
+      tabindex="0"
       title="Next Page"
     >
       <a />
diff --git a/components/pagination/__tests__/__snapshots__/demo.test.js.snap b/components/pagination/__tests__/__snapshots__/demo.test.js.snap
index 74882c235..286eb15ae 100644
--- a/components/pagination/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/pagination/__tests__/__snapshots__/demo.test.js.snap
@@ -8,12 +8,14 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
   <li
     aria-disabled="true"
     class="ant-pagination-disabled ant-pagination-prev"
+    tabindex="0"
     title="上一页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+    tabindex="0"
     title="1"
   >
     <a>
@@ -22,6 +24,7 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-2"
+    tabindex="0"
     title="2"
   >
     <a>
@@ -30,6 +33,7 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-3"
+    tabindex="0"
     title="3"
   >
     <a>
@@ -38,6 +42,7 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-4"
+    tabindex="0"
     title="4"
   >
     <a>
@@ -46,6 +51,7 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-5"
+    tabindex="0"
     title="5"
   >
     <a>
@@ -55,6 +61,7 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-next"
+    tabindex="0"
     title="下一页"
   >
     <a />
@@ -70,12 +77,14 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-prev"
+    tabindex="0"
     title="上一页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-1"
+    tabindex="0"
     title="1"
   >
     <a>
@@ -84,6 +93,7 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-2"
+    tabindex="0"
     title="2"
   >
     <a>
@@ -92,6 +102,7 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active"
+    tabindex="0"
     title="3"
   >
     <a>
@@ -100,6 +111,7 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-4"
+    tabindex="0"
     title="4"
   >
     <a>
@@ -108,6 +120,7 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
+    tabindex="0"
     title="5"
   >
     <a>
@@ -116,12 +129,14 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-jump-next"
+    tabindex="0"
     title="向后 5 页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-50"
+    tabindex="0"
     title="50"
   >
     <a>
@@ -131,6 +146,7 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-next"
+    tabindex="0"
     title="下一页"
   >
     <a />
@@ -182,12 +198,14 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-prev"
+    tabindex="0"
     title="上一页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-1"
+    tabindex="0"
     title="1"
   >
     <a>
@@ -196,6 +214,7 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-2"
+    tabindex="0"
     title="2"
   >
     <a>
@@ -204,6 +223,7 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active"
+    tabindex="0"
     title="3"
   >
     <a>
@@ -212,6 +232,7 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-4"
+    tabindex="0"
     title="4"
   >
     <a>
@@ -220,6 +241,7 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-5"
+    tabindex="0"
     title="5"
   >
     <a>
@@ -229,6 +251,7 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-next"
+    tabindex="0"
     title="下一页"
   >
     <a />
@@ -244,12 +267,14 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-prev"
+    tabindex="0"
     title="上一页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-1"
+    tabindex="0"
     title="1"
   >
     <a>
@@ -258,6 +283,7 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-2 ant-pagination-item-active"
+    tabindex="0"
     title="2"
   >
     <a>
@@ -266,6 +292,7 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-3"
+    tabindex="0"
     title="3"
   >
     <a>
@@ -274,6 +301,7 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-4"
+    tabindex="0"
     title="4"
   >
     <a>
@@ -282,6 +310,7 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
+    tabindex="0"
     title="5"
   >
     <a>
@@ -290,12 +319,14 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-jump-next"
+    tabindex="0"
     title="向后 5 页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-50"
+    tabindex="0"
     title="50"
   >
     <a>
@@ -305,6 +336,7 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-next"
+    tabindex="0"
     title="下一页"
   >
     <a />
@@ -335,12 +367,14 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     <li
       aria-disabled="true"
       class="ant-pagination-disabled ant-pagination-prev"
+      tabindex="0"
       title="上一页"
     >
       <a />
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+      tabindex="0"
       title="1"
     >
       <a>
@@ -349,6 +383,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
       title="2"
     >
       <a>
@@ -357,6 +392,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-3"
+      tabindex="0"
       title="3"
     >
       <a>
@@ -365,6 +401,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
       title="4"
     >
       <a>
@@ -373,6 +410,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-5"
+      tabindex="0"
       title="5"
     >
       <a>
@@ -382,6 +420,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     <li
       aria-disabled="false"
       class=" ant-pagination-next"
+      tabindex="0"
       title="下一页"
     >
       <a />
@@ -394,12 +433,14 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     <li
       aria-disabled="true"
       class="ant-pagination-disabled ant-pagination-prev"
+      tabindex="0"
       title="上一页"
     >
       <a />
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+      tabindex="0"
       title="1"
     >
       <a>
@@ -408,6 +449,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
       title="2"
     >
       <a>
@@ -416,6 +458,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-3"
+      tabindex="0"
       title="3"
     >
       <a>
@@ -424,6 +467,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
       title="4"
     >
       <a>
@@ -432,6 +476,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-5"
+      tabindex="0"
       title="5"
     >
       <a>
@@ -441,6 +486,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     <li
       aria-disabled="false"
       class=" ant-pagination-next"
+      tabindex="0"
       title="下一页"
     >
       <a />
@@ -504,12 +550,14 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     <li
       aria-disabled="true"
       class="ant-pagination-disabled ant-pagination-prev"
+      tabindex="0"
       title="上一页"
     >
       <a />
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+      tabindex="0"
       title="1"
     >
       <a>
@@ -518,6 +566,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
       title="2"
     >
       <a>
@@ -526,6 +575,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-3"
+      tabindex="0"
       title="3"
     >
       <a>
@@ -534,6 +584,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
       title="4"
     >
       <a>
@@ -542,6 +593,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-5"
+      tabindex="0"
       title="5"
     >
       <a>
@@ -551,6 +603,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
     <li
       aria-disabled="false"
       class=" ant-pagination-next"
+      tabindex="0"
       title="下一页"
     >
       <a />
@@ -567,12 +620,14 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-prev"
+    tabindex="0"
     title="上一页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-1"
+    tabindex="0"
     title="1"
   >
     <a>
@@ -581,12 +636,14 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-jump-prev"
+    tabindex="0"
     title="向前 5 页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-4 ant-pagination-item-after-jump-prev"
+    tabindex="0"
     title="4"
   >
     <a>
@@ -595,6 +652,7 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-5"
+    tabindex="0"
     title="5"
   >
     <a>
@@ -603,6 +661,7 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-6 ant-pagination-item-active"
+    tabindex="0"
     title="6"
   >
     <a>
@@ -611,6 +670,7 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-7"
+    tabindex="0"
     title="7"
   >
     <a>
@@ -619,6 +679,7 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-8 ant-pagination-item-before-jump-next"
+    tabindex="0"
     title="8"
   >
     <a>
@@ -627,12 +688,14 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   </li>
   <li
     class="ant-pagination-jump-next"
+    tabindex="0"
     title="向后 5 页"
   >
     <a />
   </li>
   <li
     class="ant-pagination-item ant-pagination-item-50"
+    tabindex="0"
     title="50"
   >
     <a>
@@ -642,6 +705,7 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-next"
+    tabindex="0"
     title="下一页"
   >
     <a />
@@ -656,6 +720,7 @@ exports[`renders ./components/pagination/demo/simple.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-prev"
+    tabindex="0"
     title="上一页"
   >
     <a />
@@ -665,6 +730,7 @@ exports[`renders ./components/pagination/demo/simple.md correctly 1`] = `
     title="2/5"
   >
     <input
+      size="3"
       type="text"
       value="2"
     />
@@ -678,6 +744,7 @@ exports[`renders ./components/pagination/demo/simple.md correctly 1`] = `
   <li
     aria-disabled="false"
     class=" ant-pagination-next"
+    tabindex="0"
     title="下一页"
   >
     <a />
@@ -699,12 +766,14 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     <li
       aria-disabled="true"
       class="ant-pagination-disabled ant-pagination-prev"
+      tabindex="0"
       title="上一页"
     >
       <a />
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+      tabindex="0"
       title="1"
     >
       <a>
@@ -713,6 +782,7 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
       title="2"
     >
       <a>
@@ -721,6 +791,7 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-3"
+      tabindex="0"
       title="3"
     >
       <a>
@@ -729,6 +800,7 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
       title="4"
     >
       <a>
@@ -737,6 +809,7 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-5"
+      tabindex="0"
       title="5"
     >
       <a>
@@ -746,6 +819,7 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     <li
       aria-disabled="false"
       class=" ant-pagination-next"
+      tabindex="0"
       title="下一页"
     >
       <a />
@@ -764,12 +838,14 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     <li
       aria-disabled="true"
       class="ant-pagination-disabled ant-pagination-prev"
+      tabindex="0"
       title="上一页"
     >
       <a />
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+      tabindex="0"
       title="1"
     >
       <a>
@@ -778,6 +854,7 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
       title="2"
     >
       <a>
@@ -786,6 +863,7 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-3"
+      tabindex="0"
       title="3"
     >
       <a>
@@ -794,6 +872,7 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
       title="4"
     >
       <a>
@@ -802,6 +881,7 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     </li>
     <li
       class="ant-pagination-item ant-pagination-item-5"
+      tabindex="0"
       title="5"
     >
       <a>
@@ -811,6 +891,7 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
     <li
       aria-disabled="false"
       class=" ant-pagination-next"
+      tabindex="0"
       title="下一页"
     >
       <a />
diff --git a/components/slider/__tests__/__snapshots__/demo.test.js.snap b/components/slider/__tests__/__snapshots__/demo.test.js.snap
index dfd03eef3..740975305 100644
--- a/components/slider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/slider/__tests__/__snapshots__/demo.test.js.snap
@@ -16,9 +16,13 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="30"
       class="ant-slider-handle"
+      role="slider"
       style="left:30%;"
-      value="30"
     />
     <div
       class="ant-slider-mark"
@@ -38,14 +42,22 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="20"
       class="ant-slider-handle ant-slider-handle-1"
+      role="slider"
       style="left:20%;"
-      value="20"
     />
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="50"
       class="ant-slider-handle ant-slider-handle-2"
+      role="slider"
       style="left:50%;"
-      value="50"
     />
     <div
       class="ant-slider-mark"
@@ -79,9 +91,13 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="30"
       class="ant-slider-handle"
+      role="slider"
       style="left:30%;"
-      value="30"
     />
     <div
       class="ant-slider-mark"
@@ -101,14 +117,22 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="20"
       class="ant-slider-handle ant-slider-handle-1"
+      role="slider"
       style="left:20%;"
-      value="20"
     />
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="50"
       class="ant-slider-handle ant-slider-handle-2"
+      role="slider"
       style="left:50%;"
-      value="50"
     />
     <div
       class="ant-slider-mark"
@@ -138,9 +162,13 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
+      aria-disabled="false"
+      aria-valuemax="20"
+      aria-valuemin="0"
+      aria-valuenow="0"
       class="ant-slider-handle"
+      role="slider"
       style="left:0%;"
-      value="0"
     />
     <div
       class="ant-slider-mark"
@@ -174,9 +202,13 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
           class="ant-slider-step"
         />
         <div
+          aria-disabled="false"
+          aria-valuemax="20"
+          aria-valuemin="1"
+          aria-valuenow="1"
           class="ant-slider-handle"
+          role="slider"
           style="left:0%;"
-          value="1"
         />
         <div
           class="ant-slider-mark"
@@ -256,9 +288,13 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
           class="ant-slider-step"
         />
         <div
+          aria-disabled="false"
+          aria-valuemax="1"
+          aria-valuemin="0"
+          aria-valuenow="0"
           class="ant-slider-handle"
+          role="slider"
           style="left:0%;"
-          value="0"
         />
         <div
           class="ant-slider-mark"
@@ -357,9 +393,13 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       />
     </div>
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="37"
       class="ant-slider-handle"
+      role="slider"
       style="left:37%;"
-      value="37"
     />
     <div
       class="ant-slider-mark"
@@ -423,14 +463,22 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       />
     </div>
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="26"
       class="ant-slider-handle ant-slider-handle-1"
+      role="slider"
       style="left:26%;"
-      value="26"
     />
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="37"
       class="ant-slider-handle ant-slider-handle-2"
+      role="slider"
       style="left:37%;"
-      value="37"
     />
     <div
       class="ant-slider-mark"
@@ -497,9 +545,13 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       />
     </div>
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="37"
       class="ant-slider-handle"
+      role="slider"
       style="left:37%;"
-      value="37"
     />
     <div
       class="ant-slider-mark"
@@ -566,9 +618,13 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       />
     </div>
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="37"
       class="ant-slider-handle"
+      role="slider"
       style="left:37%;"
-      value="37"
     />
     <div
       class="ant-slider-mark"
@@ -635,9 +691,13 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       />
     </div>
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="37"
       class="ant-slider-handle"
+      role="slider"
       style="left:37%;"
-      value="37"
     />
     <div
       class="ant-slider-mark"
@@ -689,9 +749,13 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="0"
       class="ant-slider-handle"
+      role="slider"
       style="left:0%;"
-      value="0"
     />
     <div
       class="ant-slider-mark"
@@ -711,9 +775,13 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
       class="ant-slider-step"
     />
     <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="0"
       class="ant-slider-handle"
+      role="slider"
       style="left:0%;"
-      value="0"
     />
     <div
       class="ant-slider-mark"
@@ -743,9 +811,13 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         class="ant-slider-step"
       />
       <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="30"
         class="ant-slider-handle"
+        role="slider"
         style="bottom:30%;"
-        value="30"
       />
       <div
         class="ant-slider-mark"
@@ -769,14 +841,22 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         class="ant-slider-step"
       />
       <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="20"
         class="ant-slider-handle ant-slider-handle-1"
+        role="slider"
         style="bottom:20%;"
-        value="20"
       />
       <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
         class="ant-slider-handle ant-slider-handle-2"
+        role="slider"
         style="bottom:50%;"
-        value="50"
       />
       <div
         class="ant-slider-mark"
@@ -817,14 +897,22 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         />
       </div>
       <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="26"
         class="ant-slider-handle ant-slider-handle-1"
+        role="slider"
         style="bottom:26%;"
-        value="26"
       />
       <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="37"
         class="ant-slider-handle ant-slider-handle-2"
+        role="slider"
         style="bottom:37%;"
-        value="37"
       />
       <div
         class="ant-slider-mark"
diff --git a/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap b/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
index c2c3e6bc8..56805d7a7 100644
--- a/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
@@ -79,12 +79,14 @@ exports[`Table.pagination renders pagination correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -93,6 +95,7 @@ exports[`Table.pagination renders pagination correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-2"
+          tabindex="0"
           title="2"
         >
           <a>
@@ -102,6 +105,7 @@ exports[`Table.pagination renders pagination correctly 1`] = `
         <li
           aria-disabled="false"
           class=" ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index 3cbaa7766..ff959eec3 100644
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -355,12 +355,14 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -370,6 +372,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -540,12 +543,14 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -555,6 +560,7 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -806,12 +812,14 @@ exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -821,6 +829,7 @@ exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -1001,12 +1010,14 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -1016,6 +1027,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -2339,12 +2351,14 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-prev"
+            tabindex="0"
             title="上一页"
           >
             <a />
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+            tabindex="0"
             title="1"
           >
             <a>
@@ -2354,6 +2368,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-next"
+            tabindex="0"
             title="下一页"
           >
             <a />
@@ -2539,12 +2554,14 @@ exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-prev"
+            tabindex="0"
             title="上一页"
           >
             <a />
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+            tabindex="0"
             title="1"
           >
             <a>
@@ -2554,6 +2571,7 @@ exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-next"
+            tabindex="0"
             title="下一页"
           >
             <a />
@@ -2696,12 +2714,14 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -2711,6 +2731,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -2911,12 +2932,14 @@ exports[`renders ./components/table/demo/expand.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -2926,6 +2949,7 @@ exports[`renders ./components/table/demo/expand.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -3465,12 +3489,14 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -3480,6 +3506,7 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -3917,12 +3944,14 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -3932,6 +3961,7 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -5240,12 +5270,14 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -5254,6 +5286,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-2"
+          tabindex="0"
           title="2"
         >
           <a>
@@ -5262,6 +5295,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-3"
+          tabindex="0"
           title="3"
         >
           <a>
@@ -5270,6 +5304,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-4"
+          tabindex="0"
           title="4"
         >
           <a>
@@ -5278,6 +5313,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
+          tabindex="0"
           title="5"
         >
           <a>
@@ -5286,12 +5322,14 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-jump-next"
+          tabindex="0"
           title="向后 5 页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-10"
+          tabindex="0"
           title="10"
         >
           <a>
@@ -5301,6 +5339,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
         <li
           aria-disabled="false"
           class=" ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -6556,12 +6595,14 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -6570,6 +6611,7 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-2"
+          tabindex="0"
           title="2"
         >
           <a>
@@ -6579,6 +6621,7 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
         <li
           aria-disabled="false"
           class=" ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -7625,12 +7668,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -7639,6 +7684,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-2"
+          tabindex="0"
           title="2"
         >
           <a>
@@ -7647,6 +7693,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-3"
+          tabindex="0"
           title="3"
         >
           <a>
@@ -7655,6 +7702,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-4"
+          tabindex="0"
           title="4"
         >
           <a>
@@ -7663,6 +7711,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
+          tabindex="0"
           title="5"
         >
           <a>
@@ -7671,12 +7720,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         </li>
         <li
           class="ant-pagination-jump-next"
+          tabindex="0"
           title="向后 5 页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-10"
+          tabindex="0"
           title="10"
         >
           <a>
@@ -7686,6 +7737,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         <li
           aria-disabled="false"
           class=" ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -7925,12 +7977,14 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -7940,6 +7994,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -8225,12 +8280,14 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -8240,6 +8297,7 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -8509,12 +8567,14 @@ exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -8524,6 +8584,7 @@ exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -8792,12 +8853,14 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-prev"
+            tabindex="0"
             title="上一页"
           >
             <a />
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+            tabindex="0"
             title="1"
           >
             <a>
@@ -8807,6 +8870,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-next"
+            tabindex="0"
             title="下一页"
           >
             <a />
@@ -9106,12 +9170,14 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -9121,6 +9187,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -9683,12 +9750,14 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-prev"
+            tabindex="0"
             title="上一页"
           >
             <a />
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+            tabindex="0"
             title="1"
           >
             <a>
@@ -9697,6 +9766,7 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-2"
+            tabindex="0"
             title="2"
           >
             <a>
@@ -9705,6 +9775,7 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-3"
+            tabindex="0"
             title="3"
           >
             <a>
@@ -9713,6 +9784,7 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-4"
+            tabindex="0"
             title="4"
           >
             <a>
@@ -9721,6 +9793,7 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-5"
+            tabindex="0"
             title="5"
           >
             <a>
@@ -9730,6 +9803,7 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
           <li
             aria-disabled="false"
             class=" ant-pagination-next"
+            tabindex="0"
             title="下一页"
           >
             <a />
@@ -10283,12 +10357,14 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
         <li
           aria-disabled="true"
           class="ant-pagination-disabled ant-pagination-prev"
+          tabindex="0"
           title="上一页"
         >
           <a />
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
           title="1"
         >
           <a>
@@ -10297,6 +10373,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-2"
+          tabindex="0"
           title="2"
         >
           <a>
@@ -10305,6 +10382,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-3"
+          tabindex="0"
           title="3"
         >
           <a>
@@ -10313,6 +10391,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-4"
+          tabindex="0"
           title="4"
         >
           <a>
@@ -10321,6 +10400,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
         </li>
         <li
           class="ant-pagination-item ant-pagination-item-5"
+          tabindex="0"
           title="5"
         >
           <a>
@@ -10330,6 +10410,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
         <li
           aria-disabled="false"
           class=" ant-pagination-next"
+          tabindex="0"
           title="下一页"
         >
           <a />
@@ -10482,12 +10563,14 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-prev"
+            tabindex="0"
             title="上一页"
           >
             <a />
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+            tabindex="0"
             title="1"
           >
             <a>
@@ -10497,6 +10580,7 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-next"
+            tabindex="0"
             title="下一页"
           >
             <a />
@@ -10645,12 +10729,14 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-prev"
+            tabindex="0"
             title="上一页"
           >
             <a />
           </li>
           <li
             class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+            tabindex="0"
             title="1"
           >
             <a>
@@ -10660,6 +10746,7 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
           <li
             aria-disabled="true"
             class="ant-pagination-disabled ant-pagination-next"
+            tabindex="0"
             title="下一页"
           >
             <a />

From e6ad9daff85f7bee70d8ae4f55b70b12b09f80d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=90=E4=BB=AA?= <linya.qu@alipay.com>
Date: Fri, 9 Jun 2017 15:11:38 +0800
Subject: [PATCH 5/5] update snap

---
 components/form/__tests__/__snapshots__/demo.test.js.snap | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index a2c4934f0..d0c4ffbc1 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -2161,6 +2161,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             <input
               autocomplete="off"
               class="ant-input-number-input"
+              id="input-number"
               max="10"
               min="1"
               value="3"