fix: make Toasts announce when rendered in NVDA (#7859)

* Fix so that Toasts are properly announced by NVDA when they render

* get rid of direct toast dep in favor of monopackage

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

Co-authored-by: Devon Govett <devongovett@gmail.com>

---------

Co-authored-by: Devon Govett <devongovett@gmail.com>

Author: LFDanLu

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

@@ -15,7 +15,7 @@ import {AriaLabelingProps, DOMAttributes, FocusableElement, RefObject} from '@re
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {QueuedToast, ToastState} from '@react-stately/toast';
-import {useEffect} from 'react';
+import {useEffect, useState} from 'react';
 import {useId, useSlotId} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
@@ -64,6 +64,14 @@ export function useToast<T>(props: AriaToastProps<T>, state: ToastState<T>, ref:
   let descriptionId = useSlotId();
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/toast');
 
+  // This is required for NVDA announcements, without it NVDA will NOT announce the toast when it appears.
+  // Originally was tied to animationStart/End via https://github.com/adobe/react-spectrum/pull/6223/commits/e22e319df64958e822ab7cd9685e96818cae9ba5
+  // but toasts don't always have animations.
+  let [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
   return {
     toastProps: {
       role: 'alertdialog',
@@ -76,7 +84,8 @@ export function useToast<T>(props: AriaToastProps<T>, state: ToastState<T>, ref:
     },
     contentProps: {
       role: 'alert',
-      'aria-atomic': 'true'
+      'aria-atomic': 'true',
+      'aria-hidden': isVisible ? undefined : 'true'
     },
     titleProps: {
       id: titleId

packages/react-aria-components/package.json

@@ -48,7 +48,6 @@
     "@react-aria/interactions": "^3.23.0",
     "@react-aria/live-announcer": "^3.4.1",
     "@react-aria/menu": "^3.17.0",
-    "@react-aria/toast": "3.0.0-beta.19",
     "@react-aria/toolbar": "3.0.0-beta.12",
     "@react-aria/utils": "^3.27.0",
     "@react-aria/virtualizer": "^4.1.1",

packages/react-aria-components/src/Toast.tsx

@@ -10,12 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaToastProps, AriaToastRegionProps, useToast, useToastRegion} from '@react-aria/toast';
+import {AriaToastProps, AriaToastRegionProps, mergeProps, useFocusRing, useToast, useToastRegion} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {createPortal} from 'react-dom';
 import {forwardRefType} from '@react-types/shared';
-import {mergeProps, useFocusRing} from 'react-aria';
 import {QueuedToast, ToastQueue, ToastState, useToastQueue} from '@react-stately/toast';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactElement, useContext} from 'react';
 import {TextContext} from './Text';

yarn.lock

@@ -29030,7 +29030,6 @@ __metadata:
     "@react-aria/interactions": "npm:^3.23.0"
     "@react-aria/live-announcer": "npm:^3.4.1"
     "@react-aria/menu": "npm:^3.17.0"
-    "@react-aria/toast": "npm:3.0.0-beta.19"
     "@react-aria/toolbar": "npm:3.0.0-beta.12"
     "@react-aria/utils": "npm:^3.27.0"
     "@react-aria/virtualizer": "npm:^4.1.1"