Zulip mobile branch #16
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Long passwords and show/hide buttons overlap with each other. I fixed this problem by doing the following: - I changed the style of Password Input to take up as much space as needed. I did this by setting a flex of 1 to the Password Input. - I changed the positioning of the show/hide button from absolute to relative. - I ensured horizontal alignment by setting the flex-direction of the parent view to 'row'. - To fix the problem of the changing width of the text input, when the show/hide text changes, I replaced the show/hide text with a show/icon. The show/hide icon is an eye-open/eye-closed icon. This icon always has a fixed width and does not affect the text input. - I removed hide text from messages_en.json since it is not in the app. I tested this on Android and IOS devices with different screen sizes, and it works fine on both platforms. Fixes: zulip#5614
…tton The touchable-feedback area was right up against the right edge of the password input. Give some margin in between, for some breathing room.
…ight The default value for `alignItems` is 'stretch': https://reactnative.dev/docs/0.68/flexbox#align-items
This lets us have a more compact layout (e.g., the left edge of the icon is just 8px away from the right edge of the password input, instead of that 8px plus 12px of padding in the Touchable) while maintaining the 48px touch-target size with the help of `hitSlop`.
Now, after changing the show/hide button to be an icon instead of text, we still present user-facing text to screen reader software. Tested on iOS with VoiceOver, and implemented with help from this article: https://incl.ca/show-hide-password-accessibility-and-password-hints-tutorial/
|
|
@dashwave /review |
1 similar comment
|
@dashwave /review |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.