From 419b57c0087636276e3e32cde12fba9ed9337538 Mon Sep 17 00:00:00 2001 From: Andrey Myssak <40265277+andreymyssak@users.noreply.github.com> Date: Wed, 12 Apr 2023 05:04:48 +0600 Subject: [PATCH] Update tabbable (#594) (#650) Signed-off-by: Andrey Myssak Co-authored-by: Sergey Myssak --- i18ntokens.json | 48 +++++++++---------- package.json | 3 +- .../context_menu/context_menu_panel.tsx | 7 ++- src/components/datagrid/data_grid.tsx | 2 +- src/components/datagrid/data_grid_body.tsx | 2 +- src/components/datagrid/data_grid_cell.tsx | 2 +- .../data_grid_control_header_cell.tsx | 2 +- .../datagrid/data_grid_header_cell.tsx | 2 +- src/components/popover/input_popover.tsx | 4 +- src/components/popover/popover.tsx | 2 +- yarn.lock | 15 ++---- 11 files changed, 43 insertions(+), 46 deletions(-) diff --git a/i18ntokens.json b/i18ntokens.json index e9c876ef17..867bed764e 100644 --- a/i18ntokens.json +++ b/i18ntokens.json @@ -1411,12 +1411,12 @@ "start": { "line": 151, "column": 8, - "index": 5152 + "index": 5156 }, "end": { "line": 153, "column": 39, - "index": 5269 + "index": 5273 } }, "filepath": "src/components/datagrid/data_grid_cell.tsx" @@ -1429,12 +1429,12 @@ "start": { "line": 151, "column": 8, - "index": 5152 + "index": 5156 }, "end": { "line": 153, "column": 39, - "index": 5269 + "index": 5273 } }, "filepath": "src/components/datagrid/data_grid_cell.tsx" @@ -1447,12 +1447,12 @@ "start": { "line": 97, "column": 32, - "index": 2878 + "index": 2882 }, "end": { "line": 100, "column": 3, - "index": 2957 + "index": 2961 } }, "filepath": "src/components/datagrid/data_grid_header_cell.tsx" @@ -1645,12 +1645,12 @@ "start": { "line": 275, "column": 4, - "index": 10037 + "index": 10041 }, "end": { "line": 278, "column": 46, - "index": 10197 + "index": 10201 } }, "filepath": "src/components/datagrid/data_grid.tsx" @@ -1663,12 +1663,12 @@ "start": { "line": 281, "column": 10, - "index": 10271 + "index": 10275 }, "end": { "line": 283, "column": 52, - "index": 10393 + "index": 10397 } }, "filepath": "src/components/datagrid/data_grid.tsx" @@ -1681,12 +1681,12 @@ "start": { "line": 990, "column": 4, - "index": 32864 + "index": 32868 }, "end": { "line": 995, "column": 53, - "index": 33037 + "index": 33041 } }, "filepath": "src/components/datagrid/data_grid.tsx" @@ -1699,12 +1699,12 @@ "start": { "line": 990, "column": 4, - "index": 32864 + "index": 32868 }, "end": { "line": 995, "column": 53, - "index": 33037 + "index": 33041 } }, "filepath": "src/components/datagrid/data_grid.tsx" @@ -1717,12 +1717,12 @@ "start": { "line": 1031, "column": 20, - "index": 34075 + "index": 34079 }, "end": { "line": 1041, "column": 3, - "index": 34362 + "index": 34366 } }, "filepath": "src/components/datagrid/data_grid.tsx" @@ -1735,12 +1735,12 @@ "start": { "line": 1043, "column": 25, - "index": 34390 + "index": 34394 }, "end": { "line": 1052, "column": 3, - "index": 34640 + "index": 34644 } }, "filepath": "src/components/datagrid/data_grid.tsx" @@ -1753,12 +1753,12 @@ "start": { "line": 1171, "column": 18, - "index": 39754 + "index": 39758 }, "end": { "line": 1174, "column": 20, - "index": 39907 + "index": 39911 } }, "filepath": "src/components/datagrid/data_grid.tsx" @@ -2239,12 +2239,12 @@ "start": { "line": 429, "column": 14, - "index": 11259 + "index": 11289 }, "end": { "line": 432, "column": 16, - "index": 11385 + "index": 11415 } }, "filepath": "src/components/date_picker/super_date_picker/super_date_picker.tsx" @@ -3319,12 +3319,12 @@ "start": { "line": 769, "column": 14, - "index": 22148 + "index": 22152 }, "end": { "line": 772, "column": 16, - "index": 22314 + "index": 22318 } }, "filepath": "src/components/popover/popover.tsx" diff --git a/package.json b/package.json index bd0cc426cd..8a782d4d37 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "remark-emoji": "^2.1.0", "remark-parse": "^8.0.3", "remark-rehype": "^8.0.0", - "tabbable": "^3.0.0", + "tabbable": "^6.1.1", "text-diff": "^1.0.1", "unified": "^9.2.0", "unist-util-visit": "^2.0.3", @@ -144,7 +144,6 @@ "@types/react-dom": "^16.9.6", "@types/react-is": "^16.7.1", "@types/react-router-dom": "^5.1.5", - "@types/tabbable": "^3.1.0", "@types/url-parse": "^1.4.3", "@types/uuid": "^8.3.0", "@typescript-eslint/eslint-plugin": "^4.8.1", diff --git a/src/components/context_menu/context_menu_panel.tsx b/src/components/context_menu/context_menu_panel.tsx index 100240f684..4db3a1cefc 100644 --- a/src/components/context_menu/context_menu_panel.tsx +++ b/src/components/context_menu/context_menu_panel.tsx @@ -36,7 +36,7 @@ import React, { ReactNode, } from 'react'; import classNames from 'classnames'; -import tabbable from 'tabbable'; +import { tabbable } from 'tabbable'; import { CommonProps, NoArgCallback, keysOf } from '../common'; import { OuiIcon } from '../icon'; @@ -270,7 +270,10 @@ export class OuiContextMenuPanel extends Component { // Otherwise let's focus the first tabbable item and expedite input from the user. if (this.content) { - const tabbableItems = tabbable(this.content); + const tabbableItems = tabbable(this.content, { + displayCheck: 'legacy-full', + }); + if (tabbableItems.length) { tabbableItems[0].focus(); } diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 62e0d47f69..3ed5002f2f 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -43,7 +43,7 @@ import React, { CSSProperties, } from 'react'; import classNames from 'classnames'; -import tabbable from 'tabbable'; +import { tabbable } from 'tabbable'; import { OuiI18n, useOuiI18n } from '../i18n'; import { CommonProps, OneOf } from '../common'; import { diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx index 311458d8b8..b67372621d 100644 --- a/src/components/datagrid/data_grid_body.tsx +++ b/src/components/datagrid/data_grid_body.tsx @@ -39,7 +39,7 @@ import React, { useState, } from 'react'; import classNames from 'classnames'; -import tabbable from 'tabbable'; +import { tabbable } from 'tabbable'; import { GridChildComponentProps, VariableSizeGrid as Grid, diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx index f2f04c3741..df0bd03b0a 100644 --- a/src/components/datagrid/data_grid_cell.tsx +++ b/src/components/datagrid/data_grid_cell.tsx @@ -42,7 +42,7 @@ import React, { ReactNode, } from 'react'; import classNames from 'classnames'; -import tabbable from 'tabbable'; +import { tabbable } from 'tabbable'; import { CommonProps } from '../common'; import { OuiScreenReaderOnly } from '../accessibility'; import { OuiI18n } from '../i18n'; diff --git a/src/components/datagrid/data_grid_control_header_cell.tsx b/src/components/datagrid/data_grid_control_header_cell.tsx index 56ec153df4..378490bd30 100644 --- a/src/components/datagrid/data_grid_control_header_cell.tsx +++ b/src/components/datagrid/data_grid_control_header_cell.tsx @@ -37,7 +37,7 @@ import React, { } from 'react'; import classnames from 'classnames'; import { keys } from '../../services'; -import tabbable from 'tabbable'; +import { tabbable } from 'tabbable'; import { OuiDataGridControlColumn } from './data_grid_types'; import { DataGridFocusContext } from './data_grid_context'; diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx index 1f468d65dc..af0d6b8f7e 100644 --- a/src/components/datagrid/data_grid_header_cell.tsx +++ b/src/components/datagrid/data_grid_header_cell.tsx @@ -46,7 +46,7 @@ import { OuiDataGridColumnResizer } from './data_grid_column_resizer'; import { OuiPopover } from '../popover'; import { OuiListGroup } from '../list_group'; import { OuiScreenReaderOnly } from '../accessibility'; -import tabbable from 'tabbable'; +import { tabbable } from 'tabbable'; import { OuiDataGridColumn } from './data_grid_types'; import { getColumnActions } from './column_actions'; import { useOuiI18n } from '../i18n'; diff --git a/src/components/popover/input_popover.tsx b/src/components/popover/input_popover.tsx index 73e8a36592..4f9df31b0b 100644 --- a/src/components/popover/input_popover.tsx +++ b/src/components/popover/input_popover.tsx @@ -36,7 +36,7 @@ import React, { useCallback, } from 'react'; import classnames from 'classnames'; -import tabbable from 'tabbable'; +import { tabbable } from 'tabbable'; import { CommonProps } from '../common'; import { OuiFocusTrap } from '../focus_trap'; @@ -101,7 +101,7 @@ export const OuiInputPopover: FunctionComponent = ({ const onKeyDown = (event: React.KeyboardEvent) => { if (panelEl && event.key === cascadingMenuKeys.TAB) { - const tabbableItems = tabbable(panelEl).filter((el: HTMLElement) => { + const tabbableItems = tabbable(panelEl).filter((el) => { return ( Array.from(el.attributes) .map((el) => el.name) diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index 0259ca7e91..02d8d6788a 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -38,7 +38,7 @@ import React, { RefCallback, } from 'react'; import classNames from 'classnames'; -import tabbable from 'tabbable'; +import { tabbable } from 'tabbable'; import { CommonProps, NoArgCallback } from '../common'; import { FocusTarget, OuiFocusTrap, OuiFocusTrapProps } from '../focus_trap'; diff --git a/yarn.lock b/yarn.lock index 02f9315583..438bb10b63 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2244,11 +2244,6 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== -"@types/tabbable@^3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@types/tabbable/-/tabbable-3.1.0.tgz#540d4c2729872560badcc220e73c9412c1d2bffe" - integrity sha512-LL0q/bTlzseaXQ8j91eZ+Z8FQUzo0nwkng00B8365qULvFyiSOWylxV8m31Gmee3QuidkDqR72a9NRfR8s4qTw== - "@types/tapable@*", "@types/tapable@^1.0.5": version "1.0.6" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74" @@ -13543,7 +13538,7 @@ request-promise-native@^1.0.5: stealthy-require "^1.1.1" tough-cookie "^2.3.3" -request@^2.87.0, request@^2.88.0: +request@^2.87.0: version "2.88.0" resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef" integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg== @@ -15016,10 +15011,10 @@ symbol-tree@^3.2.2: resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== -tabbable@^3.0.0: - version "3.1.2" - resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-3.1.2.tgz#f2d16cccd01f400e38635c7181adfe0ad965a4a2" - integrity sha512-wjB6puVXTYO0BSFtCmWQubA/KIn7Xvajw0x0l6eJUudMG/EAiJvIUnyNX6xO4NpGrJ16lbD0eUseB9WxW0vlpQ== +tabbable@^6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.1.tgz#40cfead5ed11be49043f04436ef924c8890186a0" + integrity sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg== table@^5.2.3: version "5.4.0"