diff --git a/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useIsScreenReaderEnabled.mdx b/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useIsScreenReaderEnabled.mdx deleted file mode 100644 index 388fb7bdf94..00000000000 --- a/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useIsScreenReaderEnabled.mdx +++ /dev/null @@ -1,8 +0,0 @@ -import HooksInfo from '../../../../src/components/HooksInfo' - -export const exampleString = `const screenReaderEnabled = useIsScreenReaderEnabled()\n -const setFocus = useCallback(() => { - if (ref.current && screenReaderEnabled) {} -}` - - diff --git a/VAMobile/src/App.tsx b/VAMobile/src/App.tsx index bce892ba296..89350277fd9 100644 --- a/VAMobile/src/App.tsx +++ b/VAMobile/src/App.tsx @@ -19,6 +19,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native' import { createStackNavigator } from '@react-navigation/stack' +import { useIsScreenReaderEnabled } from '@department-of-veterans-affairs/mobile-component-library' import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet' import { QueryClientProvider } from '@tanstack/react-query' import { ThemeProvider } from 'styled-components' @@ -64,7 +65,7 @@ import { SnackBarState } from 'store/slices/snackBarSlice' import { useColorScheme } from 'styles/themes/colorScheme' import theme, { getTheme, setColorScheme } from 'styles/themes/standardTheme' import getEnv from 'utils/env' -import { useAppDispatch, useFontScale, useIsScreenReaderEnabled } from 'utils/hooks' +import { useAppDispatch, useFontScale } from 'utils/hooks' import { useHeaderStyles, useTopPaddingAsHeaderStyles } from 'utils/hooks/headerStyles' import i18n from 'utils/i18n' import { isIOS } from 'utils/platform' diff --git a/VAMobile/src/components/Templates/CategoryLanding.tsx b/VAMobile/src/components/Templates/CategoryLanding.tsx index 468d92dd323..cbd2103a90d 100644 --- a/VAMobile/src/components/Templates/CategoryLanding.tsx +++ b/VAMobile/src/components/Templates/CategoryLanding.tsx @@ -10,9 +10,11 @@ import { } from 'react-native' import { useSafeAreaInsets } from 'react-native-safe-area-context' +import { useIsScreenReaderEnabled } from '@department-of-veterans-affairs/mobile-component-library' + import { CrisisLineButton, HeaderButton, TextView, TextViewProps, WaygateWrapper } from 'components' import VAScrollView, { VAScrollViewProps } from 'components/VAScrollView' -import { useIsScreenReaderEnabled, useTheme } from 'utils/hooks' +import { useTheme } from 'utils/hooks' import HeaderBanner, { HeaderBannerProps } from './HeaderBanner' @@ -43,7 +45,7 @@ export const CategoryLanding: FC = ({ const insets = useSafeAreaInsets() const fontScale = useWindowDimensions().fontScale const theme = useTheme() - const screenReaderEnabled = useIsScreenReaderEnabled(true) + const screenReaderEnabled = useIsScreenReaderEnabled() const [scrollOffset, setScrollOffset] = useState(0) const [trackScrollOffset, setTrackScrollOffset] = useState(true) diff --git a/VAMobile/src/components/Templates/FeatureLandingAndChildTemplate.tsx b/VAMobile/src/components/Templates/FeatureLandingAndChildTemplate.tsx index 7c554e21c0f..5c735eccad9 100644 --- a/VAMobile/src/components/Templates/FeatureLandingAndChildTemplate.tsx +++ b/VAMobile/src/components/Templates/FeatureLandingAndChildTemplate.tsx @@ -2,9 +2,11 @@ import React, { FC, ReactNode, useState } from 'react' import { LayoutChangeEvent, StatusBar, View, ViewStyle, useWindowDimensions } from 'react-native' import { useSafeAreaInsets } from 'react-native-safe-area-context' +import { useIsScreenReaderEnabled } from '@department-of-veterans-affairs/mobile-component-library' + import { HeaderButton, TextView, TextViewProps, WaygateWrapper } from 'components' import VAScrollView, { VAScrollViewProps } from 'components/VAScrollView' -import { useIsScreenReaderEnabled, useTheme } from 'utils/hooks' +import { useTheme } from 'utils/hooks' import HeaderBanner, { HeaderBannerProps } from './HeaderBanner' @@ -56,7 +58,7 @@ export const ChildTemplate: FC = ({ const insets = useSafeAreaInsets() const fontScale = useWindowDimensions().fontScale const theme = useTheme() - const screenReaderEnabled = useIsScreenReaderEnabled(true) + const screenReaderEnabled = useIsScreenReaderEnabled() const [scrollOffset, setScrollOffset] = useState(0) const [trackScrollOffset, setTrackScrollOffset] = useState(true) diff --git a/VAMobile/src/components/Templates/HeaderBanner.tsx b/VAMobile/src/components/Templates/HeaderBanner.tsx index 7ee16d2507f..05af9409a10 100644 --- a/VAMobile/src/components/Templates/HeaderBanner.tsx +++ b/VAMobile/src/components/Templates/HeaderBanner.tsx @@ -4,11 +4,12 @@ import { Shadow, ShadowProps } from 'react-native-shadow-2' import { useFocusEffect } from '@react-navigation/native' +import { useIsScreenReaderEnabled } from '@department-of-veterans-affairs/mobile-component-library' import { IconProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Icon/Icon' import { Box, BoxProps, DescriptiveBackButton, IconWithText, TextView, TextViewProps } from 'components' import MenuView, { MenuViewActionsType } from 'components/Menu' -import { useAccessibilityFocus, useIsScreenReaderEnabled, useTheme } from 'utils/hooks' +import { useAccessibilityFocus, useTheme } from 'utils/hooks' export type HeaderLeftButtonProps = { text: string @@ -81,7 +82,7 @@ const HeaderBanner: FC = ({ const [focusTitle, setFocusTitle] = useAccessibilityFocus() const focus = leftButton ? 'Left' : title ? 'Title' : 'Right' useFocusEffect(focus === 'Title' ? setFocusTitle : setFocus) - const screenReaderEnabled = useIsScreenReaderEnabled(true) + const screenReaderEnabled = useIsScreenReaderEnabled() const TEXT_CONSTRAINT_THRESHOLD = 30 diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx index a637e6e0b25..f974800b33f 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx @@ -4,6 +4,8 @@ import { View, ViewStyle } from 'react-native' import { useIsFocused } from '@react-navigation/native' +import { useIsScreenReaderEnabled } from '@department-of-veterans-affairs/mobile-component-library' + import { useDownloadFileAttachment, useMessage } from 'api/secureMessaging' import { SecureMessagingAttachment, SecureMessagingMessageAttributes } from 'api/types' import { @@ -20,7 +22,7 @@ import { import { NAMESPACE } from 'constants/namespaces' import { bytesToFinalSizeDisplay, bytesToFinalSizeDisplayA11y } from 'utils/common' import { getFormattedDateAndTimeZone } from 'utils/formattingUtils' -import { useIsScreenReaderEnabled, useOrientation, useTheme } from 'utils/hooks' +import { useOrientation, useTheme } from 'utils/hooks' import { fixSpecialCharacters } from 'utils/jsonFormatting' import { getLinkifiedText } from 'utils/secureMessaging' @@ -59,7 +61,7 @@ function CollapsibleMessage({ message, isInitialMessage, collapsibleMessageRef } const messageToUse = messageWithAttachmentData?.data.attributes || message const { attachment, hasAttachments, senderName, sentDate, body } = messageToUse - const screenReaderEnabled = useIsScreenReaderEnabled(true) + const screenReaderEnabled = useIsScreenReaderEnabled() const dateTime = getFormattedDateAndTimeZone(sentDate) const attachmentBoolean = hasAttachments || attachment const attachLabel = attachmentBoolean ? t('secureMessaging.attachments.hasAttachment').toLowerCase() : '' diff --git a/VAMobile/src/utils/hooks/index.tsx b/VAMobile/src/utils/hooks/index.tsx index e791f04b1d2..52666d665f3 100644 --- a/VAMobile/src/utils/hooks/index.tsx +++ b/VAMobile/src/utils/hooks/index.tsx @@ -7,7 +7,6 @@ import { AlertButton, AppState, Dimensions, - EmitterSubscription, Keyboard, Linking, PixelRatio, @@ -23,6 +22,7 @@ import { CommonActions, EventArg, useNavigation } from '@react-navigation/native import { ParamListBase } from '@react-navigation/routers/lib/typescript/src/types' import { StackNavigationProp } from '@react-navigation/stack' +import { useIsScreenReaderEnabled } from '@department-of-veterans-affairs/mobile-component-library' import { useActionSheet } from '@expo/react-native-action-sheet' import { ActionSheetOptions } from '@expo/react-native-action-sheet/lib/typescript/types' import { DateTime } from 'luxon' @@ -187,46 +187,6 @@ export function useAccessibilityFocus(): [MutableRefObject, () => void] { return [ref, setFocus] } -/** - * Hook to check if the screen reader is enabled - * - * withListener - True to add a listener to live update screen reader status, default false - * @returns boolean if the screen reader is on - */ -export function useIsScreenReaderEnabled(withListener = false): boolean { - const [screenReaderEnabled, setScreenReaderEnabled] = useState(false) - - useEffect(() => { - let isMounted = true - let screenReaderChangedSubscription: EmitterSubscription - - if (withListener) { - screenReaderChangedSubscription = AccessibilityInfo.addEventListener( - 'screenReaderChanged', - (isScreenReaderEnabled) => { - if (isMounted) { - setScreenReaderEnabled(isScreenReaderEnabled) - } - }, - ) - } - AccessibilityInfo.isScreenReaderEnabled().then((isScreenReaderEnabled) => { - if (isMounted) { - setScreenReaderEnabled(isScreenReaderEnabled) - } - }) - - return () => { - isMounted = false - if (withListener) { - screenReaderChangedSubscription?.remove() - } - } - }, [screenReaderEnabled, withListener]) - - return screenReaderEnabled -} - /** * Hook to display a warning that the user is leaving the app when tapping an external link *