Toast focus management take 2 (#6223)

* Toast focus management and announcements for all AT

Author: snowystinger

packages/@react-aria/toast/intl/en-US.json

@@ -1,4 +1,4 @@
 {
   "close": "Close",
-  "notifications": "Notifications"
+  "notifications": "{count, plural, one {# notification} other {# notifications}}."
 }

packages/@react-aria/toast/src/useToast.ts

@@ -15,8 +15,8 @@ import {AriaLabelingProps, DOMAttributes, FocusableElement} from '@react-types/s
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {QueuedToast, ToastState} from '@react-stately/toast';
-import {RefObject, useEffect, useRef} from 'react';
-import {useId, useLayoutEffect, useSlotId} from '@react-aria/utils';
+import React, {RefObject, useEffect} from 'react';
+import {useId, useSlotId} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface AriaToastProps<T> extends AriaLabelingProps {
@@ -25,8 +25,10 @@ export interface AriaToastProps<T> extends AriaLabelingProps {
 }
 
 export interface ToastAria {
-  /** Props for the toast container element. */
+  /** Props for the toast container, non-modal dialog element. */
   toastProps: DOMAttributes,
+  /** Props for the toast content alert message. */
+  contentProps: DOMAttributes,
   /** Props for the toast title element. */
   titleProps: DOMAttributes,
   /** Props for the toast description element, if any. */
@@ -39,6 +41,7 @@ export interface ToastAria {
  * Provides the behavior and accessibility implementation for a toast component.
  * Toasts display brief, temporary notifications of actions, errors, or other events in an application.
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function useToast<T>(props: AriaToastProps<T>, state: ToastState<T>, ref: RefObject<FocusableElement>): ToastAria {
   let {
     key,
@@ -58,44 +61,35 @@ export function useToast<T>(props: AriaToastProps<T>, state: ToastState<T>, ref:
     };
   }, [timer, timeout]);
 
-  // Restore focus to the toast container on unmount.
-  // If there are no more toasts, the container will be unmounted
-  // and will restore focus to wherever focus was before the user
-  // focused the toast region.
-  let focusOnUnmount = useRef(null);
-  useLayoutEffect(() => {
-    let container = ref.current.closest('[role=region]') as HTMLElement;
-    return () => {
-      if (container && container.contains(document.activeElement)) {
-        // Focus must be delayed for focus ring to appear, but we can't wait
-        // until useEffect cleanup to check if focus was inside the container.
-        focusOnUnmount.current = container;
-      }
-    };
-  }, [ref]);
-
-  // eslint-disable-next-line
+  let [isEntered, setIsEntered] = React.useState(false);
   useEffect(() => {
-    return () => {
-      if (focusOnUnmount.current) {
-        focusOnUnmount.current.focus();
-      }
-    };
-  }, [ref]);
+    if (animation === 'entering') {
+      setIsEntered(true);
+    }
+  }, [animation]);
 
   let titleId = useId();
   let descriptionId = useSlotId();
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/toast');
 
   return {
     toastProps: {
-      role: 'alert',
+      role: 'alertdialog',
+      'aria-modal': 'false',
       'aria-label': props['aria-label'],
       'aria-labelledby': props['aria-labelledby'] || titleId,
       'aria-describedby': props['aria-describedby'] || descriptionId,
       'aria-details': props['aria-details'],
       // Hide toasts that are animating out so VoiceOver doesn't announce them.
-      'aria-hidden': animation === 'exiting' ? 'true' : undefined
+      'aria-hidden': animation === 'exiting' ? 'true' : undefined,
+      tabIndex: 0
+    },
+    contentProps: {
+      role: 'alert',
+      'aria-atomic': 'true',
+      style: {
+        visibility: isEntered || animation === null ? 'visible' : 'hidden'
+      }
     },
     titleProps: {
       id: titleId

packages/@react-aria/toast/src/useToastRegion.ts

@@ -1,5 +1,5 @@
 import {AriaLabelingProps, DOMAttributes} from '@react-types/shared';
-import {focusWithoutScrolling, mergeProps} from '@react-aria/utils';
+import {focusWithoutScrolling, mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {getInteractionModality, useFocusWithin, useHover} from '@react-aria/interactions';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -29,14 +29,80 @@ export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/toast');
   let {landmarkProps} = useLandmark({
     role: 'region',
-    'aria-label': props['aria-label'] || stringFormatter.format('notifications')
+    'aria-label': props['aria-label'] || stringFormatter.format('notifications', {count: state.visibleToasts.length})
   }, ref);
 
   let {hoverProps} = useHover({
     onHoverStart: state.pauseAll,
     onHoverEnd: state.resumeAll
   });
 
+  // Manage focus within the toast region.
+  // If a focused containing toast is removed, move focus to the next toast, or the previous toast if there is no next toast.
+  // We might be making an assumption with how this works if someone implements the priority queue differently, or
+  // if they only show one toast at a time.
+  let toasts = useRef([]);
+  let prevVisibleToasts = useRef(state.visibleToasts);
+  let focusedToast = useRef(null);
+  useLayoutEffect(() => {
+    // If no toast has focus, then don't do anything.
+    if (focusedToast.current === -1 || state.visibleToasts.length === 0) {
+      toasts.current = [];
+      prevVisibleToasts.current = state.visibleToasts;
+      return;
+    }
+    toasts.current = [...ref.current.querySelectorAll('[role="alertdialog"]')];
+    // If the visible toasts haven't changed, we don't need to do anything.
+    if (prevVisibleToasts.current.length === state.visibleToasts.length
+      && state.visibleToasts.every((t, i) => t.key === prevVisibleToasts.current[i].key)) {
+      prevVisibleToasts.current = state.visibleToasts;
+      return;
+    }
+    // Get a list of all toasts by index and add info if they are removed.
+    let allToasts = prevVisibleToasts.current
+      .map((t, i) => ({
+        ...t,
+        i,
+        isRemoved: !state.visibleToasts.some(t2 => t.key === t2.key)
+      }));
+
+    let removedFocusedToastIndex = allToasts.findIndex(t => t.i === focusedToast.current);
+
+    // If the focused toast was removed, focus the next or previous toast.
+    if (removedFocusedToastIndex > -1) {
+      let i = 0;
+      let nextToast;
+      let prevToast;
+      while (i <= removedFocusedToastIndex) {
+        if (!allToasts[i].isRemoved) {
+          prevToast = Math.max(0, i - 1);
+        }
+        i++;
+      }
+      while (i < allToasts.length) {
+        if (!allToasts[i].isRemoved) {
+          nextToast = i - 1;
+          break;
+        }
+        i++;
+      }
+
+      // in the case where it's one toast at a time, both will be undefined, but we know the index must be 0
+      if (prevToast === undefined && nextToast === undefined) {
+        prevToast = 0;
+      }
+
+      // prioritize going to newer toasts
+      if (prevToast >= 0 && prevToast < toasts.current.length) {
+        focusWithoutScrolling(toasts.current[prevToast]);
+      } else if (nextToast >= 0 && nextToast < toasts.current.length) {
+        focusWithoutScrolling(toasts.current[nextToast]);
+      }
+    }
+
+    prevVisibleToasts.current = state.visibleToasts;
+  }, [state.visibleToasts, ref]);
+
   let lastFocused = useRef(null);
   let {focusWithinProps} = useFocusWithin({
     onFocusWithin: (e) => {
@@ -49,10 +115,22 @@ export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState
     }
   });
 
-  // When the region unmounts, restore focus to the last element that had focus
-  // before the user moved focus into the region.
-  // TODO: handle when the element has unmounted like FocusScope does?
-  // eslint-disable-next-line arrow-body-style
+  // When the number of visible toasts becomes 0 or the region unmounts,
+  // restore focus to the last element that had focus before the user moved focus
+  // into the region. FocusScope restore focus doesn't update whenever the focus
+  // moves in, it only happens once, so we correct it.
+  // Because we're in a hook, we can't control if the user unmounts or not.
+  useEffect(() => {
+    if (state.visibleToasts.length === 0 && lastFocused.current && document.body.contains(lastFocused.current)) {
+      if (getInteractionModality() === 'pointer') {
+        focusWithoutScrolling(lastFocused.current);
+      } else {
+        lastFocused.current.focus();
+      }
+      lastFocused.current = null;
+    }
+  }, [ref, state.visibleToasts.length]);
+
   useEffect(() => {
     return () => {
       if (lastFocused.current && document.body.contains(lastFocused.current)) {
@@ -61,6 +139,7 @@ export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState
         } else {
           lastFocused.current.focus();
         }
+        lastFocused.current = null;
       }
     };
   }, [ref]);
@@ -73,7 +152,16 @@ export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState
       //   - allows focus even outside a containing focus scope
       //   - doesn’t dismiss overlays when clicking on it, even though it is outside
       // @ts-ignore
-      'data-react-aria-top-layer': true
+      'data-react-aria-top-layer': true,
+      // listen to focus events separate from focuswithin because that will only fire once
+      // and we need to follow all focus changes
+      onFocus: (e) => {
+        let target = e.target.closest('[role="alertdialog"]');
+        focusedToast.current = toasts.current.findIndex(t => t === target);
+      },
+      onBlur: () => {
+        focusedToast.current = -1;
+      }
     })
   };
 }

