Page MenuHomePhabricator
Files F3555417

D7960.diff
No OneTemporary
Actions

D7960.diff
View Options

diff --git a/lib/components/modal-overlay.react.js b/lib/components/modal-overlay.react.js
--- a/lib/components/modal-overlay.react.js
+++ b/lib/components/modal-overlay.react.js
@@ -1,5 +1,6 @@
// @flow
+import FocusTrap from 'focus-trap-react';
import * as React from 'react';
import css from './modal-overlay.css';
@@ -10,6 +11,10 @@
+backgroundColor?: string,
};
+const focusTrapOptions = {
+ fallbackFocus: '#modal-overlay',
+};
+
function ModalOverlay(props: ModalOverlayProps): React.Node {
const {
children,
@@ -59,17 +64,20 @@
);
return (
- <div
- className={css.modalOverlay}
- ref={overlayRef}
- onMouseDown={onBackgroundMouseDown}
- onMouseUp={onBackgroundMouseUp}
- tabIndex={0}
- onKeyDown={onKeyDown}
- style={containerStyle}
- >
- {children}
- </div>
+ <FocusTrap focusTrapOptions={focusTrapOptions}>
+ <div
+ id="modal-overlay"
+ className={css.modalOverlay}
+ ref={overlayRef}
+ onMouseDown={onBackgroundMouseDown}
+ onMouseUp={onBackgroundMouseUp}
+ tabIndex={-1}
+ onKeyDown={onKeyDown}
+ style={containerStyle}
+ >
+ {children}
+ </div>
+ </FocusTrap>
);
}
diff --git a/lib/flow-typed/npm/focus-trap-react_vx.x.x.js b/lib/flow-typed/npm/focus-trap-react_vx.x.x.js
new file mode 100644
--- /dev/null
+++ b/lib/flow-typed/npm/focus-trap-react_vx.x.x.js
@@ -0,0 +1,61 @@
+// flow-typed signature: 29231f6b72f5876f5692b592dce3c754
+// flow-typed version: <<STUB>>/focus-trap-react_v10.1.4/flow_v0.182.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ * 'focus-trap-react'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'focus-trap-react' {
+ import type { Node } from 'react';
+
+ declare type FocusTargetValue = HTMLElement | string;
+ declare type FocusTargetValueOrFalse = FocusTargetValue | false;
+
+ declare type FocusTarget = FocusTargetValue | (() => FocusTargetValue);
+ declare type FocusTargetOrFalse = FocusTargetValueOrFalse | (() => FocusTargetValueOrFalse);
+
+ declare type MouseEventToBoolean = (event: MouseEvent | TouchEvent) => boolean;
+ declare type KeyboardEventToBoolean = (event: KeyboardEvent) => boolean;
+
+ declare type FocusTrapOptions = {
+ onActivate?: () => void,
+ onPostActivate?: () => void,
+ onPause?: () => void,
+ onPostPause?: () => void,
+ onUnpause?: () => void,
+ onPostUnpause?: () => void,
+ onDeactivate?: () => void,
+ onPostDeactivate?: () => void,
+ checkCanReturnFocus?: (trigger: HTMLElement) => Promise<void>,
+ initialFocus?: FocusTargetOrFalse,
+ fallbackFocus?: FocusTarget,
+ returnFocusOnDeactivate?: boolean,
+ setReturnFocus?: FocusTargetValueOrFalse | ((nodeFocusedBeforeActivation: HTMLElement) => FocusTargetValueOrFalse),
+ escapeDeactivates?: boolean | KeyboardEventToBoolean,
+ clickOutsideDeactivates?: boolean | MouseEventToBoolean,
+ allowOutsideClick?: boolean | MouseEventToBoolean,
+ preventScroll?: boolean,
+ delayInitialFocus?: boolean,
+ document?: Document,
+ isKeyForward?: KeyboardEventToBoolean,
+ isKeyBackward?: KeyboardEventToBoolean,
+ };
+
+ declare type FocusTrapProps = {
+ +children?: Node,
+ +active?: boolean,
+ +paused?: boolean,
+ +focusTrapOptions?: FocusTrapOptions,
+ +containerElements?: $ReadOnlyArray<HTMLElement>,
+ };
+
+ declare module.exports: FocusTrapProps => Node;
+}
diff --git a/lib/package.json b/lib/package.json
--- a/lib/package.json
+++ b/lib/package.json
@@ -41,6 +41,7 @@
"ethers": "^5.7.2",
"fast-json-stable-stringify": "^2.0.0",
"file-type": "^12.3.0",
+ "focus-trap-react": "^10.1.4",
"invariant": "^2.2.4",
"just-clone": "^3.2.1",
"lodash": "^4.17.21",
diff --git a/yarn.lock b/yarn.lock
--- a/yarn.lock
+++ b/yarn.lock
@@ -11776,6 +11776,21 @@
dependencies:
imul "^1.0.0"
+focus-trap-react@^10.1.4:
+ version "10.1.4"
+ resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-10.1.4.tgz#bab7ea87aecfa2f7eb6f2fcc4be1e7311893ca17"
+ integrity sha512-vLUQRXI6SUJD8YLYTBa1DlCYRmTKFDxRvc4TEe2nq8S1aj+YKsucuNxqZUOf0+RZ01Yoiwtk/6rD9xqSvawIvQ==
+ dependencies:
+ focus-trap "^7.4.3"
+ tabbable "^6.1.2"
+
+focus-trap@^7.4.3:
+ version "7.4.3"
+ resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.4.3.tgz#a3dae73d44df359eb92bbf37b18e173e813b16c5"
+ integrity sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg==
+ dependencies:
+ tabbable "^6.1.2"
+
follow-redirects@^1.0.0:
version "1.14.8"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
@@ -22197,6 +22212,11 @@
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+tabbable@^6.1.2:
+ version "6.1.2"
+ resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.2.tgz#b0d3ca81d582d48a80f71b267d1434b1469a3703"
+ integrity sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==
+
table@^5.4.6:
version "5.4.6"
resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"

File Metadata

Mime Type
text/plain
Expires
Fri, Dec 27, 10:14 PM (7 h, 24 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2721412
Default Alt Text
D7960.diff (5 KB)

Event Timeline