Tooltip, Dropdown, Popover: support tabindex attribute (#15167)

examples/docs/en-US/dropdown.md

@@ -278,6 +278,7 @@ Besides default size, Dropdown component provides three additional sizes for you
 | hide-on-click | whether to hide menu after clicking menu-item     | boolean          | — | true |
 | show-timeout | Delay time before show a dropdown (only works when trigger is `hover`) | number | — | 250 |
 | hide-timeout | Delay time before hide a dropdown (only works when trigger is `hover`) | number | — | 150 |
+| tabindex     | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | number | — | 0 |
 
 ### Dropdown Slots
 

examples/docs/en-US/popover.md

@@ -152,6 +152,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
 |  popper-options        | parameters for [popper.js](https://popper.js.org/documentation.html) | object            | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 |  popper-class        |  custom class name for popover | string | — | — |
 |  open-delay        | delay of appearance when `trigger` is hover, in milliseconds | number | — | — |
+|  tabindex          | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |
 
 ### Slot
 | Name | Description |

examples/docs/en-US/tooltip.md

@@ -193,3 +193,4 @@ Disabled form elements are not supported for Tooltip, more information can be fo
 |  popper-class  |  custom class name for Tooltip's popper | string | — | — |
 | enterable | whether the mouse can enter the tooltip | Boolean | — | true |
 | hide-after | timeout in milliseconds to hide tooltip | number | — | 0 |
+| tabindex   | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |

examples/docs/es/dropdown.md

@@ -280,6 +280,7 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
 | hide-on-click | si se oculta el menú después de hacer clic en el elemento | boolean | —                                        | true        |
 | show-timeout  | Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara `hover`) | number  | —                                        | 250         |
 | hide-timeout  | Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara `hover`) | number  | —                                        | 150         |
+| tabindex      | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown   | number              |          —         | 0           |
 
 ### Dropdown Slots
 

examples/docs/es/popover.md

@@ -151,6 +151,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 | popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object         | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | popper-class   | clase propia para popover                | string         | —                                        | —                                        |
 | open-delay     | retraso de la aparición cuando `trigger` es hover, en milisegundos | number         | —                                        | —                                        |
+| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover  |   number           |      —      |  0    |
 
 ### Slot
 | Nombre    | Descripción                          |

examples/docs/es/tooltip.md

@@ -194,3 +194,4 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
 | popper-class   | nombre de clase personalizada para el popper del Tooltip | string  | —                                        | —                                        |
 | enterable      | si el mouse puede entrar al Tooltip      | Boolean | —                                        | true                                     |
 | hide-after     | tiempo a esperar en milisegundos para esconder el Tooltip | number  | —                                        | 0                                        |
+| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number   | —                      | 0              |

examples/docs/fr-FR/dropdown.md

@@ -280,6 +280,7 @@ En plus de la taille par défaut, le composant Dropdown propose trois autres tai
 | hide-on-click | Si le menu doit disparaître après avoir cliqué sur un élément.     | boolean          | — | true |
 | show-timeout | Délai avant d'afficher le menu (ne marche que si `trigger` est `hover`) | number | — | 250 |
 | hide-timeout | Délai avant de cacher le menu (ne marche que si `trigger` est `hover`) | number | — | 150 |
+| tabindex     | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | number | — | 0 |
 
 ### Dropdown Slots
 

examples/docs/fr-FR/popover.md

