diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md index 39f0695be..19c7f94ed 100644 --- a/examples/docs/en-US/dropdown.md +++ b/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 diff --git a/examples/docs/en-US/popover.md b/examples/docs/en-US/popover.md index 5611f8b5f..f00b44022 100644 --- a/examples/docs/en-US/popover.md +++ b/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 | diff --git a/examples/docs/en-US/tooltip.md b/examples/docs/en-US/tooltip.md index 8cf77bdf6..9820c03f9 100644 --- a/examples/docs/en-US/tooltip.md +++ b/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 | diff --git a/examples/docs/es/dropdown.md b/examples/docs/es/dropdown.md index 24a6fd5e0..4246837b9 100644 --- a/examples/docs/es/dropdown.md +++ b/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 diff --git a/examples/docs/es/popover.md b/examples/docs/es/popover.md index 9f8ec89e2..a20534dc1 100644 --- a/examples/docs/es/popover.md +++ b/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 | diff --git a/examples/docs/es/tooltip.md b/examples/docs/es/tooltip.md index ae3437908..1effec218 100644 --- a/examples/docs/es/tooltip.md +++ b/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 | diff --git a/examples/docs/fr-FR/dropdown.md b/examples/docs/fr-FR/dropdown.md index f1679896a..ac2ea7dda 100644 --- a/examples/docs/fr-FR/dropdown.md +++ b/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 diff --git a/examples/docs/fr-FR/popover.md b/examples/docs/fr-FR/popover.md index f99bf2b32..382752bfb 100644 --- a/examples/docs/fr-FR/popover.md +++ b/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 diff --git a/examples/docs/fr-FR/tooltip.md b/examples/docs/fr-FR/tooltip.md index 762109369..9ab82a622 100644 --- a/examples/docs/fr-FR/tooltip.md +++ b/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 | diff --git a/examples/docs/zh-CN/dropdown.md b/examples/docs/zh-CN/dropdown.md index 4abba67b9..dd4692713 100644 --- a/examples/docs/zh-CN/dropdown.md +++ b/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 diff --git a/examples/docs/zh-CN/popover.md b/examples/docs/zh-CN/popover.md index 18d7aa921..7d0c2bbe2 100644 --- a/examples/docs/zh-CN/popover.md +++ b/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 | 参数 | 说明 | diff --git a/examples/docs/zh-CN/tooltip.md b/examples/docs/zh-CN/tooltip.md index 699f47104..8176b775f 100644 --- a/examples/docs/zh-CN/tooltip.md +++ b/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 | diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue index edbe197ae..1d6e7a19d 100644 --- a/packages/dropdown/src/dropdown.vue +++ b/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() { diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue index 2cfb84735..ef8fd9a9e 100644 --- a/packages/popover/src/main.vue +++ b/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); diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js index 800bd7bd8..baf182444 100644 --- a/packages/tooltip/src/main.js +++ b/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); + } } }; diff --git a/types/dropdown.d.ts b/types/dropdown.d.ts index 02b0112f6..d2048178f 100644 --- a/types/dropdown.d.ts +++ b/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 } diff --git a/types/popover.d.ts b/types/popover.d.ts index 310884092..742103730 100644 --- a/types/popover.d.ts +++ b/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 } diff --git a/types/tooltip.d.ts b/types/tooltip.d.ts index a62c17972..b0fe4b6e1 100644 --- a/types/tooltip.d.ts +++ b/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 }