[$250] VBA -URL is shown on bottom left corner when `Fix the error ` is hovered reported by @huzaifa-99

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Navigate to /bank-account/BankAccountStep
2. Click on the first field, and then click outside, just to blur the field and force the validation error to be shown
3. Notice that an error label appears before submit button with blue coloured “fix the errors” text inside the label
4. Hover on “fix the errors” text
5. Notice it shows url address on bottom/left corner of the browser with the current url address set

Expected Result:

The label “fix-the-errors” should not show url-address when hovered

Actual Result:

“fix-the-errors” label is showing the current url as address on bottom-left screen corner when hovered

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.27-3
Reproducible in staging?: y
Reproducible in production?: y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

https://user-images.githubusercontent.com/43996225/201452993-388bb712-3673-4a28-822c-43aeb6623b99.mp4

Expensify/Expensify Issue URL:
Issue reported by: @huzaifa-99
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1668124426446149

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[hungvu193]

Proposal
In our current TextLink.js component, we are using the href props, that's why we see the bottom left url when the cursor hovered it.

App/src/components/TextLink.js

Lines 60 to 66 in 0d653ca

	<Text
	style={[styles.link, ...additionalStyles]}
	accessibilityRole="link"
	href={props.href}
	onPress={openLink}
	onKeyDown={openLinkIfEnterKeyPressed}
	>

Solution
To make it didn't show the bottom left url when hovered we can pass undefined as href prop. In some case, we need to use the TextLink.js but we didn't pass the href (like in this issue), we need to define the href prop default value.

        <Text
            style={[styles.link, ...additionalStyles]}
            accessibilityRole="link"
-           href={props.href} 
+           href={props.href ? props.href : undefined}
            onPress={openLink}
            onKeyDown={openLinkIfEnterKeyPressed}
        >
            {props.children}
        </Text>

or we can change the TextLink.js defaultProps:

const defaultProps = {
-   href:  '',
+   href: undefined,
    style: [],
    onPress: undefined,
};

Result:

Screen.Recording.2022-11-13.at.00.29.12.mov

[huzaifa-99]

Proposal

The issue has origins in FormAlertWrapper. We are using a TextLink there which display's the current url when hovered

App/src/components/FormAlertWrapper.js

Lines 59 to 64 in 1b375ed

	<TextLink
	style={styles.label}
	onPress={props.onFixTheErrorsLinkPressed}
	>
	{props.translate('common.fixTheErrors')}
	</TextLink>

Since we are not passing an actual link/href prop, this TextLink can be replaced with a normal Text component and adding link styles

<Text
    style={[styles.label, styles.link]}
    onPress={props.onFixTheErrorsLinkPressed}
>
    {props.translate('common.fixTheErrors')}
</Text>

which fixes the bug

Demo

12692.-.Demo.-.Hide.url.when.hovered.over.link.-.Screen.Recording.2022-11-14.at.1.32.53.AM.mp4

[0xmiroslav]

Your proposal will cause accessibility issue.
Cannot focus and click on fix the errors using TAB and Enter keyboard

[huzaifa-99]

I thought we are not handling accessibility as discussed here

[0xmiroslav]

I thought we are not handling accessibility as discussed here

But that doesn't mean it's fine to break currently working accessibility feature

[huzaifa-99]

Updated Proposal (original #12692 (comment))

If not breaking accessibility is a concern than we can wrap the Text in a Pressable and add the press callback there. And since it will be nested inside a Text it might break wrapping on native, so we can wrap it in a View.

Basically replacing this whole block

App/src/components/FormAlertWrapper.js

Lines 57 to 66 in 1b375ed

	<Text style={[styles.formError, styles.mb0]}>
	{`${props.translate('common.please')} `}
	<TextLink
	style={styles.label}
	onPress={props.onFixTheErrorsLinkPressed}
	>
	{props.translate('common.fixTheErrors')}
	</TextLink>
	{` ${props.translate('common.inTheFormBeforeContinuing')}.`}
	</Text>

with

<View style={{ flexDirection: 'row' }}>
    <Text style={[styles.formError, styles.mb0]}>
        {`${props.translate('common.please')} `}
    </Text>
    <Pressable onPress={props.onFixTheErrorsLinkPressed}>
        <Text style={[styles.label, styles.link]}>
            {props.translate('common.fixTheErrors')}
        </Text>
    </Pressable>
    <Text style={[styles.formError, styles.mb0]}>
        {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
    </Text>
</View>

This also achieves the same result but accessibility is not broken

[hungvu193]

This will cause an error console on web, you need to make sure there's no console error happened with your solution.

    <Pressable onPress={props.onFixTheErrorsLinkPressed}>
        <Text style={[styles.label, styles.link]}>
            {props.translate('common.fixTheErrors')}
        </Text>
    </Pressable>

[mdneyazahmad]

@huzaifa-99 are you able to reproduce the issue in dev? I can reproduce the issue in staging, but not in dev.

[huzaifa-99]

@hungvu193 i see no console errors specific to this change. Can you please describe a little more? Thanks

---

@mdneyazahmad yes still reproducible on v1.2.27-3 (DEV)

[hungvu193]

Screen.Recording.2022-11-14.at.20.00.58.mov

@huzaifa-99 FYI