Skip to content

Commit

Permalink
Cleanup, wrapping fixed, but accessibility a mess
Browse files Browse the repository at this point in the history
  • Loading branch information
@TimRoe
TimRoe committed Feb 21, 2024
1 parent 66516eb commit c507641
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 104 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/components/Link/Link.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export const Directions: Story = {
const paragraphText: LinkProps['paragraphText'] = [
// @ts-ignore: TS being dumb/wrong and thinking all should be LinkProps and none normalText
{text: 'A sentence may include a '},
{text: 'link that opens in a full panel', type: 'custom', onPress: () => {null} },
{text: 'link that opens in a full panel', type: 'custom', onPress: () => {null}, a11yLabel: 'a11y override' },
// @ts-ignore: TS being dumb/wrong and thinking all should be LinkProps and none normalText
{text: ' or a '},
{text: 'link that opens in a webview', type: 'url', url: 'https://department-of-veterans-affairs.github.io/va-mobile-app/design/intro'},
Expand Down
165 changes: 62 additions & 103 deletions packages/components/src/components/Link/Link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@ import {
PressableProps,
PressableStateCallbackType,
Text,
TextProps,
TextStyle,
TouchableWithoutFeedback,
View,
ViewProps,
} from 'react-native'
import React, { FC } from 'react'
import React, { FC, useState } from 'react'

import {
CalendarData,
Expand Down Expand Up @@ -119,6 +118,10 @@ export type LinkProps = linkTypes & {
promptText?: leaveAppPromptText
/** Optional analytics event logging */
// analytics?: analytics
/** Internally used by 'inline' type. Not recommended for consumer use, but
* available to manually insert a link into a paragraph. True builds link
* component with RN Text instead of Pressable for improved wrapping behavior */
inlineSingle?: boolean
/** Optional TestID */
testID?: string
}
Expand All @@ -134,6 +137,7 @@ export const Link: FC<LinkProps> = ({
a11yHint,
promptText,
// analytics,
inlineSingle,
testID,
// Type-specific props
calendarData,
Expand Down Expand Up @@ -220,34 +224,24 @@ export const Link: FC<LinkProps> = ({
accessibilityHint: a11yHint,
role: 'link',
accessible: true,
style: { flexDirection: 'row' },
style: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center' },
}

const viewStyle: ViewProps['style'] = {
// alignItems: 'center',
// flex: 1,
// flexDirection: 'row',
// flexWrap: 'wrap',
}

const innerViewStyle: ViewProps['style'] = {
// flex: 1,
// flexWrap: 'wrap',
// flexShrink: 1,
marginLeft: icon === 'no icon' ? 0 : 5,
}

const iconViewStyle: ViewProps['style'] = {
// flex: 1,
// flexDirection: 'row',
// alignItems: 'center',
// justifyContent: 'center',
marginRight: 5,
const viewProps: TextProps = {
'aria-label': a11yLabel ? a11yLabel : text,
accessibilityHint: a11yHint,
role: 'link',
accessible: true,
}

const iconDisplay =
icon === 'no icon' ? null : (
<View style={iconViewStyle}>
icon === 'no icon' ? null : inlineSingle ? (
<>
<Icon fill={linkColor} {...icon} />
{/* Space forms padding prior to link text */}
<Text> </Text>
</>
) : (
<View style={{marginRight: 5}}>
<Icon fill={linkColor} {...icon} />
</View>
)
Expand Down Expand Up @@ -276,40 +270,41 @@ export const Link: FC<LinkProps> = ({
return { ...(pressed ? pressedFont : regularFont), ...textStyle }
}

// const buildLinkText = text.split(' ').map((word) => {<Text style={getTextStyle(pressed)}>{word}</Text>})

// return (
// <Text style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
// {iconDisplay}
// {text.split(' ').map((word) => {
// return (
// <Pressable {...pressableProps} testID={testID}>
// {({ pressed }: PressableStateCallbackType) => (
// <Text style={getTextStyle(pressed)}>{word + ' '}</Text>
// )}
// </Pressable>
// )
// })}
// </Text>
// )
if (inlineSingle) {
const [pressStyle, setPressStyle] = useState(false)
const onPressProps: TextProps = {
onPressIn: () => {
setPressStyle(true)
},
onPress: onPress ? onPress : _onPress,
onPressOut: () => {
setPressStyle(false)
},
}
return (
<Text accessible={true}>
{iconDisplay}
<Text {...onPressProps} {...viewProps} style={getTextStyle(pressStyle)}>
{text}
</Text>
</Text>
)
}

return (
<Pressable {...pressableProps} testID={testID}>
{({ pressed }: PressableStateCallbackType) => (
<>
{iconDisplay}
{/* {text.split(' ').map((word) => {
return <Text style={getTextStyle(pressed)}>{word + ' '}</Text>
})} */}
<Text style={getTextStyle(pressed)}>{text}</Text>
</>
)}
</Pressable>
)
}

const paragraphText: FC<normalText> = ({ text, textA11y }) => {
const colorScheme = webStorybookColorScheme() || useColorScheme()
const paragraphText: FC<normalText & {key: number}> = ({ text, key, textA11y }) => {
const colorScheme = useColorScheme()
const isDarkMode = colorScheme === 'dark'

// TODO: Replace with typography tokens
Expand All @@ -322,77 +317,41 @@ const paragraphText: FC<normalText> = ({ text, textA11y }) => {
}

return (
<Text style={regularFont} aria-label={textA11y}>
<Text key={key} style={regularFont} accessible={true} aria-label={textA11y}>
{text}
</Text>
)
}

const inlineLink: FC<inline['paragraphText']> = (paragraphTextArray) => {
const viewStyle: ViewProps['style'] = {
flexDirection: 'row',
flexWrap: 'wrap',
}

// Works to split the screen reader to pieces, but also messes up wrapping again
// return (
// <View>
// <Text>
// eslint-disable-next-line max-len
// This is a long paragraph of text. <TouchableWithoutFeedback onPress={()=>{}}><Text style={{ fontWeight: 'bold' }}>Pressable text</Text></TouchableWithoutFeedback> embedded within it.
// </Text>
// </View>
// );

// return (
// <View>
// <Text>
// This is a long paragraph of text.{' '}
// <Pressable onPress={() => {}}>
// <View>
// {/* eslint-disable-next-line max-len */}
// <Text style={{ fontWeight: 'bold' }}>Pressable text</Text>
// </View>
// </Pressable>{' '}
// embedded within it.
// </Text>
// <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
// {paragraphTextArray.map((item, index) => {
// if ('type' in item) {
// item.inlineSingle = true
// // Link if type prop exists
// return <Link key={index} {...item} />
// } else {
// const itemWithKey = {...item, key: index}
// return paragraphText(itemWithKey)
// }
// })}
// </View>
// )

return (
<Text>
{/* Test {' '} */}
{paragraphTextArray.map((item) => {
{paragraphTextArray.map((item, index) => {
// key included as this is a list of React components and the renderer worries about losing track
if ('type' in item) {
// Link if type prop exists
return <Link {...item} />
item.inlineSingle = true
return <Link {...item} key={index} />
} else {
return paragraphText(item)
const itemWithKey = {...item, key: index}
return paragraphText(itemWithKey)
}
})}
{/* {' '} more words. */}
</Text>
)
return (
<View style={viewStyle}>
{paragraphTextArray.map((item) => {
if ('type' in item) {
// Link if type prop exists
return <Link {...item} />
} else {
return paragraphText(item)
}
})}
</View>
)

// return paragraphTextArray.map((item) => {
// let paragraph
// if ('type' in item) { // Link if type prop exists
// paragraph = paragraph + (<Link {...item} />)
// } else {
// paragraph = paragraph + paragraphText({text: item.text, textA11y: item.textA11y})
// }

// return paragraph
// })
}

0 comments on commit c507641

Please sign in to comment.