[UEPR-462] Ensure "Stage" and "Target" editor regions are navigable through tab navigation #424
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,11 +3,15 @@ import PropTypes from 'prop-types'; | |
|
|
||
| export const ModalFocusContext = createContext(null); | ||
|
|
||
| const ALLOW_SELECTOR = '[data-focusable]'; | ||
|
|
||
| /** | ||
| * A context provider that manages focus restoration strategies for modals. | ||
| * | ||
| * It keeps track of the element that was focused prior to a modal opening (`captureFocus`) | ||
| * and attempts to restore focus to that element when the modal closes (`restoreFocus`). | ||
| * It can make all other elements outside the modal unfocusable via tab (`restrictFocusableElements`) | ||
| * and return their original focusability (`unrestrictFocusableElements`). | ||
| * | ||
| * This uses a ref to store the DOM element, ensuring that focus restoration only occurs | ||
| * if the original element is still connected to the DOM. | ||
|
|
@@ -29,12 +33,53 @@ export const ModalFocusProvider = ({children}) => { | |
| } | ||
| }, []); | ||
|
|
||
| // We set all other elements to -1 so 'tab' can't access them | ||
| const makeUnfocusable = el => { | ||
| if (el.tabIndex >= 0) { | ||
| el.dataset.prevTabIndex = el.tabIndex; | ||
| el.tabIndex = -1; | ||
| } | ||
| }; | ||
|
|
||
| // We restore their original 'tabIndex' | ||
| const restoreTabIndex = el => { | ||
| if (el.dataset.prevTabIndex) { | ||
| el.tabIndex = Number(el.dataset.prevTabIndex); | ||
| delete el.dataset.prevTabIndex; | ||
| } | ||
| }; | ||
|
|
||
| const restrictFocusableElements = useCallback(() => { | ||
| const allElements = document.body.querySelectorAll('*'); | ||
|
|
||
| allElements.forEach(el => { | ||
| if (!el.matches(ALLOW_SELECTOR)) { | ||
| makeUnfocusable(el); | ||
| } | ||
| }); | ||
| }, []); | ||
|
Comment on lines
+52
to
+60
Contributor
There was a problem hiding this comment. Hmm, I like the idea of trapping focus inside the stage when it's in full screen, but making every single element have The main issue is that this isn't a real modal, but we want to treat it like one. I don't see using an actual dialog as a viable option though. But maybe instead of manually changing the
I'm fine with using What do you think? I'd like to here @KManolov3's thoughts as well. There's something similar (although not entirely) implemented here, which I think could be helpful. |
||
|
|
||
| const unrestrictFocusableElements = useCallback(() => { | ||
| const allElements = document.body.querySelectorAll('*'); | ||
|
|
||
| allElements.forEach(el => { | ||
| restoreTabIndex(el); | ||
| }); | ||
| }, []); | ||
|
|
||
| const value = useMemo( | ||
| () => ({ | ||
| captureFocus, | ||
| restoreFocus, | ||
| restrictFocusableElements, | ||
| unrestrictFocusableElements | ||
| }), | ||
| [ | ||
| captureFocus, | ||
| restoreFocus, | ||
| restrictFocusableElements, | ||
| unrestrictFocusableElements | ||
| ] | ||
| ); | ||
|
|
||
| return ( | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import {useEffect, useRef} from 'react'; | ||
|
Contributor
There was a problem hiding this comment. To be honest, this feels a bit like an overkill to me, and I'm not a huge fan of introducing very custom and highly specific logic/hooks for this... I am worried it could become harder to maintain over time. Maybe a simpler approach would work, for example handling keydown events directly in the |
||
|
|
||
| /** | ||
| * Custom hook that detects focus moving outside of the given container | ||
| * and popover elements and calls onClose when that happens. | ||
| * | ||
| * Useful for closing modals, popovers, or dropdowns when focus leaves | ||
| * their interactive area (e.g. via keyboard navigation). | ||
| * @param {() => void} onClose | ||
| * Closing popover function when focus moves outside both the container and popover. | ||
| * @returns {object} | ||
| * - containerRef: reference to the container of the element that activates the popover, | ||
| * - popoverRef: reference to be attached to popover | ||
| * }} | ||
| */ | ||
| export default function useFocusOutside (onClose) { | ||
| const containerRef = useRef(null); | ||
|
Contributor
Author
There was a problem hiding this comment. I am actually leaning more towards replacing this with inputRef or more generically openingElementRef that we apply to the input or whatever element activates the popover instead of the container including them both. |
||
| const popoverRef = useRef(null); | ||
|
|
||
| useEffect(() => { | ||
| const handleFocusIn = event => { | ||
| const target = event.target; | ||
| if ( | ||
| (containerRef.current && containerRef.current.contains(target)) || | ||
| (popoverRef.current && popoverRef.current.contains(target)) | ||
| ) { | ||
| return; | ||
| } | ||
|
|
||
| onClose(); | ||
| }; | ||
|
|
||
| document.addEventListener('focusin', handleFocusIn); | ||
|
|
||
| return () => { | ||
| document.removeEventListener('focusin', handleFocusIn); | ||
| }; | ||
| }, [containerRef, onClose]); | ||
|
|
||
| return {containerRef, popoverRef}; | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we can run this by Tereza or someone just to make sure that we'd want to use
Start projectfor the accessibility label? As opposed toGreen Flagfor example?