diff --git a/.eslintrc b/.eslintrc
index ba8a1b188..efb7c4f79 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -6,7 +6,7 @@
     "expect": true,
     "sinon": true
   },
-  "plugins": ['vue'],
+  "plugins": ['vue','json'],
   "extends": 'elemefe',
   "parserOptions": {
     "ecmaFeatures": {
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index df777aff6..497b52d20 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,15 @@
 ## Changelog
 
+### 2.0.4
+
+*2017-11-10*
+
+- Improved accessibility for Cascader, Dropdown, Message, Notification, Popover, Tooltip and Tree
+- Fixed Container resize when the width of viewport decreases, #8042
+- Fixed Tree's `updateKeyChildren` incorrectly deleting child nodes, #8100
+- Fixed bordered CheckboxButton's height when nested in a Form, #8100
+- Fixed Menu's parsing error for custom colors, #8153 (by @zhouyixiang)
+
 ### 2.0.3
 
 *2017-11-03*
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index d713059db..1e21c98a4 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,15 @@
 ## 更新日志
 
+### 2.0.4
+
+*2017-11-10*
+
+- 提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性
+- 修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042
+- 修复 Tree 的 `updateKeyChildren` 在删除子节点时的行为错误，#8100
+- 修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100
+- 修复 Menu 在解析自定义颜色时的错误，#8153（by @zhouyixiang）
+
 ### 2.0.3
 
 *2017-11-03*
diff --git a/examples/app.vue b/examples/app.vue
index 784c0b888..035034755 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -191,7 +191,6 @@
 
   const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN';
   const localize = lang => {
-    console.log(lang);
     switch (lang) {
       case 'zh-CN':
         use(zhLocale);
@@ -232,6 +231,7 @@
         const preferGithub = localStorage.getItem('PREFER_GITHUB');
         if (href.indexOf('element-cn') > -1 || preferGithub) return;
         setTimeout(() => {
+          if (this.lang !== 'zh-CN') return;
           this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
             .then(() => {
               location.href = location.href.replace('element.', 'element-cn.');
@@ -249,12 +249,12 @@
         this.suggestJump();
       }
       setTimeout(() => {
-        const notified = localStorage.getItem('RELEASE_NOTIFIED');
-        if (!notified) {
+        const notified = localStorage.getItem('ES_NOTIFIED');
+        if (!notified && this.lang !== 'zh-CN') {
           const h = this.$createElement;
           const title = this.lang === 'zh-CN'
-            ? '2.0 正式发布'
-            : '2.0 available now';
+            ? '帮助我们完成西班牙语文档'
+            : 'Help us with Spanish docs';
           const messages = this.lang === 'zh-CN'
             ? ['点击', '这里', '查看详情']
             : ['Click ', 'here', ' to learn more'];
@@ -266,13 +266,13 @@
               h('a', {
                 attrs: {
                   target: '_blank',
-                  href: `https://github.com/ElemeFE/element/issues/${ this.lang === 'zh-CN' ? '7755' : '7756' }`
+                  href: 'https://github.com/ElemeFE/element/issues/8074'
                 }
               }, messages[1]),
               messages[2]
             ]),
             onClose() {
-              localStorage.setItem('RELEASE_NOTIFIED', 1);
+              localStorage.setItem('ES_NOTIFIED', 1);
             }
           });
         }
diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md
index 79e85c45b..abff1c601 100644
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -101,6 +101,7 @@
         value8: '',
         value9: [],
         value10: [],
+        value11: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
@@ -320,7 +321,7 @@ You can clear Select using a clear icon.
 
 Multiple select uses tags to display selected options.
 
-:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options.
+:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute.
 ```html
 <template>
   <el-select v-model="value5" multiple placeholder="Select">
@@ -331,6 +332,20 @@ Multiple select uses tags to display selected options.
       :value="item.value">
     </el-option>
   </el-select>
+  
+  <el-select
+    v-model="value11"
+    multiple
+    collapse-tags
+    style="margin-left: 20px;"
+    placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
 </template>
 
 <script>
@@ -650,6 +665,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | value-key | unique identity key name for value, required when value is an object | string | — | value |
 | size | size of Input | string | large/small/mini | — |
 | clearable | whether single select can be cleared | boolean | — | false |
+| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
 | multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
 | name | the name attribute of select input | string | — | — |
 | placeholder | placeholder | string | — | Select |
diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md
index e87951105..d2492ef01 100644
--- a/examples/docs/zh-CN/select.md
+++ b/examples/docs/zh-CN/select.md
@@ -101,6 +101,7 @@
         value8: '',
         value9: '',
         value10: [],
+        value11: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
@@ -319,7 +320,7 @@
 
 适用性较广的基础多选，用 Tag 展示已选项
 
-:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组
+:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapse-tags`属性将它们合并为一段文字。
 ```html
 <template>
   <el-select v-model="value5" multiple placeholder="请选择">
@@ -330,6 +331,20 @@
       :value="item.value">
     </el-option>
   </el-select>
+
+  <el-select
+    v-model="value11"
+    multiple
+    collapse-tags
+    style="margin-left: 20px;"
+    placeholder="请选择">
+    <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+    </el-option>
+  </el-select>
 </template>
 
 <script>
@@ -645,6 +660,7 @@
 | value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
 | size | 输入框尺寸 | string | large/small/mini | — |
 | clearable | 单选时是否可以清空选项 | boolean | — | false |
+| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
 | multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
 | name | select input 的 name 属性 | string | — | — |
 | placeholder | 占位符 | string | — | 请选择 |
diff --git a/examples/nav.config.json b/examples/nav.config.json
index 29e2ef532..aab522596 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "Element Angular",
-      "href": "https://eleme.github.io/element-angular/"
+      "href": "https://element-angular.faas.ele.me/"
     },
     {
       "name": "开发指南",
@@ -260,7 +260,7 @@
     },
     {
       "name": "Element Angular",
-      "href": "https://eleme.github.io/element-angular/"
+      "href": "https://element-angular.faas.ele.me/"
     },
     {
       "name": "Development",
diff --git a/examples/versions.json b/examples/versions.json
index dd9c28277..285b329a5 100644
--- a/examples/versions.json
+++ b/examples/versions.json
@@ -1 +1 @@
-{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.9":"1.4","2.0.3":"2.0"}
\ No newline at end of file
+{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.9":"1.4","2.0.4":"2.0"}
\ No newline at end of file
diff --git a/package.json b/package.json
index 33bbfd39b..91b960155 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [
@@ -82,6 +82,7 @@
     "css-loader": "^0.28.7",
     "es6-promise": "^4.0.5",
     "eslint": "^3.10.2",
+    "eslint-plugin-json": "^1.2.0",
     "extract-text-webpack-plugin": "^3.0.1",
     "file-loader": "^1.1.5",
     "file-save": "^0.2.0",
diff --git a/packages/cascader/src/main.vue b/packages/cascader/src/main.vue
index 8165be79a..c02b70799 100644
--- a/packages/cascader/src/main.vue
+++ b/packages/cascader/src/main.vue
@@ -10,9 +10,12 @@
     ]"
     @click="handleClick"
     @mouseenter="inputHover = true"
+    @focus="inputHover = true"
     @mouseleave="inputHover = false"
+    @blur="inputHover = false"
     ref="reference"
     v-clickoutside="handleClickoutside"
+    @keydown="handleKeydown"
   >
     <el-input
       ref="input"
@@ -63,6 +66,7 @@ import emitter from 'element-ui/src/mixins/emitter';
 import Locale from 'element-ui/src/mixins/locale';
 import { t } from 'element-ui/src/locale';
 import debounce from 'throttle-debounce/debounce';
+import { generateId } from 'element-ui/src/utils/util';
 
 const popperMixin = {
   props: {
@@ -149,6 +153,10 @@ export default {
     beforeFilter: {
       type: Function,
       default: () => (() => {})
+    },
+    hoverThreshold: {
+      type: Number,
+      default: 500
     }
   },
 
@@ -191,11 +199,15 @@ export default {
     },
     cascaderSize() {
       return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+    },
+    id() {
+      return generateId();
     }
   },
 
   watch: {
     menuVisible(value) {
+      this.$refs.input.$refs.input.setAttribute('aria-expanded', value);
       value ? this.showMenu() : this.hideMenu();
     },
     value(value) {
@@ -204,6 +216,10 @@ export default {
     currentValue(value) {
       this.dispatch('ElFormItem', 'el.form.change', [value]);
     },
+    currentLabels(value) {
+      const inputLabel = this.showAllLevels ? value.join('/') : value[value.length - 1] ;
+      this.$refs.input.$refs.input.setAttribute('value', inputLabel);
+    },
     options: {
       deep: true,
       handler(value) {
@@ -224,10 +240,13 @@ export default {
       this.menu.expandTrigger = this.expandTrigger;
       this.menu.changeOnSelect = this.changeOnSelect;
       this.menu.popperClass = this.popperClass;
+      this.menu.hoverThreshold = this.hoverThreshold;
       this.popperElm = this.menu.$el;
+      this.menu.$refs.menus[0].setAttribute('id', `cascader-menu-${this.id}`);
       this.menu.$on('pick', this.handlePick);
       this.menu.$on('activeItemChange', this.handleActiveItemChange);
       this.menu.$on('menuLeave', this.doDestroy);
+      this.menu.$on('closeInside', this.handleClickoutside);
     },
     showMenu() {
       if (!this.menu) {
@@ -245,6 +264,7 @@ export default {
     hideMenu() {
       this.inputValue = '';
       this.menu.visible = false;
+      this.$refs.input.focus();
     },
     handleActiveItemChange(value) {
       this.$nextTick(_ => {
@@ -252,6 +272,23 @@ export default {
       });
       this.$emit('active-item-change', value);
     },
+    handleKeydown(e) {
+      const keyCode = e.keyCode;
+      if (keyCode === 13) {
+        this.handleClick();
+      } else if (keyCode === 40) { // down
+        this.menuVisible = true; // 打开
+        setTimeout(() => {
+          const firstMenu = this.popperElm.querySelectorAll('.el-cascader-menu')[0];
+          firstMenu.querySelectorAll("[tabindex='-1']")[0].focus();
+        });
+        e.stopPropagation();
+        e.preventDefault();
+      } else if (keyCode === 27 || keyCode === 9) { // esc  tab
+        this.inputValue = '';
+        if (this.menu) this.menu.visible = false;
+      }
+    },
     handlePick(value, close = true) {
       this.currentValue = value;
       this.$emit('input', value);
diff --git a/packages/cascader/src/menu.vue b/packages/cascader/src/menu.vue
index 6785b78ae..70a4bd3c3 100644
--- a/packages/cascader/src/menu.vue
+++ b/packages/cascader/src/menu.vue
@@ -1,6 +1,7 @@
 <script>
   import { isDef } from 'element-ui/src/utils/shared';
   import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
+  import { generateId } from 'element-ui/src/utils/util';
 
   const copyArray = (arr, props) => {
     if (!arr || !Array.isArray(arr) || !props) return arr;
@@ -39,7 +40,8 @@
         value: [],
         expandTrigger: 'click',
         changeOnSelect: false,
-        popperClass: ''
+        popperClass: '',
+        hoverTimer: 0
       };
     },
 
@@ -94,6 +96,9 @@
           formatOptions(optionsCopy);
           return loadActiveOptions(optionsCopy);
         }
+      },
+      id() {
+        return generateId();
       }
     },
 
@@ -135,11 +140,41 @@
         activeOptions,
         visible,
         expandTrigger,
-        popperClass
+        popperClass,
+        hoverThreshold
       } = this;
+      let itemId = null;
+      let itemIndex = 0;
+
+      let hoverMenuRefs = {};
+      const hoverMenuHandler = e => {
+        const offsetX = e.offsetX;
+        const width = hoverMenuRefs.activeMenu.offsetWidth;
+        const height = hoverMenuRefs.activeMenu.offsetHeight;
+
+        if (e.target === hoverMenuRefs.activeItem) {
+          clearTimeout(this.hoverTimer);
+          const {activeItem} = hoverMenuRefs;
+          const offsetY_top = activeItem.offsetTop;
+          const offsetY_Bottom = offsetY_top + activeItem.offsetHeight;
+
+          hoverMenuRefs.hoverZone.innerHTML = `
+            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_top} L${width} 0 V${offsetY_top} Z" />
+            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_Bottom} L${width} ${height} V${offsetY_Bottom} Z" />
+          `;
+        } else {
+          if (!this.hoverTimer) {
+            this.hoverTimer = setTimeout(() => {
+              hoverMenuRefs.hoverZone.innerHTML = '';
+            }, hoverThreshold);
+          }
+        }
+      };
 
       const menus = this._l(activeOptions, (menu, menuIndex) => {
         let isFlat = false;
+        const menuId = `menu-${this.id}-${ menuIndex}`;
+        const ownsId = `menu-${this.id}-${ menuIndex + 1 }`;
         const items = this._l(menu, item => {
           const events = {
             on: {}
@@ -148,12 +183,52 @@
           if (item.__IS__FLAT__OPTIONS) isFlat = true;
 
           if (!item.disabled) {
+            // keydown up/down/left/right/enter
+            events.on.keydown = (ev) => {
+              const keyCode = ev.keyCode;
+              if (![37, 38, 39, 40, 13, 9, 27].indexOf(keyCode) > -1) {
+                return;
+              }
+              const currentEle = ev.target;
+              const parentEle = this.$refs.menus[menuIndex];
+              const menuItemList = parentEle.querySelectorAll("[tabindex='-1']");
+              const currentIndex = Array.prototype.indexOf.call(menuItemList, currentEle); // 当前索引
+              let nextIndex, nextMenu;
+              if ([38, 40].indexOf(keyCode) > -1) {
+                if (keyCode === 38) { // up键
+                  nextIndex = currentIndex !== 0 ? (currentIndex - 1) : currentIndex;
+                } else if (keyCode === 40) { // down
+                  nextIndex = currentIndex !== (menuItemList.length - 1) ? currentIndex + 1 : currentIndex;
+                }
+                menuItemList[nextIndex].focus();
+              } else if (keyCode === 37) { // left键
+                if (menuIndex !== 0) {
+                  const previousMenu = this.$refs.menus[menuIndex - 1];
+                  previousMenu.querySelector('[aria-expanded=true]').focus();
+                }
+              } else if (keyCode === 39) { // right
+                if (item.children) {
+                  // 有子menu 选择子menu的第一个menuitem
+                  nextMenu = this.$refs.menus[menuIndex + 1];
+                  nextMenu.querySelectorAll("[tabindex='-1']")[0].focus();
+                }
+              } else if (keyCode === 13) {
+                if (!item.children) {
+                  const id = currentEle.getAttribute('id');
+                  parentEle.setAttribute('aria-activedescendant', id);
+                  this.select(item, menuIndex);
+                  this.$nextTick(() => this.scrollMenu(this.$refs.menus[menuIndex]));
+                }
+              } else if (keyCode === 9 || keyCode === 27) { // esc tab
+                this.$emit('closeInside');
+              }
+            };
             if (item.children) {
               let triggerEvent = {
                 click: 'click',
                 hover: 'mouseenter'
               }[expandTrigger];
-              events.on[triggerEvent] = () => {
+              events.on[triggerEvent] = events.on['focus'] = () => { // focus 选中
                 this.activeItem(item, menuIndex);
                 this.$nextTick(() => {
                   // adjust self and next level
@@ -168,7 +243,10 @@
               };
             }
           }
-
+          if (!item.disabled && !item.children) { // no children set id
+            itemId = `${menuId}-${itemIndex}`;
+            itemIndex++;
+          }
           return (
             <li
               class={{
@@ -177,7 +255,14 @@
                 'is-active': item.value === activeValue[menuIndex],
                 'is-disabled': item.disabled
               }}
+              ref={item.value === activeValue[menuIndex] ? 'activeItem' : null}
               {...events}
+              tabindex= { item.disabled ? null : -1 }
+              role="menuitem"
+              aria-haspopup={ !!item.children }
+              aria-expanded={ item.value === activeValue[menuIndex] }
+              id = { itemId }
+              aria-owns = { !item.children ? null : ownsId }
             >
               {item.label}
             </li>
@@ -188,19 +273,68 @@
           menuStyle.minWidth = this.inputWidth + 'px';
         }
 
+        const isHoveredMenu = expandTrigger === 'hover' && activeValue.length - 1 === menuIndex;
+        const hoverMenuEvent = {
+          on: {
+          }
+        };
+
+        if (isHoveredMenu) {
+          hoverMenuEvent.on.mousemove = hoverMenuHandler;
+          menuStyle.position = 'relative';
+        }
+
         return (
           <ul
             class={{
               'el-cascader-menu': true,
               'el-cascader-menu--flexible': isFlat
             }}
+            {...hoverMenuEvent}
             style={menuStyle}
             refInFor
-            ref="menus">
+            ref="menus"
+            role="menu"
+            id = { menuId }
+          >
             {items}
+            {
+              isHoveredMenu
+              ? (<svg
+                ref="hoverZone"
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  height: '100%',
+                  width: '100%',
+                  left: 0,
+                  pointerEvents: 'none'
+                }}
+              ></svg>) : null
+            }
           </ul>
         );
       });
+
+      if (expandTrigger === 'hover') {
+        this.$nextTick(() => {
+          const activeItem = this.$refs.activeItem;
+
+          if (activeItem) {
+            const activeMenu = activeItem.parentElement;
+            const hoverZone = this.$refs.hoverZone;
+
+            hoverMenuRefs = {
+              activeMenu,
+              activeItem,
+              hoverZone
+            };
+          } else {
+            hoverMenuRefs = {};
+          }
+        });
+      }
+
       return (
         <transition name="el-zoom-in-top" on-before-enter={this.handleMenuEnter} on-after-leave={this.handleMenuLeave}>
           <div
diff --git a/packages/dropdown/src/dropdown-item.vue b/packages/dropdown/src/dropdown-item.vue
index 60411aac9..9af930a68 100644
--- a/packages/dropdown/src/dropdown-item.vue
+++ b/packages/dropdown/src/dropdown-item.vue
@@ -6,6 +6,8 @@
       'el-dropdown-menu__item--divided': divided
     }"
     @click="handleClick"
+    :aria-disabled="disabled"
+    :tabindex="disabled ? null : -1"
   >
     <slot></slot>
   </li>
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index 4099fe6df..9125c2964 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -4,6 +4,7 @@
   import Migrating from 'element-ui/src/mixins/migrating';
   import ElButton from 'element-ui/packages/button';
   import ElButtonGroup from 'element-ui/packages/button-group';
+  import { generateId } from 'element-ui/src/utils/util';
 
   export default {
     name: 'ElDropdown',
@@ -61,25 +62,43 @@
       return {
         timeout: null,
         visible: false,
-        triggerElm: null
+        triggerElm: null,
+        menuItems: null,
+        menuItemsArray: null,
+        dropdownElm: null,
+        focusing: false
       };
     },
 
     computed: {
       dropdownSize() {
         return this.size || (this.$ELEMENT || {}).size;
+      },
+      listId() {
+        return `dropdown-menu-${generateId()}`;
       }
     },
 
     mounted() {
       this.$on('menu-item-click', this.handleMenuItemClick);
       this.initEvent();
+      this.initAria();
     },
 
     watch: {
       visible(val) {
         this.broadcast('ElDropdownMenu', 'visible', val);
         this.$emit('visible-change', val);
+      },
+      focusing(val) {
+        const selfDefine = this.$el.querySelector('.el-dropdown-selfdefine');
+        if (selfDefine) { // 自定义
+          if (val) {
+            selfDefine.className += ' focusing';
+          } else {
+            selfDefine.className = selfDefine.className.replace('focusing', '');
+          }
+        }
       }
     },
 
@@ -100,6 +119,8 @@
       },
       hide() {
         if (this.triggerElm.disabled) return;
+        this.removeTabindex();
+        this.resetTabindex(this.triggerElm);
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
           this.visible = false;
@@ -109,18 +130,98 @@
         if (this.triggerElm.disabled) return;
         this.visible = !this.visible;
       },
+      handleTriggerKeyDown(ev) {
+        const keyCode = ev.keyCode;
+        if ([38, 40].indexOf(keyCode) > -1) { // up/down
+          this.removeTabindex();
+          this.resetTabindex(this.menuItems[0]);
+          this.menuItems[0].focus();
+          ev.preventDefault();
+          ev.stopPropagation();
+        } else if (keyCode === 13) { // space enter选中
+          this.handleClick();
+        } else if ([9, 27].indexOf(keyCode) > -1) { // tab || esc
+          this.hide();
+        }
+        return;
+      },
+      handleItemKeyDown(ev) {
+        const keyCode = ev.keyCode;
+        const target = ev.target;
+        const currentIndex = this.menuItemsArray.indexOf(target);
+        const max = this.menuItemsArray.length - 1;
+        let nextIndex;
+        if ([38, 40].indexOf(keyCode) > -1) { // up/down
+          if (keyCode === 38) { // up
+            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
+          } else { // down
+            nextIndex = currentIndex < max ? currentIndex + 1 : max;
+          }
+          this.removeTabindex();
+          this.resetTabindex(this.menuItems[nextIndex]);
+          this.menuItems[nextIndex].focus();
+          ev.preventDefault();
+          ev.stopPropagation();
+        } else if (keyCode === 13) { // enter选中
+          this.triggerElm.focus();
+          target.click();
+          if (!this.hideOnClick) { // click关闭
+            this.visible = false;
+          }
+        } else if ([9, 27].indexOf(keyCode) > -1) { // tab // esc
+          this.hide();
+          this.triggerElm.focus();
+        }
+        return;
+      },
+      resetTabindex(ele) { // 下次tab时组件聚焦元素
+        this.removeTabindex();
+        ele.setAttribute('tabindex', '0'); // 下次期望的聚焦元素
+      },
+      removeTabindex() {
+        this.triggerElm.setAttribute('tabindex', '-1');
+        this.menuItemsArray.forEach((item) => {
+          item.setAttribute('tabindex', '-1');
+        });
+      },
+      initAria() {
+        this.dropdownElm.setAttribute('id', this.listId);
+        this.triggerElm.setAttribute('aria-haspopup', 'list');
+        this.triggerElm.setAttribute('aria-controls', this.listId);
+        this.menuItems = this.dropdownElm.querySelectorAll("[tabindex='-1']");
+        this.menuItemsArray = Array.prototype.slice.call(this.menuItems);
+
+        if (!this.splitButton) { // 自定义
+          this.triggerElm.setAttribute('role', 'button');
+          this.triggerElm.setAttribute('tabindex', '0');
+          this.triggerElm.className += ' el-dropdown-selfdefine'; // 控制
+        }
+      },
       initEvent() {
-        let { trigger, show, hide, handleClick, splitButton } = this;
+        let { trigger, show, hide, handleClick, splitButton, handleTriggerKeyDown, handleItemKeyDown } = this;
         this.triggerElm = splitButton
           ? this.$refs.trigger.$el
           : this.$slots.default[0].elm;
 
+        let dropdownElm = this.dropdownElm = this.$slots.dropdown[0].elm;
+
+        this.triggerElm.addEventListener('keydown', handleTriggerKeyDown); // triggerElm keydown
+        dropdownElm.addEventListener('keydown', handleItemKeyDown, true); // item keydown
+        // 控制自定义元素的样式
+        if (!splitButton) {
+          this.triggerElm.addEventListener('focus', () => {
+            this.focusing = true;
+          });
+          this.triggerElm.addEventListener('blur', () => {
+            this.focusing = false;
+          });
+          this.triggerElm.addEventListener('click', () => {
+            this.focusing = false;
+          });
+        }
         if (trigger === 'hover') {
           this.triggerElm.addEventListener('mouseenter', show);
           this.triggerElm.addEventListener('mouseleave', hide);
-
-          let dropdownElm = this.$slots.dropdown[0].elm;
-
           dropdownElm.addEventListener('mouseenter', show);
           dropdownElm.addEventListener('mouseleave', hide);
         } else if (trigger === 'click') {
diff --git a/packages/menu/src/menu.vue b/packages/menu/src/menu.vue
index abb9506b1..978ea22d0 100644
--- a/packages/menu/src/menu.vue
+++ b/packages/menu/src/menu.vue
@@ -157,14 +157,14 @@
       },
       getColorChannels(color) {
         color = color.replace('#', '');
-        if (/^[1-9a-fA-F]{3}$/.test(color)) {
+        if (/^[0-9a-fA-F]{3}$/.test(color)) {
           color = color.split('');
           for (let i = 2; i >= 0; i--) {
             color.splice(i, 0, color[i]);
           }
           color = color.join('');
         }
-        if (/^[1-9a-fA-F]{6}$/.test(color)) {
+        if (/^[0-9a-fA-F]{6}$/.test(color)) {
           return {
             red: parseInt(color.slice(0, 2), 16),
             green: parseInt(color.slice(2, 4), 16),
diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
index b4adc7fcc..8cf59b572 100644
--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@@ -173,11 +173,13 @@
       },
       handleTitleMouseenter() {
         if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
-        this.$refs['submenu-title'].style.backgroundColor = this.rootMenu.hoverBackground;
+        const title = this.$refs['submenu-title'];
+        title && (title.style.backgroundColor = this.rootMenu.hoverBackground);
       },
       handleTitleMouseleave() {
         if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
-        this.$refs['submenu-title'].style.backgroundColor = this.rootMenu.backgroundColor || '';
+        const title = this.$refs['submenu-title'];
+        title && (title.style.backgroundColor = this.rootMenu.backgroundColor || '');
       }
     },
     created() {
diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue
index 882b76f4d..ed58c2c69 100644
--- a/packages/message/src/main.vue
+++ b/packages/message/src/main.vue
@@ -9,15 +9,15 @@
       v-show="visible"
       @mouseenter="clearTimer"
       @mouseleave="startTimer"
-      role="alertdialog"
+      role="alert"
     >
       <i :class="iconClass" v-if="iconClass"></i>
       <i :class="typeClass" v-else></i>
       <slot>
-        <p v-if="!dangerouslyUseHTMLString" class="el-message__content"  tabindex="0">{{ message }}</p>
-        <p v-else v-html="message" class="el-message__content"  tabindex="0"></p>
+        <p v-if="!dangerouslyUseHTMLString" class="el-message__content">{{ message }}</p>
+        <p v-else v-html="message" class="el-message__content"></p>
       </slot>
-      <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close" tabindex="0" role="button" aria-label="close" @keydown.enter.stop="close"></i>
+      <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></i>
     </div>
   </transition>
 </template>
@@ -44,9 +44,7 @@
         closed: false,
         timer: null,
         dangerouslyUseHTMLString: false,
-        center: false,
-        initFocus: null,
-        originFocus: null
+        center: false
       };
     },
 
@@ -87,18 +85,6 @@
         if (typeof this.onClose === 'function') {
           this.onClose(this);
         }
-        if (!this.originFocus || !this.originFocus.getBoundingClientRect) return;
-
-        // restore keyboard focus
-        const { top, left, bottom, right } = this.originFocus.getBoundingClientRect();
-        const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-        if (top >= 0 &&
-          left >= 0 &&
-          bottom <= viewportHeight &&
-          right <= viewportWidth) {
-          this.originFocus.focus();
-        }
       },
 
       clearTimer() {
@@ -115,24 +101,15 @@
         }
       },
       keydown(e) {
-        if (e.keyCode === 46 || e.keyCode === 8) {
-          this.clearTimer(); // detele 取消倒计时
-        } else if (e.keyCode === 27) { // esc关闭消息
+        if (e.keyCode === 27) { // esc关闭消息
           if (!this.closed) {
             this.close();
           }
-        } else {
-          this.startTimer(); // 恢复倒计时
         }
       }
     },
     mounted() {
       this.startTimer();
-      this.originFocus = document.activeElement;
-      this.initFocus = this.showClose ? this.$el.querySelector('.el-icon-close') : this.$el.querySelector('.el-message__content');
-      setTimeout(() => {
-        this.initFocus && this.initFocus.focus();
-      });
       document.addEventListener('keydown', this.keydown);
     },
     beforeDestroy() {
diff --git a/packages/notification/src/main.vue b/packages/notification/src/main.vue
index 4b98c1244..ee47e46be 100644
--- a/packages/notification/src/main.vue
+++ b/packages/notification/src/main.vue
@@ -6,7 +6,9 @@
       :style="positionStyle"
       @mouseenter="clearTimer()"
       @mouseleave="startTimer()"
-      @click="click">
+      @click="click"
+      role="alert"
+    >
       <i
         class="el-notification__icon"
         :class="[ typeClass, iconClass ]"
@@ -119,9 +121,19 @@
             }
           }, this.duration);
         }
+      },
+      keydown(e) {
+        if (e.keyCode === 46 || e.keyCode === 8) {
+          this.clearTimer(); // detele 取消倒计时
+        } else if (e.keyCode === 27) { // esc关闭消息
+          if (!this.closed) {
+            this.close();
+          }
+        } else {
+          this.startTimer(); // 恢复倒计时
+        }
       }
     },
-
     mounted() {
       if (this.duration > 0) {
         this.timer = setTimeout(() => {
@@ -130,6 +142,11 @@
           }
         }, this.duration);
       }
+      document.addEventListener('keydown', this.keydown);
+    },
+    beforeDestroy() {
+      document.removeEventListener('keydown', this.keydown);
     }
   };
 </script>
+
diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
index 88ff571a3..e2f05a869 100644
--- a/packages/popover/src/main.vue
+++ b/packages/popover/src/main.vue
@@ -6,7 +6,11 @@
         :class="[popperClass, content && 'el-popover--plain']"
         ref="popper"
         v-show="!disabled && showPopper"
-        :style="{ width: width + 'px' }">
+        :style="{ width: width + 'px' }"
+        role="tooltip"
+        :id="tooltipId"
+        :aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"
+      >
         <div class="el-popover__title" v-if="title" v-text="title"></div>
         <slot>{{ content }}</slot>
       </div>
@@ -14,10 +18,11 @@
     <slot name="reference"></slot>
   </span>
 </template>
-
 <script>
 import Popper from 'element-ui/src/utils/vue-popper';
 import { on, off } from 'element-ui/src/utils/dom';
+import { addClass, removeClass } from 'element-ui/src/utils/dom';
+import { generateId } from 'element-ui/src/utils/util';
 
 export default {
   name: 'ElPopover',
@@ -49,25 +54,35 @@ export default {
     }
   },
 
+  computed: {
+    tooltipId() {
+      return `el-popover-${generateId()}`;
+    }
+  },
   watch: {
-    showPopper(newVal, oldVal) {
-      newVal ? this.$emit('show') : this.$emit('hide');
-    },
-    '$refs.reference': {
-      deep: true,
-      handler(val) {
-        console.log(val);
-      }
+    showPopper(val) {
+      val ? this.$emit('show') : this.$emit('hide');
     }
   },
 
   mounted() {
-    let reference = this.reference || this.$refs.reference;
+    let reference = this.referenceElm = this.reference || this.$refs.reference;
     const popper = this.popper || this.$refs.popper;
 
     if (!reference && this.$slots.reference && this.$slots.reference[0]) {
       reference = this.referenceElm = this.$slots.reference[0].elm;
     }
+    // 可访问性
+    if (reference) {
+      addClass(reference, 'el-popover__reference');
+      reference.setAttribute('aria-describedby', this.tooltipId);
+      reference.setAttribute('tabindex', 0); // tab序列
+
+      this.trigger !== 'click' && on(reference, 'focus', this.handleFocus);
+      this.trigger !== 'click' && on(reference, 'blur', this.handleBlur);
+      on(reference, 'keydown', this.handleKeydown);
+      on(reference, 'click', this.handleClick);
+    }
     if (this.trigger === 'click') {
       on(reference, 'click', this.doToggle);
       on(document, 'click', this.handleDocumentClick);
@@ -114,6 +129,17 @@ export default {
     doClose() {
       this.showPopper = false;
     },
+    handleFocus() {
+      addClass(this.referenceElm, 'focusing');
+      this.showPopper = true;
+    },
+    handleClick() {
+      removeClass(this.referenceElm, 'focusing');
+    },
+    handleBlur() {
+      removeClass(this.referenceElm, 'focusing');
+      this.showPopper = false;
+    },
     handleMouseEnter() {
       clearTimeout(this._timer);
       if (this.openDelay) {
@@ -124,6 +150,11 @@ export default {
         this.showPopper = true;
       }
     },
+    handleKeydown(ev) {
+      if (ev.keyCode === 27) { // esc
+        this.doClose();
+      }
+    },
     handleMouseLeave() {
       clearTimeout(this._timer);
       this._timer = setTimeout(() => {
diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
index b5694cd88..fdb0f0bea 100644
--- a/packages/radio/src/radio-group.vue
+++ b/packages/radio/src/radio-group.vue
@@ -53,9 +53,10 @@
     },
     mounted() {
       // 当radioGroup没有默认选项时，第一个可以选中Tab导航
-      let radios = this.$el.querySelectorAll('[type=radio]');
-      if (![].some.call(radios, radio => radio.checked)) {
-        this.$el.querySelectorAll('[role=radio]')[0].tabIndex = 0;
+      const radios = this.$el.querySelectorAll('[type=radio]');
+      const firstLabel = this.$el.querySelectorAll('[role=radio]')[0];
+      if (![].some.call(radios, radio => radio.checked) && firstLabel) {
+        firstLabel.tabIndex = 0;
       }
     },
     methods: {
diff --git a/packages/select/src/option-group.vue b/packages/select/src/option-group.vue
index a28b6b542..50cddd3f5 100644
--- a/packages/select/src/option-group.vue
+++ b/packages/select/src/option-group.vue
@@ -1,6 +1,6 @@
 <template>
-  <ul class="el-select-group__wrap">
-    <li class="el-select-group__title" v-show="visible">{{ label }}</li>
+  <ul class="el-select-group__wrap" v-show="visible">
+    <li class="el-select-group__title">{{ label }}</li>
     <li>
       <ul class="el-select-group">
         <slot></slot>
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 83d47007c..3a239e878 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -9,7 +9,12 @@
       @click.stop="toggleMenu"
       ref="tags"
       :style="{ 'max-width': inputWidth - 32 + 'px' }">
-      <transition-group @after-leave="resetInputHeight">
+      <span
+        class="el-select__multiple-text"
+        v-if="collapseTags">
+        {{ multipleText }}
+      </span>
+      <transition-group @after-leave="resetInputHeight" v-if="!collapseTags">
         <el-tag
           v-for="item in selected"
           :key="getValueKey(item)"
@@ -29,6 +34,7 @@
         :class="[selectSize ? `is-${ selectSize }` : '']"
         :disabled="disabled"
         @focus="handleFocus"
+        @click.stop
         @keyup="managePlaceholder"
         @keydown="resetInputState"
         @keydown.down.prevent="navigateOptions('next')"
@@ -183,6 +189,14 @@
 
       selectSize() {
         return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+
+      multipleText() {
+        const selected = this.selected;
+        if (!selected || !selected.length) return '';
+        const length = selected.length;
+        const countText = length > 1 ? `(+${ selected.length - 1 })` : '';
+        return `${ selected[0].currentLabel } ${ countText }`;
       }
     },
 
@@ -231,7 +245,8 @@
       valueKey: {
         type: String,
         default: 'value'
-      }
+      },
+      collapseTags: Boolean
     },
 
     data() {
@@ -534,6 +549,7 @@
       },
 
       resetInputHeight() {
+        if (this.collapseTags) return;
         this.$nextTick(() => {
           if (!this.$refs.reference) return;
           let inputChildNodes = this.$refs.reference.$el.childNodes;
diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js
index 84955c0be..6a745bce5 100644
--- a/packages/table/src/table-header.js
+++ b/packages/table/src/table-header.js
@@ -119,12 +119,10 @@ export default {
                     {
                       column.sortable
                         ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
-                            <span class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
-                              <i class="el-icon-sort-up"></i>
-                            </span>
-                            <span class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
-                              <i class="el-icon-sort-down"></i>
-                            </span>
+                            <i class="sort-caret ascending el-icon-caret-top" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
+                            </i>
+                            <i class="sort-caret descending el-icon-caret-bottom" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
+                            </i>
                           </span>
                         : ''
                     }
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index 41442dde6..985119365 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
@@ -28,7 +28,8 @@
   "devDependencies": {
     "gulp": "^3.9.1",
     "gulp-cssmin": "^0.1.7",
-    "gulp-sass": "^3.1.0"
+    "gulp-sass": "^3.1.0",
+    "gulp-autoprefixer": "^4.0.0"
   },
   "dependencies": {}
 }
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index e23551f14..fed5414f7 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -128,7 +128,7 @@
     line-height: 1.5;
     box-sizing: border-box;
     cursor: pointer;
-
+    outline: none;
     @include m(extensible) {
       &:after {
         font-family: 'element-icons';
@@ -154,7 +154,7 @@
       color: $--select-option-selected;
     }
 
-    &:hover {
+    &:hover, &:focus:not(:active) {
       background-color: $--select-option-hover-background;
     }
 
diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
index e2d174bdf..ead1218dc 100644
--- a/packages/theme-chalk/src/checkbox.scss
+++ b/packages/theme-chalk/src/checkbox.scss
@@ -17,6 +17,9 @@
     padding: $--checkbox-bordered-padding;
     border-radius: $--border-radius-base;
     border: $--border-base;
+    box-sizing: border-box;
+    line-height: normal;
+    height: $--checkbox-bordered-height;
 
     &.is-checked {
       border-color: $--color-primary;
@@ -34,6 +37,7 @@
     &.el-checkbox--medium {
       padding: $--checkbox-bordered-medium-padding;
       border-radius: $--button-medium-border-radius;
+      height: $--checkbox-bordered-medium-height;
 
       .el-checkbox__label {
         line-height: 17px;
@@ -49,6 +53,7 @@
     &.el-checkbox--small {
       padding: $--checkbox-bordered-small-padding;
       border-radius: $--button-small-border-radius;
+      height: $--checkbox-bordered-small-height;
 
       .el-checkbox__label {
         line-height: 15px;
@@ -69,6 +74,7 @@
     &.el-checkbox--mini {
       padding: $--checkbox-bordered-mini-padding;
       border-radius: $--button-mini-border-radius;
+      height: $--checkbox-bordered-mini-height;
 
       .el-checkbox__label {
         line-height: 12px;
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index f6b550228..0bcc38131 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -137,16 +137,20 @@ $--checkbox-checked-icon-color: $--fill-base !default;
 
 $--checkbox-input-border-color-hover: $--color-primary !default;
 
+$--checkbox-bordered-height: 40px !default;
 $--checkbox-bordered-padding: 9px 20px 9px 10px !default;
 $--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
-$--checkbox-bordered-small-padding: 3px 15px 7px 10px !default;
-$--checkbox-bordered-mini-padding: 1px 15px 5px 10px !default;
+$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
+$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
 $--checkbox-bordered-medium-input-height: 14px !default;
 $--checkbox-bordered-medium-input-width: 14px !default;
+$--checkbox-bordered-medium-height: 36px !default;
 $--checkbox-bordered-small-input-height: 12px !default;
 $--checkbox-bordered-small-input-width: 12px !default;
+$--checkbox-bordered-small-height: 32px !default;
 $--checkbox-bordered-mini-input-height: 12px !default;
 $--checkbox-bordered-mini-input-width: 12px !default;
+$--checkbox-bordered-mini-height: 28px !default;
 
 $--checkbox-button-font-size: $--font-size-base !default;
 $--checkbox-button-checked-fill: $--color-primary !default;
@@ -183,16 +187,20 @@ $--radio-checked-icon-color: $--color-primary !default;
 
 $--radio-input-border-color-hover: $--color-primary !default;
 
-$--radio-bordered-padding: 10px 20px 10px 10px !default;
-$--radio-bordered-medium-padding: 8px 20px 8px 10px !default;
-$--radio-bordered-small-padding: 6px 15px 6px 10px !default;
-$--radio-bordered-mini-padding: 4px 15px 4px 10px !default;
+$--radio-bordered-height: 40px !default;
+$--radio-bordered-padding: 12px 20px 0 10px !default;
+$--radio-bordered-medium-padding: 10px 20px 0 10px !default;
+$--radio-bordered-small-padding: 8px 15px 0 10px !default;
+$--radio-bordered-mini-padding: 6px 15px 0 10px !default;
 $--radio-bordered-medium-input-height: 14px !default;
 $--radio-bordered-medium-input-width: 14px !default;
+$--radio-bordered-medium-height: 36px !default;
 $--radio-bordered-small-input-height: 12px !default;
 $--radio-bordered-small-input-width: 12px !default;
+$--radio-bordered-small-height: 32px !default;
 $--radio-bordered-mini-input-height: 12px !default;
 $--radio-bordered-mini-input-width: 12px !default;
+$--radio-bordered-mini-height: 28px !default;
 
 $--radio-button-font-size: $--font-size-base !default;
 $--radio-button-checked-fill: $--color-primary !default;
diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
index 4800e6b6c..5871f83d1 100644
--- a/packages/theme-chalk/src/dropdown.scss
+++ b/packages/theme-chalk/src/dropdown.scss
@@ -50,6 +50,12 @@
     font-size: 12px;
     margin: 0 3px;
   }
+
+  .el-dropdown-selfdefine { // 自定义
+    &:focus:active, &:focus:not(.focusing) {
+      outline-width: 0;
+    }
+  }
 }
 
 @include b(dropdown-menu) {
@@ -72,8 +78,8 @@
     font-size: $--font-size-base;
     color: $--color-text-regular;
     cursor: pointer;
-
-    &:not(.is-disabled):hover {
+    outline: none;
+    &:not(.is-disabled):hover, &:focus {
       background-color: $--dropdown-menuItem-hover-fill;
       color: $--dropdown-menuItem-hover-color;
     }
diff --git a/packages/theme-chalk/src/popover.scss b/packages/theme-chalk/src/popover.scss
index a88fc09ea..65cafc098 100644
--- a/packages/theme-chalk/src/popover.scss
+++ b/packages/theme-chalk/src/popover.scss
@@ -27,4 +27,10 @@
     line-height: 1;
     margin-bottom: 12px;
   }
+
+  @include e(reference) {
+    &:focus:not(.focusing), &:focus:hover {
+      outline-width: 0;
+    }
+  }
 }
diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss
index a3d0791da..6332e9c06 100644
--- a/packages/theme-chalk/src/radio.scss
+++ b/packages/theme-chalk/src/radio.scss
@@ -19,6 +19,8 @@
     padding: $--radio-bordered-padding;
     border-radius: $--border-radius-base;
     border: $--border-base;
+    box-sizing: border-box;
+    height: $--radio-bordered-height;
 
     &.is-checked {
       border-color: $--color-primary;
@@ -38,6 +40,7 @@
     &.is-bordered {
       padding: $--radio-bordered-medium-padding;
       border-radius: $--button-medium-border-radius;
+      height: $--radio-bordered-medium-height;
       .el-radio__label {
         font-size: $--button-medium-font-size;
       }
@@ -51,6 +54,7 @@
     &.is-bordered {
       padding: $--radio-bordered-small-padding;
       border-radius: $--button-small-border-radius;
+      height: $--radio-bordered-small-height;
       .el-radio__label {
         font-size: $--button-small-font-size;
       }
@@ -64,6 +68,7 @@
     &.is-bordered {
       padding: $--radio-bordered-mini-padding;
       border-radius: $--button-mini-border-radius;
+      height: $--radio-bordered-mini-height;
       .el-radio__label {
         font-size: $--button-mini-font-size;
       }
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index 1865be21f..a585a7dad 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -1,4 +1,5 @@
 @import "mixins/mixins";
+@import "mixins/utils";
 @import "common/var";
 @import "select-dropdown";
 @import "input";
@@ -88,6 +89,14 @@
     }
   }
 
+  @include e(multiple-text) {
+    margin-left: 15px;
+    color: $--input-color;
+    font-size: $--font-size-base;
+    display: block;
+    @include utils-ellipsis;
+  }
+
   @include e(close) {
     cursor: pointer;
     position: absolute;
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index eeb5cbca8..b61b451ee 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -426,20 +426,29 @@
   }
 
   .caret-wrapper {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    height: 13px;
-    width: 24px;
+    position: absolute;
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
     cursor: pointer;
     overflow: initial;
   }
 
   .sort-caret {
-    color: $--icon-color-base;
+    color: $--color-text-placeholder;
     width: 14px;
     overflow: hidden;
-    font-size: 13px;
+    font-size: 15px;
+    position: absolute;
+    left: 4px;
+
+    &.ascending {
+      top: 1px;
+    }
+
+    &.descending {
+      bottom: 1px;
+    }
   }
 
   .ascending .sort-caret.ascending {
diff --git a/packages/theme-chalk/src/tooltip.scss b/packages/theme-chalk/src/tooltip.scss
index 6679440fd..33c4067f4 100644
--- a/packages/theme-chalk/src/tooltip.scss
+++ b/packages/theme-chalk/src/tooltip.scss
@@ -2,6 +2,9 @@
 @import "common/var";
 
 @include b(tooltip) {
+  &:focus:not(.focusing), &:focus:hover {
+    outline-width: 0;
+  }
   @include e(popper) {
     position: absolute;
     border-radius: 4px;
diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss
index 4018ea441..e8639656b 100644
--- a/packages/theme-chalk/src/tree.scss
+++ b/packages/theme-chalk/src/tree.scss
@@ -25,7 +25,12 @@
 
 @include b(tree-node) {
   white-space: nowrap;
-
+  outline: none;
+  &:focus { /* focus */
+    > .el-tree-node__content {
+      background-color: $--tree-node-hover-color;
+    }
+  }
   @include e(content) {
     display: flex;
     align-items: center;
diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js
index 2d9b942c1..d59b3da2c 100644
--- a/packages/tooltip/src/main.js
+++ b/packages/tooltip/src/main.js
@@ -1,6 +1,7 @@
 import Popper from 'element-ui/src/utils/vue-popper';
 import debounce from 'throttle-debounce/debounce';
 import { getFirstComponentChild } from 'element-ui/src/utils/vdom';
+import { generateId } from 'element-ui/src/utils/util';
 import Vue from 'vue';
 
 export default {
@@ -48,10 +49,15 @@ export default {
 
   data() {
     return {
-      timeoutPending: null
+      timeoutPending: null,
+      focusing: false
     };
   },
-
+  computed: {
+    tooltipId() {
+      return `el-tooltip-${generateId()}`;
+    }
+  },
   beforeCreate() {
     if (this.$isServer) return;
 
@@ -75,6 +81,9 @@ export default {
             onMouseleave={ () => { this.setExpectedState(false); this.debounceClose(); } }
             onMouseenter= { () => { this.setExpectedState(true); } }
             ref="popper"
+            role="tooltip"
+            id={this.tooltipId}
+            aria-hidden={ (this.disabled || !this.showPopper) ? 'true' : 'false' }
             v-show={!this.disabled && this.showPopper}
             class={
               ['el-tooltip__popper', 'is-' + this.effect, this.popperClass]
@@ -87,24 +96,38 @@ export default {
     if (!this.$slots.default || !this.$slots.default.length) return this.$slots.default;
 
     const vnode = getFirstComponentChild(this.$slots.default);
+
     if (!vnode) return vnode;
+
     const data = vnode.data = vnode.data || {};
     const on = vnode.data.on = vnode.data.on || {};
     const nativeOn = vnode.data.nativeOn = vnode.data.nativeOn || {};
 
     data.staticClass = this.concatClass(data.staticClass, 'el-tooltip');
-    on.mouseenter = this.addEventHandle(on.mouseenter, this.show);
-    on.mouseleave = this.addEventHandle(on.mouseleave, this.hide);
-    nativeOn.mouseenter = this.addEventHandle(nativeOn.mouseenter, this.show);
-    nativeOn.mouseleave = this.addEventHandle(nativeOn.mouseleave, this.hide);
-
+    nativeOn.mouseenter = on.mouseenter = this.addEventHandle(on.mouseenter, this.show);
+    nativeOn.mouseleave = on.mouseleave = this.addEventHandle(on.mouseleave, this.hide);
+    nativeOn.focus = on.focus = this.addEventHandle(on.focus, this.handleFocus);
+    nativeOn.blur = on.blur = this.addEventHandle(on.blur, this.handleBlur);
+    nativeOn.click = on.click = this.addEventHandle(on.click, () => { this.focusing = false; });
     return vnode;
   },
 
   mounted() {
     this.referenceElm = this.$el;
+    if (this.$el.nodeType === 1) {
+      this.$el.setAttribute('aria-describedby', this.tooltipId);
+      this.$el.setAttribute('tabindex', 0);
+    }
+  },
+  watch: {
+    focusing(val) {
+      if (val) {
+        this.referenceElm.className += ' focusing';
+      } else {
+        this.referenceElm.className = this.referenceElm.className.replace('focusing', '');
+      }
+    }
   },
-
   methods: {
     show() {
       this.setExpectedState(true);
@@ -115,7 +138,14 @@ export default {
       this.setExpectedState(false);
       this.debounceClose();
     },
-
+    handleFocus() {
+      this.focusing = true;
+      this.show();
+    },
+    handleBlur() {
+      this.focusing = false;
+      this.hide();
+    },
     addEventHandle(old, fn) {
       if (!old) {
         return fn;
diff --git a/packages/tree/src/model/tree-store.js b/packages/tree/src/model/tree-store.js
index 8afe20e9b..efc08e88b 100644
--- a/packages/tree/src/model/tree-store.js
+++ b/packages/tree/src/model/tree-store.js
@@ -198,9 +198,10 @@ export default class TreeStore {
     const node = this.nodesMap[key];
     if (!node) return;
     const childNodes = node.childNodes;
-    childNodes.forEach(child => {
+    for (let i = childNodes.length - 1; i >= 0; i--) {
+      const child = childNodes[i];
       this.remove(child.data);
-    });
+    }
     for (let i = 0, j = data.length; i < j; i++) {
       const child = data[i];
       this.append(child, node.data);
diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue
index b068c304e..726344e18 100644
--- a/packages/tree/src/tree-node.vue
+++ b/packages/tree/src/tree-node.vue
@@ -1,12 +1,21 @@
 <template>
-  <div class="el-tree-node"
+  <div
+    class="el-tree-node"
     @click.stop="handleClick"
     v-show="node.visible"
     :class="{
       'is-expanded': expanded,
       'is-current': tree.store.currentNode === node,
-      'is-hidden': !node.visible
-    }">
+      'is-hidden': !node.visible,
+      'is-focusable': !node.disabled,
+      'is-checked': !node.disabled && node.checked
+    }"
+    role="treeitem"
+    tabindex="-1"
+    :aria-expanded="expanded"
+    :aria-disabled="node.disabled"
+    :aria-checked="node.checked"
+  >
     <div class="el-tree-node__content"
       :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
       <span
@@ -20,7 +29,8 @@
         :indeterminate="node.indeterminate"
         :disabled="!!node.disabled"
         @click.native.stop
-        @change="handleCheckChange">
+        @change="handleCheckChange"
+      >
       </el-checkbox>
       <span
         v-if="node.loading"
@@ -32,7 +42,10 @@
       <div
         class="el-tree-node__children"
         v-if="childNodeRendered"
-        v-show="expanded">
+        v-show="expanded"
+        role="group"
+        :aria-expanded="expanded"
+      >
         <el-tree-node
           :render-content="renderContent"
           v-for="child in node.childNodes"
diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue
index b8cc1085a..43ad448c9 100644
--- a/packages/tree/src/tree.vue
+++ b/packages/tree/src/tree.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="el-tree" :class="{ 'el-tree--highlight-current': highlightCurrent }">
+  <div
+    class="el-tree"
+    :class="{ 'el-tree--highlight-current': highlightCurrent }"
+    role="tree"
+  >
     <el-tree-node
       v-for="child in root.childNodes"
       :node="child"
@@ -33,7 +37,9 @@
       return {
         store: null,
         root: null,
-        currentNode: null
+        currentNode: null,
+        treeItems: null,
+        checkboxItems: []
       };
     },
 
@@ -101,6 +107,9 @@
         get() {
           return this.data;
         }
+      },
+      treeItemArray() {
+        return Array.prototype.slice.call(this.treeItems);
       }
     },
 
@@ -115,6 +124,11 @@
       },
       data(newVal) {
         this.store.setData(newVal);
+      },
+      checkboxItems(val) {
+        Array.prototype.forEach.call(val, (checkbox) => {
+          checkbox.setAttribute('tabindex', -1);
+        });
       }
     },
 
@@ -171,6 +185,42 @@
       updateKeyChildren(key, data) {
         if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');
         this.store.updateChildren(key, data);
+      },
+      initTabindex() {
+        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
+        this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
+        const checkedItem = this.$el.querySelectorAll('.is-checked[role=treeitem]');
+        if (checkedItem.length) {
+          checkedItem[0].setAttribute('tabindex', 0);
+          return;
+        }
+        this.treeItems[0].setAttribute('tabindex', 0);
+      },
+      handelKeydown(ev) {
+        const currentItem = ev.target;
+        const keyCode = ev.keyCode;
+        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
+        const currentIndex = this.treeItemArray.indexOf(currentItem);
+        let nextIndex;
+        if ([38, 40].indexOf(keyCode) > -1) { // up、down
+          if (keyCode === 38) { // up
+            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
+          } else {
+            nextIndex = (currentIndex < this.treeItemArray.length - 1) ? currentIndex + 1 : 0;
+          }
+          this.treeItemArray[nextIndex].focus(); // 选中
+        }
+        const hasInput = currentItem.querySelector('[type="checkbox"]');
+        if ([37, 39].indexOf(keyCode) > -1) { // left、right 展开
+          currentItem.click(); // 选中
+        }
+        if ([13, 32].indexOf(keyCode) > -1) { // space enter选中checkbox
+          if (hasInput) {
+            hasInput.click();
+          }
+          ev.stopPropagation();
+          ev.preventDefault();
+        }
       }
     },
 
@@ -194,6 +244,14 @@
       });
 
       this.root = this.store.root;
+    },
+    mounted() {
+      this.initTabindex();
+      this.$el.addEventListener('keydown', this.handelKeydown);
+    },
+    updated() {
+      this.treeItems = this.$el.querySelectorAll('[role=treeitem]');
+      this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
     }
   };
 </script>
diff --git a/packages/upload/src/ajax.js b/packages/upload/src/ajax.js
index 0d62e0855..470505ae4 100644
--- a/packages/upload/src/ajax.js
+++ b/packages/upload/src/ajax.js
@@ -1,9 +1,9 @@
 function getError(action, option, xhr) {
   let msg;
   if (xhr.response) {
-    msg = `${xhr.status} ${xhr.response.error || xhr.response}`;
+    msg = `${xhr.response.error || xhr.response}`;
   } else if (xhr.responseText) {
-    msg = `${xhr.status} ${xhr.responseText}`;
+    msg = `${xhr.responseText}`;
   } else {
     msg = `fail to post ${action} ${xhr.status}`;
   }
diff --git a/src/index.js b/src/index.js
index 0a07d6841..956f6b3a6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -173,7 +173,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 };
 
 module.exports = {
-  version: '2.0.3',
+  version: '2.0.4',
   locale: locale.use,
   i18n: locale.i18n,
   install,
diff --git a/src/utils/clickoutside.js b/src/utils/clickoutside.js
index a3d32b009..e0e69b16e 100644
--- a/src/utils/clickoutside.js
+++ b/src/utils/clickoutside.js
@@ -65,5 +65,6 @@ export default {
         break;
       }
     }
+    delete el[ctx];
   }
 };
diff --git a/test/unit/specs/upload.spec.js b/test/unit/specs/upload.spec.js
index 5d191a18b..a1c6134b1 100644
--- a/test/unit/specs/upload.spec.js
+++ b/test/unit/specs/upload.spec.js
@@ -41,7 +41,7 @@ describe('ajax', () => {
   });
   it('40x code should be error', done => {
     option.onError = e => {
-      expect(e.toString()).to.contain('404 Not found');
+      expect(e.toString()).to.contain('Not found');
       done();
     };