chore/5057-streamlineUseIsScreenReaderEnabledHook (#10362)

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'

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<CategoryLandingProps> = ({
   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)

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<ChildTemplateProps> = ({
   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)

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<HeaderBannerProps> = ({
   const [focusTitle, setFocusTitle] = useAccessibilityFocus<View>()
   const focus = leftButton ? 'Left' : title ? 'Title' : 'Right'
   useFocusEffect(focus === 'Title' ? setFocusTitle : setFocus)
-  const screenReaderEnabled = useIsScreenReaderEnabled(true)
+  const screenReaderEnabled = useIsScreenReaderEnabled()
 
   const TEXT_CONSTRAINT_THRESHOLD = 30
 

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() : ''

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<T>(): [MutableRefObject<T>, () => 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
  *