From 0b4653958b267d5727dd06b0de406a3c421a6286 Mon Sep 17 00:00:00 2001 From: Chris Alexander Date: Mon, 9 Dec 2024 16:37:03 -0700 Subject: [PATCH 1/2] Simplify useIsScreenReaderEnabled hook --- .../CustomHooks/useIsScreenReaderEnabled.mdx | 10 +++-- .../components/Templates/CategoryLanding.tsx | 2 +- .../FeatureLandingAndChildTemplate.tsx | 2 +- .../src/components/Templates/HeaderBanner.tsx | 2 +- .../ViewMessage/CollapsibleMessage.tsx | 2 +- VAMobile/src/utils/hooks/index.tsx | 38 +++++-------------- 6 files changed, 19 insertions(+), 37 deletions(-) diff --git a/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useIsScreenReaderEnabled.mdx b/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useIsScreenReaderEnabled.mdx index 388fb7bdf94..4d16df4901b 100644 --- a/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useIsScreenReaderEnabled.mdx +++ b/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useIsScreenReaderEnabled.mdx @@ -1,8 +1,10 @@ import HooksInfo from '../../../../src/components/HooksInfo' export const exampleString = `const screenReaderEnabled = useIsScreenReaderEnabled()\n -const setFocus = useCallback(() => { - if (ref.current && screenReaderEnabled) {} -}` +return ( + + {title && !screenReaderEnabled ? {title} : null} + +)` - + diff --git a/VAMobile/src/components/Templates/CategoryLanding.tsx b/VAMobile/src/components/Templates/CategoryLanding.tsx index 468d92dd323..ac07cb6ad40 100644 --- a/VAMobile/src/components/Templates/CategoryLanding.tsx +++ b/VAMobile/src/components/Templates/CategoryLanding.tsx @@ -43,7 +43,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..be6d453cbba 100644 --- a/VAMobile/src/components/Templates/FeatureLandingAndChildTemplate.tsx +++ b/VAMobile/src/components/Templates/FeatureLandingAndChildTemplate.tsx @@ -56,7 +56,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..d6e1ce90237 100644 --- a/VAMobile/src/components/Templates/HeaderBanner.tsx +++ b/VAMobile/src/components/Templates/HeaderBanner.tsx @@ -81,7 +81,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..6fdf37726b6 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx @@ -59,7 +59,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..7e2bd0cfcff 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, @@ -188,41 +187,22 @@ export function useAccessibilityFocus(): [MutableRefObject, () => void] { } /** - * Hook to check if the screen reader is enabled + * Hook to check if the screen reader is enabled. Updates when the screen reader is toggled * - * 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 { +export function useIsScreenReaderEnabled(): 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) - } - }) + const screenReaderChangedSubscription = AccessibilityInfo.addEventListener( + 'screenReaderChanged', + setScreenReaderEnabled, + ) + AccessibilityInfo.isScreenReaderEnabled().then(setScreenReaderEnabled) - return () => { - isMounted = false - if (withListener) { - screenReaderChangedSubscription?.remove() - } - } - }, [screenReaderEnabled, withListener]) + return () => screenReaderChangedSubscription?.remove() + }, []) return screenReaderEnabled } From d728de779458ad6cef9f56e5d378025c5ff40b07 Mon Sep 17 00:00:00 2001 From: Chris Alexander Date: Tue, 10 Dec 2024 11:50:27 -0700 Subject: [PATCH 2/2] Use hook from component library instead --- .../CustomHooks/useIsScreenReaderEnabled.mdx | 10 --------- VAMobile/src/App.tsx | 3 ++- .../components/Templates/CategoryLanding.tsx | 4 +++- .../FeatureLandingAndChildTemplate.tsx | 4 +++- .../src/components/Templates/HeaderBanner.tsx | 3 ++- .../ViewMessage/CollapsibleMessage.tsx | 4 +++- VAMobile/src/utils/hooks/index.tsx | 22 +------------------ 7 files changed, 14 insertions(+), 36 deletions(-) delete mode 100644 VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useIsScreenReaderEnabled.mdx 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 4d16df4901b..00000000000 --- a/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useIsScreenReaderEnabled.mdx +++ /dev/null @@ -1,10 +0,0 @@ -import HooksInfo from '../../../../src/components/HooksInfo' - -export const exampleString = `const screenReaderEnabled = useIsScreenReaderEnabled()\n -return ( - - {title && !screenReaderEnabled ? {title} : null} - -)` - - 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 ac07cb6ad40..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' diff --git a/VAMobile/src/components/Templates/FeatureLandingAndChildTemplate.tsx b/VAMobile/src/components/Templates/FeatureLandingAndChildTemplate.tsx index be6d453cbba..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' diff --git a/VAMobile/src/components/Templates/HeaderBanner.tsx b/VAMobile/src/components/Templates/HeaderBanner.tsx index d6e1ce90237..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 diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx index 6fdf37726b6..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' diff --git a/VAMobile/src/utils/hooks/index.tsx b/VAMobile/src/utils/hooks/index.tsx index 7e2bd0cfcff..52666d665f3 100644 --- a/VAMobile/src/utils/hooks/index.tsx +++ b/VAMobile/src/utils/hooks/index.tsx @@ -22,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' @@ -186,27 +187,6 @@ export function useAccessibilityFocus(): [MutableRefObject, () => void] { return [ref, setFocus] } -/** - * Hook to check if the screen reader is enabled. Updates when the screen reader is toggled - * - * @returns boolean if the screen reader is on - */ -export function useIsScreenReaderEnabled(): boolean { - const [screenReaderEnabled, setScreenReaderEnabled] = useState(false) - - useEffect(() => { - const screenReaderChangedSubscription = AccessibilityInfo.addEventListener( - 'screenReaderChanged', - setScreenReaderEnabled, - ) - AccessibilityInfo.isScreenReaderEnabled().then(setScreenReaderEnabled) - - return () => screenReaderChangedSubscription?.remove() - }, []) - - return screenReaderEnabled -} - /** * Hook to display a warning that the user is leaving the app when tapping an external link *