fix(#2766): add focusSafely story

Update focusSafely method to account for focusing an element safely after a pointer event on another element.

Author: majornista

packages/@react-aria/focus/src/focusSafely.ts

@@ -50,14 +50,14 @@ const intersectionObserver = (() => {
  */
 export function focusSafely(element: HTMLElement) {
   const modality = getInteractionModality();
+  const lastFocusedElement = document.activeElement;
 
   // If the user is interacting with a virtual cursor, e.g. screen reader, then
   // wait until after any animated transitions that are currently occurring on
   // the page before shifting focus. This avoids issues with VoiceOver on iOS
   // causing the page to scroll when moving focus if the element is transitioning
   // from off the screen.
   if (modality === 'virtual') {
-    let lastFocusedElement = document.activeElement;
     runAfterTransition(() => {
       // If focus did not move and the element is still in the document, focus it.
       if (document.activeElement === lastFocusedElement && document.contains(element)) {
@@ -69,7 +69,19 @@ export function focusSafely(element: HTMLElement) {
     });
   } else {
     focusWithoutScrolling(element);
-    if (intersectionObserver && modality !== 'pointer') {
+    if (intersectionObserver &&
+      (
+        // Don't test for intersectionObserver to scroll the element into view
+        // within the document body on pointer events, unless the element being focused
+        // focusing safely is not the element that received interaction to focus it.
+        modality !== 'pointer' || 
+        !(
+          lastFocusedElement.contains(element) || 
+          element.contains(lastFocusedElement) || 
+          element === lastFocusedElement
+        )
+      )
+    ) {
       intersectionObserver.observe(element);
     }
   }

packages/@react-aria/focus/stories/FocusScope.stories.tsx

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {FocusScope} from '../';
+import {focusSafely, FocusScope} from '../';
 import {Meta, Story} from '@storybook/react';
-import React, {ReactNode, useState} from 'react';
+import React, {ReactNode, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
 
 const dialogsRoot = 'dialogsRoot';
@@ -116,3 +116,41 @@ KeyboardNavigationNoContain.args = {usePortal: false, contain: false};
 
 export const KeyboardNavigationInsidePortalNoContain = Template().bind({});
 KeyboardNavigationInsidePortalNoContain.args = {usePortal: true, contain: false};
+
+const FocusSafelyTemplate = (): Story => () => <FocusSafelyExample />;
+
+function FocusSafelyExample() {
+  const ref = useRef<HTMLButtonElement>();
+  const w = 12.5;
+  return (
+    <div>  
+      <button
+        type="button"
+        onClick={() => focusSafely(ref.current)}>
+        Focus Safely
+      </button>
+      <div
+        style={{
+          background: 'var(--spectrum-global-color-gray-50)',
+          border: '1px solid lightgray',
+          display: 'block',
+          margin: '1rem 0',
+          maxHeight: `${1.5 * w}rem`,
+          minWidth: `${w}rem`,
+          overflow: 'auto',
+          padding: '0 1rem'
+        }}>
+        <p><code>button</code> below the fold ⬇︎</p>
+        <button
+          type="button"
+          ref={ref} 
+          style={{
+            margin: `${1.6 * w}rem 0`
+          }}>Button to focus safely</button>
+        <p><code>button</code> above the fold ⬆︎</p>
+      </div>
+    </div>
+  );
+}
+
+export const FocusSafely = FocusSafelyTemplate().bind({});