Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make TextLink component accessible #3311

Merged
merged 14 commits into from
Jun 8, 2021
Merged

Make TextLink component accessible #3311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d9035f6
Merge branch 'Expensify:main' into master
tugbadogan May 11, 2021
85dfdbf
Merge branch 'Expensify:main' into master
tugbadogan May 17, 2021
a75fe58
Merge branch 'Expensify:main' into master
tugbadogan May 25, 2021
2841b8f
Merge branch 'Expensify:main' into master
tugbadogan May 26, 2021
dcb0cbd
Merge branch 'Expensify:main' into master
tugbadogan Jun 2, 2021
e28465d
Introduce ExternalLink component for accessibility
tugbadogan Jun 2, 2021
aaf1a85
Separate Text components to make links work on Safari and iOS
tugbadogan Jun 2, 2021
95e8813
Fix lint error
tugbadogan Jun 2, 2021
d3ec885
Fix lint error from TermsOnly
tugbadogan Jun 2, 2021
3e8d2e4
Merge branch 'Expensify:main' into master
tugbadogan Jun 6, 2021
552e887
Replace ExternalLink with TextLink
tugbadogan Jun 6, 2021
75fef63
Merge branch 'master' into tugbadogan-links-for-accessibility
tugbadogan Jun 6, 2021
bfa0696
Merge branch 'master' into tugbadogan-links-for-accessibility
tugbadogan Jun 6, 2021
5733a43
Fix merge conflicts
tugbadogan Jun 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/components/TextLink.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,15 @@ const TextLink = (props) => {
const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
return (
<Pressable
style={additionalStyles}
onPress={() => {
onPress={(e) => {
e.preventDefault();
openURLInNewTab(props.href);
}}
accessibilityRole="link"
href={props.href}
>
{({hovered, pressed}) => (
<Text style={[styles.link, (hovered || pressed) ? styles.linkHovered : undefined]}>
<Text style={[additionalStyles, styles.link, (hovered || pressed) ? styles.linkHovered : undefined]}>
{props.children}
</Text>
)}
Expand Down
33 changes: 17 additions & 16 deletions src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
import welcomeScreenshot from '../../../../assets/images/welcome-screenshot.png';
import TermsAndLicenses from '../TermsAndLicenses';
import WelcomeText from '../../../components/WelcomeText';
import openURLInNewTab from '../../../libs/openURLInNewTab/index.native';
import TextLink from '../../../components/TextLink';
import CONST from '../../../CONST';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';

Expand Down Expand Up @@ -60,25 +60,26 @@ const SignInPageLayoutNarrow = props => (
)}

{props.shouldShowWelcomeText && <WelcomeText />}
<View>
<Text style={[styles.textLabel, styles.mt6]}>
<View style={[styles.flexRow, styles.flexWrap, styles.mt6]}>
<Text style={[styles.textLabel]}>
{`${props.translate('signInPage.expensifyIsOpenSource')}. ${
props.translate('common.view')}`}
{' '}
<Text
style={[styles.link]}
onPress={() => openURLInNewTab(CONST.GITHUB_URL)}
>
{props.translate('signInPage.theCode')}
</Text>
{`. ${props.translate('common.view')}`}
</Text>
<TextLink style={[styles.textLabel]} href={CONST.GITHUB_URL}>
{props.translate('signInPage.theCode')}
</TextLink>
<Text style={[styles.textLabel]}>
.
</Text>
<Text style={[styles.textLabel]}>
{`${props.translate('common.view')}`}
{' '}
<Text
style={[styles.link]}
onPress={() => openURLInNewTab(CONST.UPWORK_URL)}
>
{props.translate('signInPage.openJobs')}
</Text>
</Text>
<TextLink style={[styles.textLabel]} href={CONST.UPWORK_URL}>
{props.translate('signInPage.openJobs')}
</TextLink>
<Text style={[styles.textLabel]}>
.
</Text>
</View>
Expand Down
26 changes: 12 additions & 14 deletions src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import welcomeScreenshot from '../../../../assets/images/welcome-screenshot-wide
import variables from '../../../styles/variables';
import TermsAndLicenses from '../TermsAndLicenses';
import WelcomeText from '../../../components/WelcomeText';
import openURLInNewTab from '../../../libs/openURLInNewTab';
import TextLink from '../../../components/TextLink';
import CONST from '../../../CONST';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';

Expand Down Expand Up @@ -58,25 +58,23 @@ const SignInPageLayoutWide = props => (
<WelcomeText textSize="large" />
</View>
)}
<View>
<View style={[styles.flexRow, styles.flexWrap]}>
<Text style={[styles.textLabel]}>
{`${props.translate('signInPage.expensifyIsOpenSource')}. ${
props.translate('common.view')}`}
{' '}
<Text
style={[styles.link]}
onPress={() => openURLInNewTab(CONST.GITHUB_URL)}
>
{props.translate('signInPage.theCode')}
</Text>
</Text>
<TextLink style={[styles.textLabel]} href={CONST.GITHUB_URL}>
{props.translate('signInPage.theCode')}
</TextLink>
<Text style={[styles.textLabel]}>
{`. ${props.translate('common.view')}`}
{' '}
<Text
style={[styles.link]}
onPress={() => openURLInNewTab(CONST.UPWORK_URL)}
>
{props.translate('signInPage.openJobs')}
</Text>
</Text>
<TextLink style={[styles.textLabel]} href={CONST.UPWORK_URL}>
{props.translate('signInPage.openJobs')}
</TextLink>
<Text style={[styles.textLabel]}>
.
</Text>
</View>
Expand Down
26 changes: 11 additions & 15 deletions src/pages/signin/TermsAndLicenses/TermsOnly.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,27 @@ import React from 'react';
import {Text, View} from 'react-native';
import styles from '../../../styles/styles';
import CONST from '../../../CONST';
import openURLInNewTab from '../../../libs/openURLInNewTab';
import TextLink from '../../../components/TextLink';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';

const TermsOnly = ({translate}) => (
<View style={[styles.mt6]}>
<View style={[styles.mt6, styles.flexRow, styles.flexWrap]}>
<Text style={[styles.loginTermsText]}>
{translate('termsOfUse.phrase1')}
{' '}
<Text
style={[styles.loginTermsText, styles.link]}
onPress={() => openURLInNewTab(CONST.TERMS_URL)}
>
{translate('termsOfUse.phrase2')}
</Text>
</Text>
<TextLink style={[styles.loginTermsText]} href={CONST.TERMS_URL}>
{translate('termsOfUse.phrase2')}
</TextLink>
<Text style={[styles.loginTermsText]}>
{' '}
{translate('termsOfUse.phrase3')}
{' '}
<Text
style={[styles.loginTermsText, styles.link]}
onPress={() => openURLInNewTab(CONST.PRIVACY_URL)}
>
{translate('termsOfUse.phrase4')}
</Text>
.
</Text>
<TextLink style={[styles.loginTermsText]} href={CONST.PRIVACY_URL}>
{translate('termsOfUse.phrase4')}
</TextLink>
<Text style={[styles.loginTermsText]}>.</Text>
</View>
);

Expand Down
38 changes: 16 additions & 22 deletions src/pages/signin/TermsAndLicenses/TermsWithLicenses.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,33 @@ import React from 'react';
import {Text, View} from 'react-native';
import styles from '../../../styles/styles';
import CONST from '../../../CONST';
import openURLInNewTab from '../../../libs/openURLInNewTab';
import TextLink from '../../../components/TextLink';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';

const TermsWithLicenses = ({translate}) => (
<View style={[styles.mt6]}>
<View style={[styles.mt6, styles.flexRow, styles.flexWrap]}>
<Text style={[styles.loginTermsText]}>
{translate('termsOfUse.phrase1')}
{' '}
<Text
style={[styles.loginTermsText, styles.link]}
onPress={() => openURLInNewTab(CONST.TERMS_URL)}
>
{translate('termsOfUse.phrase2')}
</Text>
</Text>
<TextLink style={[styles.loginTermsText]} href={CONST.TERMS_URL}>
{translate('termsOfUse.phrase2')}
</TextLink>
<Text style={[styles.loginTermsText]}>
{' '}
{translate('termsOfUse.phrase3')}
{' '}
<Text
style={[styles.loginTermsText, styles.link]}
onPress={() => openURLInNewTab(CONST.PRIVACY_URL)}
>
{translate('termsOfUse.phrase4')}
</Text>
</Text>
<TextLink style={[styles.loginTermsText]} href={CONST.PRIVACY_URL}>
{translate('termsOfUse.phrase4')}
</TextLink>
<Text style={[styles.loginTermsText]}>
{translate('termsOfUse.phrase5')}
{' '}
<Text
style={[styles.loginTermsText, styles.link]}
onPress={() => openURLInNewTab(CONST.LICENSES_URL)}
>
{translate('termsOfUse.phrase6')}
</Text>
.
</Text>
<TextLink style={[styles.loginTermsText]} href={CONST.LICENSES_URL}>
{translate('termsOfUse.phrase6')}
</TextLink>
<Text style={[styles.loginTermsText]}>.</Text>
</View>
);

Expand Down