Automattic / Automattic/simplenote-android

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

Open
#1,742 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
1.9k
Forks
318
Avg merge
15h 23m
Merged PRs (30d)
5

Description

After the release of [Simplenote 2.33](https://github.com/Automattic/simplenote-android/releases/tag/2.33) and the edge-to-edge changes in https://github.com/Automattic/simplenote-android/pull/1737, there are some interface issues with the authentication screens. See the screenshots and video below for illustration.

Screenshots

Video

#### 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`](https://cdn.a8c-ci.services/c48ede1815ff6d57949a01b71c01c476649e7f6c/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

Contributor guide

Open the contributing guide

Research direction

Reproduce the authentication flow using the linked prototype APK on a Pixel 9 or comparable device with Android 16, landscape orientation, a display cutout, and three-button navigation. Inspect the Log In, Sign Up, and Enter Code screens against each item in the reproduction steps; done means accessibility requirements, touch targets and feedback, system-bar insets, clipping, and touch handling all match the stated expectations.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, java
Domain
accessibility, authentication, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.