From 752c13402e1370dfa6c9b464645c9ec14a03a8d9 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 5 Jul 2023 13:25:29 -0700 Subject: [PATCH 1/5] Upgrade `react-focus-on` to latest with `crossFrame` support --- package.json | 2 +- yarn.lock | 42 +++++++++++++++++++++--------------------- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index d05b18ee764..c9e40a1b57a 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,7 @@ "react-beautiful-dnd": "^13.1.0", "react-dropzone": "^11.5.3", "react-element-to-jsx-string": "^14.3.4", - "react-focus-on": "^3.7.0", + "react-focus-on": "^3.9.0", "react-input-autosize": "^3.0.0", "react-is": "^17.0.2", "react-remove-scroll-bar": "^2.3.4", diff --git a/yarn.lock b/yarn.lock index c017ba22ea2..27abba51943 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9588,10 +9588,10 @@ flush-write-stream@^1.0.0: inherits "^2.0.1" readable-stream "^2.0.4" -focus-lock@^0.11.2: - version "0.11.3" - resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.11.3.tgz#c094e8f109d780f56038abdeec79328fd56b627f" - integrity sha512-4n0pYcPTa/uI7Q66BZna61nRT7lDhnuJ9PJr6wiDjx4uStg491ks41y7uOG+s0umaaa+hulNKSldU9aTg9/yVg== +focus-lock@^0.11.6: + version "0.11.6" + resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.11.6.tgz#e8821e21d218f03e100f7dc27b733f9c4f61e683" + integrity sha512-KSuV3ur4gf2KqMNoZx3nXNVhqCkn42GuTYCX4tXPEwf0MjpFQmNMiN6m7dXaUXgIoivL6/65agoUMg4RLS0Vbg== dependencies: tslib "^2.0.3" @@ -16502,26 +16502,26 @@ react-fast-compare@^3.1.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== -react-focus-lock@^2.9.2: - version "2.9.2" - resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.9.2.tgz#a57dfd7c493e5a030d87f161c96ffd082bd920f2" - integrity sha512-5JfrsOKyA5Zn3h958mk7bAcfphr24jPoMoznJ8vaJF6fUrPQ8zrtEd3ILLOK8P5jvGxdMd96OxWNjDzATfR2qw== +react-focus-lock@^2.9.4: + version "2.9.4" + resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.9.4.tgz#4753f6dcd167c39050c9d84f9c63c71b3ff8462e" + integrity sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg== dependencies: "@babel/runtime" "^7.0.0" - focus-lock "^0.11.2" + focus-lock "^0.11.6" prop-types "^15.6.2" react-clientside-effect "^1.2.6" use-callback-ref "^1.3.0" use-sidecar "^1.1.2" -react-focus-on@^3.7.0: - version "3.7.0" - resolved "https://registry.yarnpkg.com/react-focus-on/-/react-focus-on-3.7.0.tgz#bf782b51483d52d1d336b7b09cb864897af26cdf" - integrity sha512-TsCnbJr4qjqFatJ4U1N8qGSZH+FUzxJ5mJ5ta7TY2YnDmUbGGmcvZMTZgGjQ1fl6vlztsMyg6YyZlPAeeIhEUg== +react-focus-on@^3.9.0: + version "3.9.0" + resolved "https://registry.yarnpkg.com/react-focus-on/-/react-focus-on-3.9.0.tgz#0e1b7ea898365f1e7b63455c869153426725a9db" + integrity sha512-4HA8zeMgK5hzR7ffXr/ser3cY3XJBIU1Z8eZI9r3lunMDxIZ5/m9Q2YaHq1I0NFzev1nFsMERZX/JovTYk+GtQ== dependencies: aria-hidden "^1.2.2" - react-focus-lock "^2.9.2" - react-remove-scroll "^2.5.5" + react-focus-lock "^2.9.4" + react-remove-scroll "^2.5.6" react-style-singleton "^2.2.0" tslib "^2.3.1" use-callback-ref "^1.3.0" @@ -16581,7 +16581,7 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== -react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.4: +react-remove-scroll-bar@^2.3.4: version "2.3.4" resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9" integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A== @@ -16589,12 +16589,12 @@ react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.4: react-style-singleton "^2.2.1" tslib "^2.0.0" -react-remove-scroll@^2.5.5: - version "2.5.5" - resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77" - integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw== +react-remove-scroll@^2.5.6: + version "2.5.6" + resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.6.tgz#7510b8079e9c7eebe00e65a33daaa3aa29a10336" + integrity sha512-bO856ad1uDYLefgArk559IzUNeQ6SWH4QnrevIUjH+GczV56giDfl3h0Idptf2oIKxQmd1p9BN25jleKodTALg== dependencies: - react-remove-scroll-bar "^2.3.3" + react-remove-scroll-bar "^2.3.4" react-style-singleton "^2.2.1" tslib "^2.1.0" use-callback-ref "^1.3.0" From 6f689b13b08fcc5ae8590fc8251bbd86356d4491 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 5 Jul 2023 13:32:05 -0700 Subject: [PATCH 2/5] Add documentation --- .../views/focus_trap/focus_trap_example.js | 26 ++++++++++++------- src/components/focus_trap/focus_trap.tsx | 1 + 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src-docs/src/views/focus_trap/focus_trap_example.js b/src-docs/src/views/focus_trap/focus_trap_example.js index 064eab86238..27d7406e29c 100644 --- a/src-docs/src/views/focus_trap/focus_trap_example.js +++ b/src-docs/src/views/focus_trap/focus_trap_example.js @@ -18,7 +18,7 @@ export const FocusTrapExample = { }, ], text: ( - + <>

