Addresses accessibility issues for privacy policy

src/locale/translations/en.json

@@ -25,6 +25,7 @@
     "NoConnectivity": "No internet connection",
     "NoConnectivityDetailed": "COVID Shield needs internet access to continue checking for potential exposure.",
     "AppName": "COVID Shield",
+    "ExternalLinkHint": "Opens in a new window",
     "LastCheckedMinutes": {
       "One": "Last checked {number} minute ago",
       "Other": "Last checked {number} minutes ago"

src/locale/translations/fr.json

@@ -25,6 +25,7 @@
     "NoConnectivity": "Aucune connexion Internet",
     "NoConnectivityDetailed": "COVID Shield a besoin d'un accès Internet pour continuer de vérifier les expositions potentielles à la COVID-19.",
     "AppName": "COVID Shield",
+    "ExternalLinkHint": "Ouvre dans une nouvelle fenêtre",
     "LastCheckedMinutes": {
       "One": "Dernière vérification il y a {number} minute",
       "Other": "Dernière vérification il y a {number} minutes"

src/locale/translations/pt-BR.json

@@ -25,6 +25,7 @@
     "NoConnectivity": "Sem conexão à internet",
     "NoConnectivityDetailed": "O COVID Shield precisa de acesso à Internet para continuar verificando à potenciais exposições.",
     "AppName": "COVID Shield",
+    "ExternalLinkHint": "Abre em uma nova janela",
     "LastCheckedMinutes": {
       "One": "Última verificação há {number} minuto",
       "Other": "Última verificação há {number} minutos"

src/screens/privacy/Privacy.tsx

@@ -1,10 +1,10 @@
 import React, {useCallback} from 'react';
-import {ScrollView, StyleSheet} from 'react-native';
+import {Linking, ScrollView, StyleSheet, Text, TouchableWithoutFeedback} from 'react-native';
 import {useNavigation} from '@react-navigation/native';
 import {Box, Toolbar} from 'components';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useI18n} from '@shopify/react-i18n';
-import Markdown from 'react-native-markdown-display';
+import Markdown, {RenderRules, RenderFunction} from 'react-native-markdown-display';
 import privacyPolicyEn from 'assets/privacypolicy';
 import privacyPolicyFr from 'assets/privacypolicy-fr';
 
@@ -13,6 +13,34 @@ export const PrivacyScreen = () => {
   const [i18n] = useI18n();
   const close = useCallback(() => navigation.goBack(), [navigation]);
 
+  const openUrl = (url: string) => {
+    Linking.openURL(url);
+  };
+
+  const renderHeader: RenderFunction = (node, children, styles: any) => (
+    <Text key={node.key} style={[styles.heading, styles.heading1]} accessibilityRole="header">
+      {children}
+    </Text>
+  );
+
+  const renderLink: RenderFunction = (node: any, children: React.ReactNode[], styles: any) => (
+    <TouchableWithoutFeedback
+      key={node.key}
+      style={styles.link}
+      onPress={() => openUrl(node.attributes.href)}
+      accessibilityLabel={children.toString()}
+      accessibilityHint={i18n.translate('Home.ExternalLinkHint')}
+      accessibilityRole="link"
+    >
+      <Text style={styles.link}>{children}</Text>
+    </TouchableWithoutFeedback>
+  );
+
+  const rules: RenderRules = {
+    link: renderLink,
+    heading1: renderHeader,
+  };
+
   return (
     <Box backgroundColor="overlayBackground" flex={1}>
       <SafeAreaView style={styles.flex}>
@@ -29,6 +57,7 @@ export const PrivacyScreen = () => {
               style={{
                 body: styles.bodyContent,
               }}
+              rules={rules}
             >
               {i18n.locale === 'en' ? privacyPolicyEn : privacyPolicyFr}
             </Markdown>