packages/@react-aria/toast/stories/Example.tsx

@@ -43,13 +43,15 @@ function ToastRegion() {
 function Toast(props) {
   let state = useContext(ToastContext);
   let ref = useRef(null);
-  let {toastProps, titleProps, closeButtonProps} = useToast(props, state, ref);
+  let {toastProps, contentProps, titleProps, closeButtonProps} = useToast(props, state, ref);
   let buttonRef = useRef();
   let {buttonProps} = useButton(closeButtonProps, buttonRef);
 
   return (
     <div {...toastProps} ref={ref} style={{margin: 20, display: 'flex', gap: 5}}>
-      <div {...titleProps}>{props.toast.content}</div>
+      <div {...contentProps}>
+        <div {...titleProps}>{props.toast.content}</div>
+      </div>
       <button {...buttonProps} ref={buttonRef}>x</button>
     </div>
   );

packages/@react-aria/toast/test/useToast.test.js

@@ -10,10 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {renderHook} from '@react-spectrum/test-utils-internal';
-import {useRef} from 'react';
+import {act, fireEvent, pointerMap, render, renderHook, within} from '@react-spectrum/test-utils-internal';
+import {composeStories} from '@storybook/react';
+import React, {useRef} from 'react';
+import * as stories from '../stories/useToast.stories';
+import userEvent from '@testing-library/user-event';
 import {useToast} from '../';
 
+let {Default} = composeStories(stories);
+
 describe('useToast', () => {
   let close = jest.fn();
 
@@ -27,9 +32,10 @@ describe('useToast', () => {
   };
 
   it('handles defaults', function () {
-    let {closeButtonProps, toastProps, titleProps} = renderToastHook({}, {close});
+    let {closeButtonProps, toastProps, contentProps, titleProps} = renderToastHook({}, {close});
 
-    expect(toastProps.role).toBe('alert');
+    expect(toastProps.role).toBe('alertdialog');
+    expect(contentProps.role).toBe('alert');
     expect(closeButtonProps['aria-label']).toBe('Close');
     expect(typeof closeButtonProps.onPress).toBe('function');
     expect(titleProps.id).toEqual(toastProps['aria-labelledby']);
@@ -43,3 +49,50 @@ describe('useToast', () => {
     expect(close).toHaveBeenCalledWith(1);
   });
 });
+
+describe('single toast at a time', () => {
+  function fireAnimationEnd(alert) {
+    let e = new Event('animationend', {bubbles: true, cancelable: false});
+    e.animationName = 'fade-out';
+    fireEvent(alert, e);
+  }
+
+  let user;
+  beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});
+  });
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    act(() => jest.runAllTimers());
+  });
+
+  it('moves focus to the next toast when it appears', async () => {
+    let tree = render(<Default />);
+    // eslint-disable-next-line
+    let [bLow, bMedium, bHigh] = tree.getAllByRole('button');
+
+    await user.click(bHigh);
+    await user.click(bLow);
+
+    let toast = tree.getByRole('alertdialog');
+    expect(toast.textContent).toContain('High');
+    let closeButton = within(toast).getByRole('button');
+    await user.click(closeButton);
+    fireAnimationEnd(toast);
+
+    toast = tree.getByRole('alertdialog');
+    expect(toast.textContent).toContain('Low');
+    expect(toast).toHaveFocus();
+
+    closeButton = within(toast).getByRole('button');
+    await user.click(closeButton);
+    fireAnimationEnd(toast);
+
+    expect(tree.queryByRole('alertdialog')).toBeNull();
+    expect(bLow).toHaveFocus();
+  });
+});

packages/@react-spectrum/breadcrumbs/test/Breadcrumbs.test.js

@@ -333,7 +333,7 @@ describe('Breadcrumbs', function () {
     expect(onAction).toHaveBeenCalledWith('Folder 1');
 
     // menu item
-    expect(item1[1]).not.toHaveAttribute('role');
+    expect(item1[1]).toHaveAttribute('role', 'none');
     await user.click(item1[1]);
     expect(onAction).toHaveBeenCalledWith('Folder 1');
   });

packages/@react-spectrum/text/src/Text.tsx

@@ -26,7 +26,7 @@ function Text(props: TextProps, ref: DOMRef) {
   let domRef = useDOMRef(ref);
 
   return (
-    <span {...filterDOMProps(otherProps)} {...styleProps} ref={domRef}>
+    <span role="none" {...filterDOMProps(otherProps)} {...styleProps} ref={domRef}>
       {children}
     </span>
   );