{"parents":["e7704e22a146c2d5b00f8c6bfa6255153272f053"],"files":[{"status":"M","path":"packages\/react-interactions\/accessibility\/docs\/FocusContain.md"},{"status":"M","path":"packages\/react-interactions\/accessibility\/docs\/FocusManager.md"},{"status":"D","path":"packages\/react-interactions\/accessibility\/docs\/TabbableScope.md"},{"status":"A","path":"packages\/react-interactions\/accessibility\/docs\/TabbableScopeQuery.md"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/FocusContain.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/FocusGroup.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/FocusManager.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/FocusTable.js"},{"status":"R078","path":"packages\/react-interactions\/accessibility\/src\/TabbableScopeQuery.js","previousPath":"packages\/react-interactions\/accessibility\/src\/TabbableScope.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/__tests__\/FocusContain-test.internal.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/__tests__\/FocusGroup-test.internal.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/__tests__\/FocusManager-test.internal.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/__tests__\/FocusTable-test.internal.js"},{"status":"R081","path":"packages\/react-interactions\/accessibility\/src\/__tests__\/TabbableScopeQuery-test.internal.js","previousPath":"packages\/react-interactions\/accessibility\/src\/__tests__\/TabbableScope-test.internal.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/shared\/getTabbableNodes.js"},{"status":"R080","path":"packages\/react-interactions\/accessibility\/tabbable-scope-query.js","previousPath":"packages\/react-interactions\/accessibility\/tabbable-scope.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberScope.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactScope-test.internal.js"},{"status":"M","path":"packages\/shared\/ReactTypes.js"},{"status":"M","path":"packages\/shared\/createScope.js"}],"commit":{"revision":"4cb399a433771c84e861d5ca3d38a24733d23ad8","shortRevision":"4cb399a433","authorName":"Dominic Gannaway","authorEmail":"trueadm@users.noreply.github.com","subject":"[react-interactions] Modify Scope query mechanism (#17095)","authoredAt":"2019-10-15T15:57:02+02:00"},"patch":"diff --git a\/packages\/react-interactions\/accessibility\/docs\/FocusContain.md b\/packages\/react-interactions\/accessibility\/docs\/FocusContain.md\nindex 2dea9f2cf1..724cbaacda 100644\n--- a\/packages\/react-interactions\/accessibility\/docs\/FocusContain.md\n+++ b\/packages\/react-interactions\/accessibility\/docs\/FocusContain.md\n@@ -10,11 +10,11 @@ using the `tabFocus` prop.\n \n ```jsx\n import FocusContain from 'react-interactions\/accessibility\/focus-contain';\n-import TabbableScope from 'react-interactions\/accessibility\/tabbable-scope';\n+import tabbableScopeQuery from 'react-interactions\/accessibility\/tabbable-scope-query';\n \n function MyDialog(props) {\n return (\n- \n+ \n

{props.title}

\n
{props.text}<\/p>\ndiff --git a\/packages\/react-interactions\/accessibility\/docs\/FocusManager.md b\/packages\/react-interactions\/accessibility\/docs\/FocusManager.md\nindex 5cccd2676e..f928ea13d6 100644\n--- a\/packages\/react-interactions\/accessibility\/docs\/FocusManager.md\n+++ b\/packages\/react-interactions\/accessibility\/docs\/FocusManager.md\n@@ -14,6 +14,10 @@ import {\n getPreviousScope,\n } from 'react-interactions\/accessibility\/focus-manager';\n \n+function scopeQuery(type) {\n+ return type === 'div';\n+}\n+\n function KeyboardFocusMover(props) {\n const scopeRef = useRef(null);\n \n@@ -22,9 +26,9 @@ function KeyboardFocusMover(props) {\n \n if (scope) {\n \/\/ Focus the first tabbable DOM node in my children\n- focusFirst(scope);\n+ focusFirst(scopeQuery, scope);\n \/\/ Then focus the next chilkd\n- focusNext(scope);\n+ focusNext(scopeQuery, scope);\n }\n });\n \ndiff --git a\/packages\/react-interactions\/accessibility\/docs\/TabbableScope.md b\/packages\/react-interactions\/accessibility\/docs\/TabbableScope.md\ndeleted file mode 100644\nindex 2bafcad00d..0000000000\n--- a\/packages\/react-interactions\/accessibility\/docs\/TabbableScope.md\n+++ \/dev\/null\n@@ -1,37 +0,0 @@\n-# TabbableScope\n-\n-`TabbableScope` is a custom scope implementation that can be used with\n-`FocusContain`, `FocusGroup`, `FocusTable` and `FocusManager` modules.\n-\n-## Usage\n-\n-```jsx\n-import TabbableScope from 'react-interactions\/accessibility\/tabbable-scope';\n-\n-function FocusableNodeCollector(props) {\n- const scopeRef = useRef(null);\n-\n- useEffect(() => {\n- const scope = scopeRef.current;\n-\n- if (scope) {\n- const tabFocusableNodes = scope.getAllNodes();\n- if (tabFocusableNodes && props.onFocusableNodes) {\n- props.onFocusableNodes(tabFocusableNodes);\n- }\n- }\n- });\n- \n- return (\n- \n- {props.children}\n- <\/TabbableScope>\n- );\n-}\n-```\n-\n-## Implementation\n-\n-`TabbableScope` uses the experimental `React.unstable_createScope` API. The query\n-function used for the scope is designed to collect DOM nodes that are tab focusable\n-to the browser. See the [implementation](..\/src\/TabbableScope.js#L12-L33) here.\ndiff --git a\/packages\/react-interactions\/accessibility\/docs\/TabbableScopeQuery.md b\/packages\/react-interactions\/accessibility\/docs\/TabbableScopeQuery.md\nnew file mode 100644\nindex 0000000000..0c942ec428\n--- \/dev\/null\n+++ b\/packages\/react-interactions\/accessibility\/docs\/TabbableScopeQuery.md\n@@ -0,0 +1,31 @@\n+# TabbableScopeQuery\n+\n+`TabbableScopeQuery` is a custom scope implementation that can be used with\n+`FocusContain`, `FocusGroup`, `FocusTable` and `FocusManager` modules.\n+\n+## Usage\n+\n+```jsx\n+import tabbableScopeQuery from 'react-interactions\/accessibility\/tabbable-scope-query';\n+\n+function FocusableNodeCollector(props) {\n+ const scopeRef = useRef(null);\n+\n+ useEffect(() => {\n+ const scope = scopeRef.current;\n+\n+ if (scope) {\n+ const tabFocusableNodes = scope.queryAllNodes(tabbableScopeQuery);\n+ if (tabFocusableNodes && props.onFocusableNodes) {\n+ props.onFocusableNodes(tabFocusableNodes);\n+ }\n+ }\n+ });\n+ \n+ return (\n+ \n+ {props.children}\n+ <\/TabbableScope>\n+ );\n+}\n+```\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/FocusContain.js b\/packages\/react-interactions\/accessibility\/src\/FocusContain.js\nindex 60bd3cd292..61304364f1 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusContain.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusContain.js\n@@ -7,7 +7,6 @@\n * @flow\n \/\n \n-import type {ReactScope} from 'shared\/ReactTypes';\n import type {KeyboardEvent} from 'react-interactions\/events\/keyboard';\n \n import React from 'react';\n@@ -21,15 +20,17 @@ import {\n type FocusContainProps = {|\n children: React.Node,\n disabled?: boolean,\n- tabScope: ReactScope,\n+ scopeQuery: (type: string | Object, props: Object) => boolean,\n |};\n \n const {useLayoutEffect, useRef} = React;\n \n+const FocusContainScope = React.unstable_createScope();\n+\n export default function FocusContain({\n children,\n disabled,\n- tabScope: TabScope,\n+ scopeQuery,\n }: FocusContainProps): React.Node {\n const scopeRef = useRef(null);\n \/\/ This ensures tabbing works through the React tree (including Portals and Suspense nodes)\n@@ -42,9 +43,9 @@ export default function FocusContain({\n const scope = scopeRef.current;\n if (scope !== null) {\n if (event.shiftKey) {\n- focusPrevious(scope, event, true);\n+ focusPrevious(scopeQuery, scope, event, true);\n } else {\n- focusNext(scope, event, true);\n+ focusNext(scopeQuery, scope, event, true);\n }\n }\n },\n@@ -71,7 +72,7 @@ export default function FocusContain({\n disabled !== true &&\n !scope.containsNode(document.activeElement)\n ) {\n- const fistElem = scope.getFirstNode();\n+ const fistElem = scope.queryFirstNode(scopeQuery);\n if (fistElem !== null) {\n fistElem.focus();\n }\n@@ -81,8 +82,8 @@ export default function FocusContain({\n );\n \n return (\n- \n+ \n {children}\n- <\/TabScope>\n+ <\/FocusContainScope>\n );\n }\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/FocusGroup.js b\/packages\/react-interactions\/accessibility\/src\/FocusGroup.js\nindex c3d8e4004e..28fc9fe9f0 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusGroup.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusGroup.js\n@@ -7,7 +7,7 @@\n @flow\n \/\n \n-import type {ReactScope, ReactScopeMethods} from 'shared\/ReactTypes';\n+import type {ReactScopeMethods} from 'shared\/ReactTypes';\n import type {KeyboardEvent} from 'react-interactions\/events\/keyboard';\n \n import React from 'react';\n@@ -23,14 +23,18 @@ type FocusGroupProps = {|\n children: React.Node,\n portrait: boolean,\n wrap?: boolean,\n- tabScope?: ReactScope,\n+ tabScopeQuery?: (type: string | Object, props: Object) => boolean,\n allowModifiers?: boolean,\n |};\n \n const {useRef} = React;\n \n-function focusGroupItem(cell: ReactScopeMethods, event: KeyboardEvent): void {\n- const firstScopedNode = cell.getFirstNode();\n+function focusGroupItem(\n+ scopeQuery: (type: string | Object, props: Object) => boolean,\n+ cell: ReactScopeMethods,\n+ event: KeyboardEvent,\n+): void {\n+ const firstScopedNode = cell.queryFirstNode(scopeQuery);\n if (firstScopedNode !== null) {\n firstScopedNode.focus();\n event.preventDefault();\n@@ -91,30 +95,25 @@ function hasModifierKey(event: KeyboardEvent): boolean {\n }\n \n export function createFocusGroup(\n- scope: ReactScope,\n+ scopeQuery: (type: string | Object, props: Object) => boolean,\n ): [(FocusGroupProps) => React.Node, (FocusItemProps) => React.Node] {\n- const TableScope = React.unstable_createScope(scope.fn);\n+ const TableScope = React.unstable_createScope();\n \n function Group({\n children,\n portrait,\n wrap,\n- tabScope: TabScope,\n+ tabScopeQuery,\n allowModifiers,\n }: FocusGroupProps): React.Node {\n- const tabScopeRef = useRef(null);\n return (\n \n- {TabScope ? (\n- {children}<\/TabScope>\n- ) : (\n- children\n- )}\n+ {children}\n <\/TableScope>\n );\n }\n@@ -132,19 +131,22 @@ export function createFocusGroup(\n const key = event.key;\n \n if (key === 'Tab') {\n- const tabScope = getGroupProps(currentItem).tabScopeRef.current;\n- if (tabScope) {\n- const activeNode = document.activeElement;\n- const nodes = tabScope.getAllNodes();\n- for (let i = 0; i < nodes.length; i++) {\n- const node = nodes[i];\n- if (node !== activeNode) {\n- setElementCanTab(node, false);\n- } else {\n- setElementCanTab(node, true);\n+ const tabScopeQuery = getGroupProps(currentItem).tabScopeQuery;\n+ if (tabScopeQuery) {\n+ const groupScope = currentItem.getParent();\n+ if (groupScope) {\n+ const activeNode = document.activeElement;\n+ const nodes = groupScope.queryAllNodes(tabScopeQuery);\n+ for (let i = 0; i < nodes.length; i++) {\n+ const node = nodes[i];\n+ if (node !== activeNode) {\n+ setElementCanTab(node, false);\n+ } else {\n+ setElementCanTab(node, true);\n+ }\n }\n+ return;\n }\n- return;\n }\n event.continuePropagation();\n return;\n@@ -166,7 +168,7 @@ export function createFocusGroup(\n currentItem,\n );\n if (previousGroupItem) {\n- focusGroupItem(previousGroupItem, event);\n+ focusGroupItem(scopeQuery, previousGroupItem, event);\n return;\n }\n }\n@@ -176,7 +178,7 @@ export function createFocusGroup(\n if (portrait) {\n const nextGroupItem = getNextGroupItem(group, currentItem);\n if (nextGroupItem) {\n- focusGroupItem(nextGroupItem, event);\n+ focusGroupItem(scopeQuery, nextGroupItem, event);\n return;\n }\n }\n@@ -189,7 +191,7 @@ export function createFocusGroup(\n currentItem,\n );\n if (previousGroupItem) {\n- focusGroupItem(previousGroupItem, event);\n+ focusGroupItem(scopeQuery, previousGroupItem, event);\n return;\n }\n }\n@@ -199,7 +201,7 @@ export function createFocusGroup(\n if (!portrait) {\n const nextGroupItem = getNextGroupItem(group, currentItem);\n if (nextGroupItem) {\n- focusGroupItem(nextGroupItem, event);\n+ focusGroupItem(scopeQuery, nextGroupItem, event);\n return;\n }\n }\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/FocusManager.js b\/packages\/react-interactions\/accessibility\/src\/FocusManager.js\nindex d38434b2fd..861f91b594 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusManager.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusManager.js\n@@ -12,9 +12,14 @@ import type {KeyboardEvent} from 'react-interactions\/events\/keyboard';\n \n import getTabbableNodes from '.\/shared\/getTabbableNodes';\n \n-export function focusFirst(scope: ReactScopeMethods): void {\n- const [, firstTabbableElem] = getTabbableNodes(scope);\n- focusElem(firstTabbableElem);\n+export function focusFirst(\n+ scopeQuery: (type: string | Object, props: Object) => boolean,\n+ scope: ReactScopeMethods,\n+): void {\n+ const firstNode = scope.queryFirstNode(scopeQuery);\n+ if (firstNode) {\n+ focusElem(firstNode);\n+ }\n }\n \n function focusElem(elem: null | HTMLElement): void {\n@@ -24,6 +29,7 @@ function focusElem(elem: null | HTMLElement): void {\n }\n \n export function focusNext(\n+ scopeQuery: (type: string | Object, props: Object) => boolean,\n scope: ReactScopeMethods,\n event?: KeyboardEvent,\n contain?: boolean,\n@@ -34,7 +40,7 @@ export function focusNext(\n lastTabbableElem,\n currentIndex,\n focusedElement,\n- ] = getTabbableNodes(scope);\n+ ] = getTabbableNodes(scopeQuery, scope);\n \n if (focusedElement === null) {\n if (event) {\n@@ -58,6 +64,7 @@ export function focusNext(\n }\n \n export function focusPrevious(\n+ scopeQuery: (type: string | Object, props: Object) => boolean,\n scope: ReactScopeMethods,\n event?: KeyboardEvent,\n contain?: boolean,\n@@ -68,7 +75,7 @@ export function focusPrevious(\n lastTabbableElem,\n currentIndex,\n focusedElement,\n- ] = getTabbableNodes(scope);\n+ ] = getTabbableNodes(scopeQuery, scope);\n \n if (focusedElement === null) {\n if (event) {\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/FocusTable.js b\/packages\/react-interactions\/accessibility\/src\/FocusTable.js\nindex 0f5970c1eb..d77c778af1 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusTable.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusTable.js\n@@ -7,7 +7,7 @@\n @flow\n \/\n \n-import type {ReactScope, ReactScopeMethods} from 'shared\/ReactTypes';\n+import type {ReactScopeMethods} from 'shared\/ReactTypes';\n import type {KeyboardEvent} from 'react-interactions\/events\/keyboard';\n \n import React from 'react';\n@@ -32,14 +32,18 @@ type FocusTableProps = {|\n ) => void,\n wrapX?: boolean,\n wrapY?: boolean,\n- tabScope?: ReactScope,\n+ tabScopeQuery?: (type: string | Object, props: Object) => boolean,\n allowModifiers?: boolean,\n |};\n \n const {useRef} = React;\n \n-function focusScope(cell: ReactScopeMethods, event?: KeyboardEvent): void {\n- const firstScopedNode = cell.getFirstNode();\n+function focusScope(\n+ scopeQuery: (type: string | Object, props: Object) => boolean,\n+ cell: ReactScopeMethods,\n+ event?: KeyboardEvent,\n+): void {\n+ const firstScopedNode = cell.queryFirstNode(scopeQuery);\n if (firstScopedNode !== null) {\n firstScopedNode.focus();\n if (event) {\n@@ -50,6 +54,7 @@ function focusScope(cell: ReactScopeMethods, event?: KeyboardEvent): void {\n \n \/\/ This takes into account colSpan\n function focusCellByColumnIndex(\n+ scopeQuery: (type: string | Object, props: Object) => boolean,\n row: ReactScopeMethods,\n columnIndex: number,\n event?: KeyboardEvent,\n@@ -62,7 +67,7 @@ function focusCellByColumnIndex(\n if (cell) {\n colSize += cell.getProps().colSpan || 1;\n if (colSize > columnIndex) {\n- focusScope(cell, event);\n+ focusScope(scopeQuery, cell, event);\n return;\n }\n }\n@@ -157,36 +162,31 @@ function hasModifierKey(event: KeyboardEvent): boolean {\n }\n \n export function createFocusTable(\n- scope: ReactScope,\n+ scopeQuery: (type: string | Object, props: Object) => boolean,\n ): [\n (FocusTableProps) => React.Node,\n (FocusRowProps) => React.Node,\n (FocusCellProps) => React.Node,\n ] {\n- const TableScope = React.unstable_createScope(scope.fn);\n+ const TableScope = React.unstable_createScope();\n \n function Table({\n children,\n onKeyboardOut,\n wrapX,\n wrapY,\n- tabScope: TabScope,\n+ tabScopeQuery,\n allowModifiers,\n }: FocusTableProps): React.Node {\n- const tabScopeRef = useRef(null);\n return (\n \n- {TabScope ? (\n- {children}<\/TabScope>\n- ) : (\n- children\n- )}\n+ {children}\n <\/TableScope>\n );\n }\n@@ -206,19 +206,25 @@ export function createFocusTable(\n }\n const key = event.key;\n if (key === 'Tab') {\n- const tabScope = getTableProps(currentCell).tabScopeRef.current;\n- if (tabScope) {\n- const activeNode = document.activeElement;\n- const nodes = tabScope.getAllNodes();\n- for (let i = 0; i < nodes.length; i++) {\n- const node = nodes[i];\n- if (node !== activeNode) {\n- setElementCanTab(node, false);\n- } else {\n- setElementCanTab(node, true);\n+ const tabScopeQuery = getTableProps(currentCell).tabScopeQuery;\n+ if (tabScopeQuery) {\n+ const rowScope = currentCell.getParent();\n+ if (rowScope) {\n+ const tableScope = rowScope.getParent();\n+ if (tableScope) {\n+ const activeNode = document.activeElement;\n+ const nodes = tableScope.queryAllNodes(tabScopeQuery);\n+ for (let i = 0; i < nodes.length; i++) {\n+ const node = nodes[i];\n+ if (node !== activeNode) {\n+ setElementCanTab(node, false);\n+ } else {\n+ setElementCanTab(node, true);\n+ }\n+ }\n+ return;\n }\n }\n- return;\n }\n event.continuePropagation();\n return;\n@@ -240,12 +246,22 @@ export function createFocusTable(\n if (rows !== null) {\n if (rowIndex > 0) {\n const row = rows[rowIndex - 1];\n- focusCellByColumnIndex(row, cellIndexWithColSpan, event);\n+ focusCellByColumnIndex(\n+ scopeQuery,\n+ row,\n+ cellIndexWithColSpan,\n+ event,\n+ );\n } else if (rowIndex === 0) {\n const wrapY = getTableProps(currentCell).wrapY;\n if (wrapY) {\n const row = rows[rows.length - 1];\n- focusCellByColumnIndex(row, cellIndexWithColSpan, event);\n+ focusCellByColumnIndex(\n+ scopeQuery,\n+ row,\n+ cellIndexWithColSpan,\n+ event,\n+ );\n } else {\n triggerNavigateOut(currentCell, 'up', event);\n }\n@@ -264,13 +280,23 @@ export function createFocusTable(\n const wrapY = getTableProps(currentCell).wrapY;\n if (wrapY) {\n const row = rows[0];\n- focusCellByColumnIndex(row, cellIndexWithColSpan, event);\n+ focusCellByColumnIndex(\n+ scopeQuery,\n+ row,\n+ cellIndexWithColSpan,\n+ event,\n+ );\n } else {\n triggerNavigateOut(currentCell, 'down', event);\n }\n } else {\n const row = rows[rowIndex + 1];\n- focusCellByColumnIndex(row, cellIndexWithColSpan, event);\n+ focusCellByColumnIndex(\n+ scopeQuery,\n+ row,\n+ cellIndexWithColSpan,\n+ event,\n+ );\n }\n }\n }\n@@ -281,12 +307,12 @@ export function createFocusTable(\n const [cells, rowIndex] = getRowCells(currentCell);\n if (cells !== null) {\n if (rowIndex > 0) {\n- focusScope(cells[rowIndex - 1]);\n+ focusScope(scopeQuery, cells[rowIndex - 1]);\n event.preventDefault();\n } else if (rowIndex === 0) {\n const wrapX = getTableProps(currentCell).wrapX;\n if (wrapX) {\n- focusScope(cells[cells.length - 1], event);\n+ focusScope(scopeQuery, cells[cells.length - 1], event);\n } else {\n triggerNavigateOut(currentCell, 'left', event);\n }\n@@ -301,12 +327,12 @@ export function createFocusTable(\n if (rowIndex === cells.length - 1) {\n const wrapX = getTableProps(currentCell).wrapX;\n if (wrapX) {\n- focusScope(cells[0], event);\n+ focusScope(scopeQuery, cells[0], event);\n } else {\n triggerNavigateOut(currentCell, 'right', event);\n }\n } else {\n- focusScope(cells[rowIndex + 1], event);\n+ focusScope(scopeQuery, cells[rowIndex + 1], event);\n }\n }\n }\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/TabbableScope.js b\/packages\/react-interactions\/accessibility\/src\/TabbableScopeQuery.js\nsimilarity index 78%\nrename from packages\/react-interactions\/accessibility\/src\/TabbableScope.js\nrename to packages\/react-interactions\/accessibility\/src\/TabbableScopeQuery.js\nindex 5cf27277ad..c6ab0d3e54 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/TabbableScope.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/TabbableScopeQuery.js\n@@ -7,9 +7,7 @@\n @flow\n *\/\n \n-import React from 'react';\n-\n-const tabFocusableImpl = (type: string, props: Object): boolean => {\n+const tabbableScopeQuery = (type: string, props: Object): boolean => {\n if (props.tabIndex === -1 || props.disabled) {\n return false;\n }\n@@ -32,6 +30,4 @@ const tabFocusableImpl = (type: string, props: Object): boolean => {\n );\n };\n \n-const TabbableScope = React.unstable_createScope(tabFocusableImpl);\n-\n-export default TabbableScope;\n+export default tabbableScopeQuery;\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/tests\/FocusContain-test.internal.js b\/packages\/react-interactions\/accessibility\/src\/tests\/FocusContain-test.internal.js\nindex 4a53da46f9..387fc4883e 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/tests\/FocusContain-test.internal.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/tests\/FocusContain-test.internal.js\n@@ -12,7 +12,7 @@ import {createEventTarget} from 'react-interactions\/events\/src\/dom\/testing-libra\n let React;\n let ReactFeatureFlags;\n let FocusContain;\n-let TabbableScope;\n+let tabbableScopeQuery;\n \n describe('FocusContain', () => {\n beforeEach(() => {\n@@ -21,7 +21,7 @@ describe('FocusContain', () => {\n ReactFeatureFlags.enableScopeAPI = true;\n ReactFeatureFlags.enableFlareAPI = true;\n FocusContain = require('..\/FocusContain').default;\n- TabbableScope = require('..\/TabbableScope').default;\n+ tabbableScopeQuery = require('..\/TabbableScopeQuery').default;\n React = require('react');\n });\n \n@@ -48,7 +48,7 @@ describe('FocusContain', () => {\n const divRef = React.createRef();\n \n const Test = () => (\n- \n+ \n \n

dillon1000/react

Files changed