1 | /*
|
2 | * Copyright 2020 Adobe. All rights reserved.
|
3 | * This file is licensed to you under the Apache License, Version 2.0 (the 'License');
|
4 | * you may not use this file except in compliance with the License. You may obtain a copy
|
5 | * of the License at http://www.apache.org/licenses/LICENSE-2.0
|
6 | *
|
7 | * Unless required by applicable law or agreed to in writing, software distributed under
|
8 | * the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
9 | * OF ANY KIND, either express or implied. See the License for the specific language
|
10 | * governing permissions and limitations under the License.
|
11 | */
|
12 |
|
13 | import {focusWithoutScrolling, runAfterTransition} from '@react-aria/utils';
|
14 | import {getInteractionModality} from '@react-aria/interactions';
|
15 |
|
16 | /**
|
17 | * A utility function that focuses an element while avoiding undesired side effects such
|
18 | * as page scrolling and screen reader issues with CSS transitions.
|
19 | */
|
20 | export function focusSafely(element: HTMLElement) {
|
21 | // If the user is interacting with a virtual cursor, e.g. screen reader, then
|
22 | // wait until after any animated transitions that are currently occurring on
|
23 | // the page before shifting focus. This avoids issues with VoiceOver on iOS
|
24 | // causing the page to scroll when moving focus if the element is transitioning
|
25 | // from off the screen.
|
26 | if (getInteractionModality() === 'virtual') {
|
27 | let lastFocusedElement = document.activeElement;
|
28 | runAfterTransition(() => {
|
29 | // If focus did not move and the element is still in the document, focus it.
|
30 | if (document.activeElement === lastFocusedElement && document.contains(element)) {
|
31 | focusWithoutScrolling(element);
|
32 | }
|
33 | });
|
34 | } else {
|
35 | focusWithoutScrolling(element);
|
36 | }
|
37 | }
|