From 9fce707b96c80debb799de4c06ff1b81b125ea52 Mon Sep 17 00:00:00 2001 From: Dylan Nienberg <87150991+Sparowhawk@users.noreply.github.com> Date: Fri, 27 Sep 2024 13:08:09 -0500 Subject: [PATCH] bug/9210-SMiOSScreenReader (#9509) Co-authored-by: Chris Alexander --- .../ViewMessage/CollapsibleMessage.tsx | 5 +- .../ViewMessage/MessageCard.tsx | 5 +- VAMobile/src/utils/secureMessaging.tsx | 99 ++++++++++++++----- 3 files changed, 80 insertions(+), 29 deletions(-) diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx index f7065b51c02..a637e6e0b25 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx @@ -20,7 +20,7 @@ import { import { NAMESPACE } from 'constants/namespaces' import { bytesToFinalSizeDisplay, bytesToFinalSizeDisplayA11y } from 'utils/common' import { getFormattedDateAndTimeZone } from 'utils/formattingUtils' -import { useIsScreenReaderEnabled, useTheme } from 'utils/hooks' +import { useIsScreenReaderEnabled, useOrientation, useTheme } from 'utils/hooks' import { fixSpecialCharacters } from 'utils/jsonFormatting' import { getLinkifiedText } from 'utils/secureMessaging' @@ -38,6 +38,7 @@ export type ThreadMessageProps = { function CollapsibleMessage({ message, isInitialMessage, collapsibleMessageRef }: ThreadMessageProps) { const theme = useTheme() const isFocused = useIsFocused() + const isPortrait = useOrientation() const { t } = useTranslation(NAMESPACE.COMMON) const { t: tFunction } = useTranslation() const { condensedMarginBetween } = theme.dimensions @@ -104,7 +105,7 @@ function CollapsibleMessage({ message, isInitialMessage, collapsibleMessageRef } /** this does preserve newline characters just not spaces * TODO: change the mobile body link text views to be clickable and launch the right things */ if (body) { - return getLinkifiedText(fixSpecialCharacters(body), t) + return getLinkifiedText(fixSpecialCharacters(body), t, isPortrait) } return <> } diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/MessageCard.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/MessageCard.tsx index 38b8857d015..cd324af884e 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/MessageCard.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/MessageCard.tsx @@ -17,7 +17,7 @@ import { DemoState } from 'store/slices/demoSlice' import { logAnalyticsEvent } from 'utils/analytics' import { bytesToFinalSizeDisplay, bytesToFinalSizeDisplayA11y } from 'utils/common' import { getFormattedDateAndTimeZone } from 'utils/formattingUtils' -import { useRouteNavigation, useTheme } from 'utils/hooks' +import { useOrientation, useRouteNavigation, useTheme } from 'utils/hooks' import { fixSpecialCharacters } from 'utils/jsonFormatting' import { formatSubject, getLinkifiedText } from 'utils/secureMessaging' @@ -29,6 +29,7 @@ export type MessageCardProps = { function MessageCard({ message }: MessageCardProps) { const theme = useTheme() const { t: t } = useTranslation(NAMESPACE.COMMON) + const isPortrait = useOrientation() const { t: tFunction } = useTranslation() const { hasAttachments, attachment, attachments, senderName, sentDate, body, subject, category } = message const dateTime = getFormattedDateAndTimeZone(sentDate) @@ -73,7 +74,7 @@ function MessageCard({ message }: MessageCardProps) { /** this does preserve newline characters just not spaces * TODO: change the mobile body link text views to be clickable and launch the right things */ if (body) { - return getLinkifiedText(fixSpecialCharacters(body), t) + return getLinkifiedText(fixSpecialCharacters(body), t, isPortrait) } return <> } diff --git a/VAMobile/src/utils/secureMessaging.tsx b/VAMobile/src/utils/secureMessaging.tsx index 5e1ac7ccee0..fb8248e22b2 100644 --- a/VAMobile/src/utils/secureMessaging.tsx +++ b/VAMobile/src/utils/secureMessaging.tsx @@ -1,4 +1,5 @@ import React, { ReactNode } from 'react' +import { Dimensions } from 'react-native' import DocumentPicker from 'react-native-document-picker' import { Asset, launchCamera, launchImageLibrary } from 'react-native-image-picker' import { ImagePickerResponse } from 'react-native-image-picker/src/types' @@ -474,7 +475,7 @@ export const saveDraftWithAttachmentAlert = ( } } -export const getLinkifiedText = (body: string, t: TFunction): ReactNode => { +export const getLinkifiedText = (body: string, t: TFunction, isPortrait: boolean): ReactNode => { const textReconstructedBody: Array = [] const bodySplit = body.split(/\s/).filter((value) => value !== '') const whiteSpace = body @@ -483,13 +484,14 @@ export const getLinkifiedText = (body: string, t: TFunction): ReactNode => { .reverse() .filter((value) => value !== '') let dontAddNextString = false + let savedText = '' _.forEach(bodySplit, (text, index) => { if (dontAddNextString) { //if previous entry was a phone number with xxx xxx xxxx format need to not add xxxx again dontAddNextString = false return } - + let nonWhiteSpaceCheck = savedText.split(/\s/).filter((value) => value !== '').length > 0 if (index !== 0 && index !== bodySplit.length - 1) { //phone number with spaces xxx xxx xxxx format const previousText = bodySplit[index - 1] @@ -497,8 +499,16 @@ export const getLinkifiedText = (body: string, t: TFunction): ReactNode => { const testString = previousText + ' ' + text + ' ' + nextText const phoneMatch = PHONE_REGEX_EXP.exec(testString) if (phoneMatch) { - textReconstructedBody.pop() - textReconstructedBody.pop() + if (savedText.length > 3) { + savedText = savedText.slice(0, savedText.length - 4) + } + nonWhiteSpaceCheck = savedText.split(/\s/).filter((value) => value !== '').length > 0 + textReconstructedBody.push( + + {savedText} + , + ) + savedText = '' textReconstructedBody.push( { a11yHint={t('openInPhoneMessaging.a11yHint')} />, ) - textReconstructedBody.push({whiteSpace.pop() || ''}) + savedText += whiteSpace.pop() || '' dontAddNextString = true return } @@ -523,6 +533,12 @@ export const getLinkifiedText = (body: string, t: TFunction): ReactNode => { const url2Match = URL2_REGEX_EXP.exec(text) if (emailMatch) { //matches only + textReconstructedBody.push( + + {savedText} + , + ) + savedText = '' textReconstructedBody.push( { a11yHint={t('openInEmailMessaging.a11yHint')} />, ) - textReconstructedBody.push({whiteSpace.pop() || ''}) + savedText += whiteSpace.pop() || '' } else if (mailToMatch) { // matches mailto: + textReconstructedBody.push( + + {savedText} + , + ) + savedText = '' textReconstructedBody.push( { a11yHint={t('openInEmailMessaging.a11yHint')} />, ) - textReconstructedBody.push({whiteSpace.pop() || ''}) + savedText += whiteSpace.pop() || '' } else if (phoneMatch) { // matches 8006982411 800-698-2411 1-800-698-2411 (800)698-2411 (800)-698-2411 +8006982411 +18006982411 + textReconstructedBody.push( + + {savedText} + , + ) + savedText = '' textReconstructedBody.push( { a11yHint={t('openInPhoneMessaging.a11yHint')} />, ) - textReconstructedBody.push({whiteSpace.pop() || ''}) + savedText += whiteSpace.pop() || '' } else if (urlMatch) { // matches any https, http url - textReconstructedBody.push({'\n'}) textReconstructedBody.push( - , + + {savedText} + , + ) + savedText = '' + textReconstructedBody.push( + + + , ) - textReconstructedBody.push({whiteSpace.pop() || ''}) + savedText += whiteSpace.pop() || '' } else if (url2Match) { // matches links like www.gooog.com or google.com (limit is 2 or 3 characters after the . to turn it // into a link - may need to update this if we need to include other domains greater than 3 digits) + textReconstructedBody.push( + + {savedText} + , + ) + savedText = '' textReconstructedBody.push( { a11yHint={t('openInBrowser.a11yHint')} />, ) - textReconstructedBody.push({whiteSpace.pop() || ''}) + savedText += whiteSpace.pop() || '' } else { const spacing = whiteSpace.pop() || '' - textReconstructedBody.push({text + spacing}) + savedText += text + spacing } }) + + if (savedText.length > 0 && savedText.split(/\s/).filter((value) => value !== '').length > 0) { + //prohibits whitespace only being added to the end after a link + textReconstructedBody.push( + + {savedText} + , + ) + } + return ( - - - {textReconstructedBody} - + + {textReconstructedBody} ) }