Use EuiFocusTrap to prevent keyboard-initiated focus from leaving a defined area. Temporary flows and UX escapes @@ -37,15 +37,21 @@ export const FocusTrapExample = { EuiFocusTrap will maintain the tab order expected by users.

-

- Use clickOutsideDisables to disable the focus - trap when the user clicks outside the trap. -

-

- Use noIsolation=false when pointer events on - outside elements should be disallowed. -

- + + ), props: { EuiFocusTrap }, demo: , diff --git a/src/components/focus_trap/focus_trap.tsx b/src/components/focus_trap/focus_trap.tsx index d092f99cbc8..337ea03938f 100644 --- a/src/components/focus_trap/focus_trap.tsx +++ b/src/components/focus_trap/focus_trap.tsx @@ -56,6 +56,7 @@ export class EuiFocusTrap extends Component { returnFocus: true, noIsolation: true, scrollLock: false, + crossFrame: false, gapMode: 'padding', // EUI defaults to padding because Kibana's body/layout CSS ignores `margin` }; From 6e37fc9aa282a5c6f55605c5fcd9839556ebfe67 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 5 Jul 2023 14:11:34 -0700 Subject: [PATCH 3/5] changelog --- upcoming_changelogs/6908.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 upcoming_changelogs/6908.md diff --git a/upcoming_changelogs/6908.md b/upcoming_changelogs/6908.md new file mode 100644 index 00000000000..adb8a76a8ed --- /dev/null +++ b/upcoming_changelogs/6908.md @@ -0,0 +1,6 @@ +- `EuiFocusTrap` now supports configuring cross-iframe focus trapping via the `crossFrame` prop + +**Breaking changes** + +- `EuiFocusTrap` now defaults to *not* trapping focus across iframes + From c7dc3250b6d9f4a77c3d9592422e55002e4fc220 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 5 Jul 2023 18:38:32 -0700 Subject: [PATCH 4/5] Add storybook for testing --- .../focus_trap/focus_trap.stories.tsx | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 src/components/focus_trap/focus_trap.stories.tsx diff --git a/src/components/focus_trap/focus_trap.stories.tsx b/src/components/focus_trap/focus_trap.stories.tsx new file mode 100644 index 00000000000..3cf4971498b --- /dev/null +++ b/src/components/focus_trap/focus_trap.stories.tsx @@ -0,0 +1,76 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import type { Meta, StoryObj } from '@storybook/react'; +import React, { useState } from 'react'; + +import { EuiButton } from '../button'; +import { EuiFieldText } from '../form'; +import { EuiSpacer } from '../spacer'; +import { EuiPanel } from '../panel'; + +import { EuiFocusTrap, EuiFocusTrapProps } from './focus_trap'; + +const meta: Meta = { + title: 'EuiFocusTrap', + // @ts-ignore This still works for Storybook controls, even though Typescript complains + component: EuiFocusTrap, + argTypes: { + crossFrame: { + control: { type: 'boolean' }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const StatefulFocusTrap = (props: Partial) => { + const [disabled, setDisabled] = useState(props.disabled); + return ( + <> + setDisabled(!disabled)}> + Toggle focus trap + + + + + Focus trap is currently {disabled ? 'disabled' : 'enabled'} + + Button inside focus trap + + + + ); +}; + +export const Playground: Story = { + render: ({ ...args }) => , + args: { + disabled: true, + }, +}; + +export const Iframe: Story = { + render: ({ ...args }) => ( + <> + + + + Iframe content +