diff --git a/CHANGELOG.md b/CHANGELOG.md index 211b50e760..c5da183949 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix bidirectional `FocusZone` to land focus correctly on DOWN key press after series of UP arrow keys @sophieH29 ([#1794](https://github.com/stardust-ui/react/pull/1794)) - Fix `hand` icon in Teams theme @lucivpav ([#1782](https://github.com/stardust-ui/react/pull/1782)) - ESC key should close the last opened `Popup` or `Dialog` if body has focus @sophieH29 ([#1807](https://github.com/stardust-ui/react/pull/1807)) +- Correctly define current document object of the `FocusZone` and `FocusTrapZone` @sophieH29 ([#1820](https://github.com/stardust-ui/react/pull/1820)) ### Features - Add `overwrite` prop to `Provider` @layershifter ([#1780](https://github.com/stardust-ui/react/pull/1780)) diff --git a/packages/react/src/lib/accessibility/FocusZone/CHANGELOG.md b/packages/react/src/lib/accessibility/FocusZone/CHANGELOG.md index 0fb1399ad3..aee15d24f4 100644 --- a/packages/react/src/lib/accessibility/FocusZone/CHANGELOG.md +++ b/packages/react/src/lib/accessibility/FocusZone/CHANGELOG.md @@ -13,6 +13,7 @@ This is a list of changes made to this Stardust copy of FocusZone in comparison - Update tabindexes and focus alignment when item is focused programatically @sophieH29 ([#1098](https://github.com/stardust-ui/react/pull/1098)) - `FocusZone` should respect elements with `contenteditable` attribute on Home/End key press @sophieH29 ([#1749](https://github.com/stardust-ui/react/pull/1749)) - Fix bidirectional `FocusZone` to land focus correctly on DOWN key press after series of UP arrow keys @sophieH29 ([#1794](https://github.com/stardust-ui/react/pull/1794)) +- Use always `getDocument` to correctly define current document object @sophieH29 ([#1820](https://github.com/stardust-ui/react/pull/1820)) ### Features - Add embed mode for FocusZone and new Chat behavior ([#233](https://github.com/stardust-ui/react/pull/233)) @@ -68,12 +69,13 @@ This is a list of changes made to the Stardust copy of FocusTrapZone in comparis ### BREAKING CHANGES - Allow using `firstFocusableSelector` for all type of selectors, not only class names @sophieH29 ([#1732](https://github.com/stardust-ui/react/pull/1732)) -### fixes +### Fixes - Do not focus trigger on outside click @sophieH29 ([#627](https://github.com/stardust-ui/react/pull/627)) - Do not hide aria-live regions from accessibility tree @sophieH29 ([#917](https://github.com/stardust-ui/react/pull/917)) - Do not propagate any keyboard events @sophieH29 ([#1180](https://github.com/stardust-ui/react/pull/1180)) +- Use always `getDocument` to correctly define current document object @sophieH29 ([#1820](https://github.com/stardust-ui/react/pull/1820)) -### features +### Features - Add focus trap zone [#239](https://github.com/stardust-ui/react/pull/239) - Used Stardust utils instead of Fabric utilities: - Used `EventListener` [#949](https://github.com/stardust-ui/react/pull/949) diff --git a/packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx b/packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx index 97ecefb377..1a94b337b0 100644 --- a/packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx +++ b/packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx @@ -9,6 +9,7 @@ import { getFirstTabbable, getLastTabbable, getWindow, + getDocument, focusAsync, HIDDEN_FROM_ACC_TREE, } from './focusUtilities' @@ -74,7 +75,8 @@ export default class FocusTrapZone extends React.Component { - const focusedElement = document.activeElement as HTMLElement + const doc = getDocument(this._root.current) + const focusedElement = doc.activeElement as HTMLElement focusedElement && this._forceFocusInTrap(ev, focusedElement) } @@ -414,16 +420,18 @@ export default class FocusTrapZone extends React.Component { - const bodyChildren = (document.body && document.body.children) || [] + const doc = getDocument(this._root.current) + const bodyChildren = (doc.body && doc.body.children) || [] - if (bodyChildren.length && !document.body.contains(this._root.current)) { + if (bodyChildren.length && !doc.body.contains(this._root.current)) { // In case popup render options will change /* eslint-disable-next-line no-console */ console.warn( @@ -449,7 +457,8 @@ export default class FocusTrapZone extends React.Component { - const hiddenElements = document.querySelectorAll(`[${HIDDEN_FROM_ACC_TREE}="true"]`) + const doc = getDocument(this._root.current) + const hiddenElements = doc.querySelectorAll(`[${HIDDEN_FROM_ACC_TREE}="true"]`) for (let index = 0; index < hiddenElements.length; index++) { const element = hiddenElements[index] element.removeAttribute('aria-hidden') diff --git a/packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx b/packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx index 9a4c3d8568..cbe20b010d 100644 --- a/packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx +++ b/packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx @@ -131,8 +131,9 @@ export default class FocusZone extends React.Component implement this.windowElement = getWindow(this._root.current) let parentElement = getParent(this._root.current) + const doc = getDocument(this._root.current) - while (parentElement && parentElement !== document.body && parentElement.nodeType === 1) { + while (parentElement && parentElement !== doc.body && parentElement.nodeType === 1) { if (isElementFocusZone(parentElement)) { this._isInnerZone = true break @@ -513,7 +514,9 @@ export default class FocusZone extends React.Component implement return undefined } - if (document.activeElement === this._root.current && this._isInnerZone) { + const doc = getDocument(this._root.current) + + if (doc.activeElement === this._root.current && this._isInnerZone) { // If this element has focus, it is being controlled by a parent. // Ignore the keystroke. return undefined @@ -1004,13 +1007,10 @@ export default class FocusZone extends React.Component implement } getOwnerZone(element?: HTMLElement): HTMLElement | null { + const doc = getDocument(this._root.current) let parentElement = getParent(element as HTMLElement) - while ( - parentElement && - parentElement !== this._root.current && - parentElement !== document.body - ) { + while (parentElement && parentElement !== this._root.current && parentElement !== doc.body) { if (isElementFocusZone(parentElement)) { return parentElement }