[Global] Links open a new window without warning

[svinkle]

Issue summary

Links which request and external resource open a new window/tab/app without warning the user. This could confuse visually impaired users who believe they are following a link in the same browser/app window which causes extra effort to switch back to the previous window/app.

Screenshots

Current code

TSX

// InfoShareView.tsx

const InfoShareItem = ({onPress, text, icon}: InfoShareItemProps) => (

// …

<TouchableOpacity onPress={onPress}>
  // …
</TouchableOpacity>

// …

<InfoShareItem onPress={onSymptomps} text={i18n.translate('Info.CheckSymptoms')} icon="icon-external-arrow" />

Steps to reproduce

1. Load the app into the iOS simulator
2. Expand the Sheet content
3. Enable VoiceOver screen reader on macOS
4. Use the Virtual Cursor to navigate through the Sheet controls

Behavior

Expected

• Links which open a new window/app will be accompanied by a visible and audible warning.

Actual

• Links open a new window without any warning.

Recommendation

For each link in the app which opens an external resource:

1. Add the accessibilityLabel prop, setting its value to the control {text} (This is required for accessibilityHint)
2. Add the accessibilityHint prop, setting its value to a string which warns the user audibly
3. If no icon is present, include a "new window" icon to convey the warning visually

Recommended code

TSX

// InfoShareView.tsx

const InfoShareItem = ({onPress, text, icon, role, hint}: InfoShareItemProps) => (

// …

<TouchableOpacity onPress={onPress} accessibilityLabel={text} accessibilityHint={hint} accessibilityRole={role}>
  // …
</TouchableOpacity>

// …

<InfoShareItem onPress={onSymptomps} text={i18n.translate('Info.CheckSymptoms')} icon="icon-external-arrow" role="link" hint="opens in a new window" />

Specifications

• Component: CovidShield [Global]
• WCAG Principle: Understandable
• WCAG SC: 3.2.2 On Input
• Severity: High
• Effort: High