Authentication Screens Break Accessibility Standards, Clip Interactive Elements, Overlap System Bars, and Touch Pass Throughs

[theck13]

After the release of Simplenote 2.33 and the edge-to-edge changes in #1737, there are some interface issues with the authentication screens. See the screenshots and video below for illustration.

Screenshots

Video

1742_authentication_screens_issues.mp4

Accessibility

The first Log In screen with the Log In With... buttons has the following accessibility issues:

• Log In With Email button color contrast between background and text is too low.
• Log In Manually text button height is less than minimum touch target size.
• Log In Manually text button has no touch feedback.

Clipping

The first Log In screen with the Log In With... buttons clips the bottom button in landscape orientation. Depending on the height of the device, that can make the button height smaller than the minimum required 48dp too.

Overlapping

Both the Log In and Sign Up screens overlap the system bars and display cutouts.

Touching

On the Enter Code screen for magic link login, touches pass through the visible elements to invisible elements behind.

Expected

Accessibility standards are followed. Interactive elements are not clipped. Interfaces do not overlap system bars. Touches do not pass through.

Observed

Accessibility standards are not followed. Interactive elements are clipped. Interfaces do overlap system bars. Touches do pass through.

Reproduced

Follow the steps below with simplenote-android-prototype-build-pr1737-dd575ff-01987b6b-2ce1-4d17-8edf-4e50efdd3568.apk on a device with a display cutout (e.g. Pixel 9) and three-button navigation enabled.

1. Rotate device into landscape orientation.
2. Tap Sign Up button.
3. Notice interface overlaps display cutout.
4. Tap back arrow in top app bar.
5. Tap Log In button.
6. Notice interface overlaps display cutout.
7. Notice Log In With Email button color contrast.
8. Notice Log In With WordPress.com button is clipped.
9. Long-press Log In Manually text button.
10. Notice no touch feedback.
11. Tap Log In Manually text button.
12. Notice interface overlaps navigation bar, status bar, and display cutout.
13. Notice password visibility toggle shows visible icon.
14. Tap back arrow in top app bar.
15. Tap Log In button.
16. Enter address of existing account in Email field.
17. Tap Log In With Email button.
18. Notice Enter Code is shown.
19. Tap "We've sent a code to..." text.
20. Notice text field cursor is shown.
21. Press Tab on keyboard repeatedly.
22. Notice keyboard changes when invisible elements are focused.

Device Make: Google
Device Model: Pixel 9
Android Version: 16.0.0
Simplenote Version: 2.35.0

[dangermattic]

Thanks for reporting! 👍

[erricgunawan]

This might also affect the Navigation Bar on Search.

Screenshot:

Device: Samsung Galaxy G35
Simplenote 2.36
Android 15
One UI 7.0

Reported on 10149513-zen

[theck13]

Yeah, good catch! That is a consequence of the edge-to-edge changes and would probably fall under the Overlapping section, but that fix should be more straightforward by applying window insets to mSearchMatchBar in NoteEditorActivity.