[Global] Does not support landscape orientation

[svinkle]

Issue summary

The app doesn't seem to support landscape orientation on Android devices. On iOS, it's partially supported though some text nodes are not visible.

Supporting landscape orientation is important for people who prefer one orientation to another. Some may not have the physical capability of making an adjustment to their device. Supporting only portrait mode could lead to a frustrating user experience.

Steps to reproduce

1. Install the CovidShield apk on an Android device
2. Load the app
3. Adjust to landscape orientation

Behavior

Expected

• Content to adjust to landscape mode, allowing full use of the app.

Actual

• App does not switch to landscape mode.

Recommendation

Allow any orientation. Ensure app content, layout, and controls are accessible when switching device orientation.

Specifications

• Component: CovidShield [Global]
• WCAG Principle: Perceivable
• WCAG SC: 1.3.4 Orientation
• Severity: High
• Effort: Unknown

[adam-poteralowicz]

Could I take on that issue?

[AdamWhitcroft]

Recommendations for better landscape support.

• iPhone X mocks
• iPhone SE mocks (coming)

Onboarding screens, steps 1 and 2

Onboarding, learn how

In order to maximise screen real-estate for written content, I'm proposing we drop the animations from these slides. Including them would mean either putting it above or below the text. Above would push the content out of view, and below means you might not even know they are there.

Thank you screen

Sheet button 400pt wide.

Home, No exposure detected

Home, Sheet shown

Home, Sheet callout

Use a 24pt "safe space" at the top of the content area to keep header and content visually distinct.

Home, Potentially exposed / thank you / upload reminder

Keeping the animations these two scenarios comes at a significant cost. The main Call To Action for each stage may well be pushed completely out of view. If we feel strongly the animations are important in this orientation, we should render an alternative (smaller) version of them).

Button 400pt wide.

And without animation (my preference).

Home, High alert

Code entry

Code entry, Consent

[henrytao-me]

Excellent work @AdamWhitcroft 👍

[kpeatt]

@AdamWhitcroft Can we possibly keep the animations in the tutorial by going to a columnar layout?

[AdamWhitcroft]

@kpeatt it might work if we scale down the animations (and maybe re-render them as we have clipping of the echoes on the left and right sides)

[kpeatt]

The above looks good to me.