Wordpress-ios: Sharing: WhatsApp "Send" button difficult to read when sharing a site via Reader

Created on 14 Feb 2019  ·  2Comments  ·  Source: wordpress-mobile/WordPress-iOS

Expected behavior

All text to be clear and readable when sharing a site via Reader.

Actual behavior

For some share targets, such as WhatsApp and Mail, the "Send" button is blue on blue and difficult to read.

Steps to reproduce the behavior

  1. Go to Reader > Followed and select a site.
  2. Tap the Share icon.
  3. Select WhatsApp or Mail as the target.
  4. Check to see whether the "Send" button is readable.

Result: the "Send" button is blue text on a blue background and difficult to read.

Tested on iPhone 8, iOS 12.1.4, WP Internal 11.8.0.20190211 by @stojdza (thank you!)
Tested on iPhone 6S, iOS 12.1.4, WP Internal 11.8.0.20190211 by me
Reader Sharing [Type] Broken Window [Type] Bug

Most helpful comment

Thanks for reporting this, @Stojdza, and thanks for filing this @designsimply!

I'd like to share a few thoughts here. First, this report also applies to the existing _Share a Blog Post_ functionality. Next, while these issues are similar, we have varying degrees of control over appearance once we provide content to the iOS "Share Sheet" for presentation.

_WhatsApp_

The blue _Send_ button appears to match the iOS system blue that represents the default tint color for many elements of system "chrome". Unfortunately, this is very similar to our app's default blue color used in the navigation bar, leading to the low-contrast scenario you observe. Two thoughts come to mind:

  1. We _may_ be able to tidy that up to match the < Select Chats back bar button item on the left.
  2. We might consider modify the navigation bar for these "sharing" functions (via UIActivityViewController) to be the system "white" frosted color. Think of the system interface you see elsewhere in iOS.

Either of these approaches would require some dialogue with our design counterparts, and testing to confirm we achieve the desired result.

_Mail_

The _Send_ button is dim because a valid email address has not been entered. If you input a full email address, it transitions to an enabled state that is more legible.

11037a

If we pursue "Option 2" above for WhatsApp, that would benefit the experience you've observed here in Mail.

All 2 comments

Thanks for reporting this, @Stojdza, and thanks for filing this @designsimply!

I'd like to share a few thoughts here. First, this report also applies to the existing _Share a Blog Post_ functionality. Next, while these issues are similar, we have varying degrees of control over appearance once we provide content to the iOS "Share Sheet" for presentation.

_WhatsApp_

The blue _Send_ button appears to match the iOS system blue that represents the default tint color for many elements of system "chrome". Unfortunately, this is very similar to our app's default blue color used in the navigation bar, leading to the low-contrast scenario you observe. Two thoughts come to mind:

  1. We _may_ be able to tidy that up to match the < Select Chats back bar button item on the left.
  2. We might consider modify the navigation bar for these "sharing" functions (via UIActivityViewController) to be the system "white" frosted color. Think of the system interface you see elsewhere in iOS.

Either of these approaches would require some dialogue with our design counterparts, and testing to confirm we achieve the desired result.

_Mail_

The _Send_ button is dim because a valid email address has not been entered. If you input a full email address, it transitions to an enabled state that is more legible.

11037a

If we pursue "Option 2" above for WhatsApp, that would benefit the experience you've observed here in Mail.

Closed https://github.com/wordpress-mobile/WordPress-iOS/issues/8912 as a duplicate in favor of the reply/explanation from @stevebaranski on this one. ❤️

cc @charliescheer @nheagy @thehenrybyrd

Was this page helpful?
0 / 5 - 0 ratings