| 22 | * as page scrolling and screen reader issues with CSS transitions. |
| 23 | */ |
| 24 | export function focusSafely(element: FocusableElement): void { |
| 25 | if (!element.isConnected) { |
| 26 | return; |
| 27 | } |
| 28 | |
| 29 | // If the user is interacting with a virtual cursor, e.g. screen reader, then |
| 30 | // wait until after any animated transitions that are currently occurring on |
| 31 | // the page before shifting focus. This avoids issues with VoiceOver on iOS |
| 32 | // causing the page to scroll when moving focus if the element is transitioning |
| 33 | // from off the screen. |
| 34 | const ownerDocument = getOwnerDocument(element); |
| 35 | if (getInteractionModality() === 'virtual') { |
| 36 | let lastFocusedElement = getActiveElement(ownerDocument); |
| 37 | runAfterTransition(() => { |
| 38 | const activeElement = getActiveElement(ownerDocument); |
| 39 | // If focus did not move or focus was lost to the body, and the element is still in the document, focus it. |
| 40 | if ( |
| 41 | (activeElement === lastFocusedElement || activeElement === ownerDocument.body) && |
| 42 | element.isConnected |
| 43 | ) { |
| 44 | focusWithoutScrolling(element); |
| 45 | } |
| 46 | }); |
| 47 | } else { |
| 48 | focusWithoutScrolling(element); |
| 49 | } |
| 50 | } |