@@ -153,6 +153,7 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
 | popper-options | Paramètres pour [popper.js](https://popper.js.org/documentation.html). | object | Référez-vous à [popper.js](https://popper.js.org/documentation.html). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | popper-class | Classe du popover. | string | — | — |
 | open-delay | Délai d'affichage, lorsque `trigger` est 'hover', en millisecondes. | number | — | — |
+| tabindex   | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |
 
 ### Slot
 

examples/docs/fr-FR/tooltip.md

@@ -194,3 +194,4 @@ Les éléments de formulaire désactivés ne sont pas supportés par Tooltip, pl
 | popper-class | Classe du popper de Tooltip. | string | — | — |
 | enterable | Si la souris peut entrer dans la Tooltip. | Boolean | — | true |
 | hide-after | Délai avant disparition. | number | — | 0 |
+| tabindex   | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |

examples/docs/zh-CN/dropdown.md

@@ -282,6 +282,7 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
 | hide-on-click | 是否在点击菜单项后隐藏菜单     | boolean          | — | true |
 | show-timeout  | 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 250 |
 | hide-timeout  | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 150 |
+| tabindex      | Dropdown 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
 
 ### Dropdown Slots
 

examples/docs/zh-CN/popover.md

@@ -149,6 +149,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 |  popper-options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | popper-class | 为 popper 添加类名 | String | — | — |
 | open-delay | 触发方式为 hover 时的显示延迟，单位为毫秒 | Number | — | — |
+| tabindex   | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
 
 ### Slot
 | 参数 | 说明 |

examples/docs/zh-CN/tooltip.md

@@ -174,3 +174,4 @@ tooltip 内不支持 disabled form 元素，参考[MDN](https://developer.mozill
 | popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |
 | enterable | 鼠标是否可进入到 tooltip 中 | Boolean | — | true |
 | hide-after | Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏 | number | — | 0 |
+| tabindex   | Tooltip 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |

packages/dropdown/src/dropdown.vue

@@ -55,6 +55,10 @@
       hideTimeout: {
         type: Number,
         default: 150
+      },
+      tabindex: {
+        type: Number,
+        default: 0
       }
     },
 
@@ -116,7 +120,9 @@
       hide() {
         if (this.triggerElm.disabled) return;
         this.removeTabindex();
-        this.resetTabindex(this.triggerElm);
+        if (this.tabindex >= 0) {
+          this.resetTabindex(this.triggerElm);
+        }
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
           this.visible = false;
@@ -162,14 +168,14 @@
           ev.preventDefault();
           ev.stopPropagation();
         } else if (keyCode === 13) { // enter选中
-          this.triggerElm.focus();
+          this.triggerElmFocus();
           target.click();
           if (this.hideOnClick) { // click关闭
             this.visible = false;
           }
         } else if ([9, 27].indexOf(keyCode) > -1) { // tab // esc
           this.hide();
-          this.triggerElm.focus();
+          this.triggerElmFocus();
         }
       },
       resetTabindex(ele) { // 下次tab时组件聚焦元素
@@ -189,7 +195,7 @@
 
         if (!this.splitButton) { // 自定义
           this.triggerElm.setAttribute('role', 'button');
-          this.triggerElm.setAttribute('tabindex', '0');
+          this.triggerElm.setAttribute('tabindex', this.tabindex);
           this.triggerElm.setAttribute('class', (this.triggerElm.getAttribute('class') || '') + ' el-dropdown-selfdefine'); // 控制
         }
       },
@@ -230,7 +236,7 @@
         }
         this.$emit('command', command, instance);
       },
-      focus() {
+      triggerElmFocus() {
         this.triggerElm.focus && this.triggerElm.focus();
       },
       initDomOperation() {

packages/popover/src/main.vue

@@ -58,6 +58,10 @@ export default {
     transition: {
       type: String,
       default: 'fade-in-linear'
+    },
+    tabindex: {
+      type: Number,
+      default: 0
     }
   },
 
@@ -86,7 +90,7 @@ export default {
     if (reference) {
       addClass(reference, 'el-popover__reference');
       reference.setAttribute('aria-describedby', this.tooltipId);
-      reference.setAttribute('tabindex', 0); // tab序列
+      reference.setAttribute('tabindex', this.tabindex); // tab序列
       popper.setAttribute('tabindex', 0);
 
       if (this.trigger !== 'click') {
@@ -113,6 +117,9 @@ export default {
       on(reference, 'mouseleave', this.handleMouseLeave);
       on(popper, 'mouseleave', this.handleMouseLeave);
     } else if (this.trigger === 'focus') {
+      if (this.tabindex < 0) {
+        console.warn('[Element Warn][Popover]a negative taindex means that the element cannot be focused by tab key');
+      }
       if (reference.querySelector('input, textarea')) {
         on(reference, 'focusin', this.doShow);
         on(reference, 'focusout', this.doClose);

packages/tooltip/src/main.js

@@ -48,6 +48,10 @@ export default {
     hideAfter: {
       type: Number,
       default: 0
+    },
+    tabindex: {
+      type: Number,
+      default: 0
     }
   },
 
@@ -226,10 +230,12 @@ export default {
 
   destroyed() {
     const reference = this.referenceElm;
-    off(reference, 'mouseenter', this.show);
-    off(reference, 'mouseleave', this.hide);
-    off(reference, 'focus', this.handleFocus);
-    off(reference, 'blur', this.handleBlur);
-    off(reference, 'click', this.removeFocusing);
+    if (reference.nodeType === 1) {
+      off(reference, 'mouseenter', this.show);
+      off(reference, 'mouseleave', this.hide);
+      off(reference, 'focus', this.handleFocus);
+      off(reference, 'blur', this.handleBlur);
+      off(reference, 'click', this.removeFocusing);
+    }
   }
 };

types/dropdown.d.ts

@@ -23,4 +23,7 @@ export declare class ElDropdown extends ElementUIComponent {
 
   /** Whether to hide menu after clicking menu-item */
   hideOnClick: boolean
+
+  /** Dropdown tabindex */
+  tabindex: number
 }

types/popover.d.ts

@@ -61,5 +61,8 @@ export declare class ElPopover extends ElementUIComponent {
   /** Delay of appearance when trigger is hover, in milliseconds */
   openDelay: number
 
+  /** Popover tabindex */
+  tabindex: number
+
   $slots: PopoverSlots
 }

types/tooltip.d.ts

@@ -46,4 +46,7 @@ export declare class ElTooltip extends ElementUIComponent {
 
   /** Timeout in milliseconds to hide tooltip */
   hideAfter: string
+
+  /** Tooltip tabindex */
+  tabindex: number
 }