diff --git a/packages/components/package.json b/packages/components/package.json index 1e360b69..894cbc5a 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.21.1-alpha.9", + "version": "0.21.1-alpha.10", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": { diff --git a/packages/components/src/components/Snackbar/Snackbar.tsx b/packages/components/src/components/Snackbar/Snackbar.tsx index c540ac0c..3d938009 100644 --- a/packages/components/src/components/Snackbar/Snackbar.tsx +++ b/packages/components/src/components/Snackbar/Snackbar.tsx @@ -1,4 +1,5 @@ import { + AccessibilityInfo, Pressable, PressableStateCallbackType, Text, @@ -11,7 +12,7 @@ import { } from 'react-native' import { ToastProps } from 'react-native-toast-notifications/lib/typescript/toast' import { useTranslation } from 'react-i18next' -import React, { FC } from 'react' +import React, { FC, useEffect } from 'react' import { Icon, IconProps } from '../Icon/Icon' import { Spacer } from '../Spacer/Spacer' @@ -74,7 +75,10 @@ const SnackbarButton: FC = ({ text, onPress }) => { ) } -export type SnackbarProps = Omit & snackbarData +export type SnackbarProps = Omit & + snackbarData & { + message: string + } /** * To use SnackbarProvider, import SnackbarProvider in App.tsx (or similar foundational file) and @@ -106,10 +110,18 @@ export const Snackbar: FC = (toast) => { const fontScale = useWindowDimensions().fontScale const theme = useTheme() const { t } = useTranslation() - // const a11yAnnounce = - // AccessibilityInfo.announceForAccessibility('Test announce two') - // useEffect(() => a11yAnnounce, [a11yAnnounce]) + /** + * useEffect to handle announcing the Snackbar appearing to the screen reader + */ + useEffect(() => { + // Delay to prevent iOS from instantly refocusing the action prompting the Snackbar if synchronous + setTimeout( + () => AccessibilityInfo.announceForAccessibility(messageA11y || toast.message), + 50, + ) + // Empty dependency array so useEffect only runs on initial render + }, []) const helperText: TextStyle = { fontFamily: 'SourceSansPro-Regular',