Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Low contrast (unreadable) menu in private mode, when iOS Reduce Transparency and Increase Contrast options enabled #4952

Closed
SimonBasca opened this issue May 10, 2019 · 4 comments · Fixed by #5282
Closed

Low contrast (unreadable) menu in private mode, when iOS Reduce Transparency and Increase Contrast options enabled #4952

SimonBasca opened this issue May 10, 2019 · 4 comments · Fixed by #5282
Labels
access Relates to a11y features for users, such as Voice Over, Dynamic Type, Constrat, Readability, etc. Bug 🐞 This is a bug with existing functionality not behaving as expected Contributor OK This is a good issue for contributors interested in helping the project P3 Issues that would be nice to have for the current release
Projects
Firefox iOS Development

Comments

@SimonBasca
Copy link
Contributor

Logged via https://bugzilla.mozilla.org/show_bug.cgi?id=1550125

Steps to reproduce:

  1. Install Firefox 16.2 (14898) on iOS 12.2
  2. In the iOS accessibility settings (General > Accessibility), enable "Reduce Transparency" and "Increase Contrast"
  3. Open Firefox, switch to private/incognito mode
  4. Open the Firefox menu

Actual results:

The contrast between menu text and menu background is extremely low, to the point of being illegible.

The attached screenshots hopefully show the effect of turning each of the two options "Reduce Transparency" (RT) and "Increase Contrast" (IC) on and off, respectively. When both enabled, the menu is completely illegible

Expected results:

The menu text should remain visible, having enough contrast with its background, regardless of iOS settings. But moreover, when accessibility-focused options are enabled.

  • Increase Contrast-ON, Reduce Transparency-ON
    IC-ON-__RT-ON-

  • Increase Contrast-OFF, Reduce Transparency-ON
    IC-OFF__RT-ON-

  • Increase Contrast-OFF, Reduce Transparency-OFF
    IC-OFF__RT-OFF

  • Increase Contrast-ON, Reduce Transparency-OFF
    IC_ON-__RT-OFF
@SimonBasca SimonBasca added the Bug 🐞 This is a bug with existing functionality not behaving as expected label May 10, 2019
@SimonBasca SimonBasca added this to Needs Triage in Firefox iOS Development via automation May 10, 2019
garvankeeley added a commit to garvankeeley/firefox-ios that referenced this issue May 13, 2019
@garvankeeley
Fix mozilla-mobile#4952 - folder icon too big. make less big.
da96731
Firefox iOS Development automation moved this from Needs Triage to Done May 13, 2019
@nil4
Copy link

nil4 commented May 14, 2019

@SimonBasca @garvankeeley the commit that closed this issue does not seem related to the problem reported here, i.e. lack of contrast between text and background in the Firefox menu. Is the closing of this issue intended?

@garvankeeley
Copy link
Contributor

Oops, wrong commit number, thanks.

@garvankeeley garvankeeley reopened this May 14, 2019
Firefox iOS Development automation moved this from Done to Needs Triage May 14, 2019
@farhanpatel farhanpatel added Contributor OK This is a good issue for contributors interested in helping the project P3 Issues that would be nice to have for the current release labels May 14, 2019
@farhanpatel farhanpatel moved this from Needs Triage to Backlog in Firefox iOS Development May 14, 2019
farhanpatel pushed a commit that referenced this issue May 14, 2019
@garvankeeley @farhanpatel
Fix #4953 - folder icon too big. make less big. (#4960)
30ad7a8 
* Fix #4952 - folder icon too big. make less big.

* Update BookmarksPanel.swift
@garvankeeley garvankeeley added the access Relates to a11y features for users, such as Voice Over, Dynamic Type, Constrat, Readability, etc. label May 16, 2019
@peterkos
Copy link

I'd like to take this on if nobody has! (Looks like its still an issue in 18.1, 15719)

@garvankeeley
Copy link
Contributor

Any help here would be appreciated, I am not sure how to fix this easily.

@peterkos peterkos mentioned this issue Jul 31, 2019
Merged
Firefox iOS Development automation moved this from Backlog to Done Aug 1, 2019
garvankeeley pushed a commit that referenced this issue Aug 1, 2019
@garvankeeley
Fix #4952 - Low contrast menus when reduced transparency/inc. contras…
0d0c4cb 
…t are enabled (#5282)

* Night mode blur color, and reduce transparency

Previous color was a result of no defined background color
Blur effect in PhotonActionSheet disables on reduced transparency, enables otherwise
Light theme removes alpha on background to deal with above case

* Fixed title and subtitle text colors

Tint colors are modified by iOS when increased contrast is enabled — now, the behavior for PhotonActionSheetCell is accessible, in addition to being inline with ThemedWidgets.

* Night mode action foreground color -> white

This increases readability for when “increase contrast” is enabled.

* Disable theme bg alpha on reduced transprency

Also:
- flipped reduce transparency logic to be more readable -> (isEnabled) instead of (!isEnabled)
- Changed Theme ActionMenuColor to be inline with corresponding DarkTheme color, by just using defaultBackground
pull bot pushed a commit to scope-demo/firefox-ios that referenced this issue Aug 1, 2019
@pull
Fix mozilla-mobile#4952 - Low contrast menus when reduced transparenc…
6a99816 
…y/inc. contrast are enabled (mozilla-mobile#5282)

* Night mode blur color, and reduce transparency

Previous color was a result of no defined background color
Blur effect in PhotonActionSheet disables on reduced transparency, enables otherwise
Light theme removes alpha on background to deal with above case

* Fixed title and subtitle text colors

Tint colors are modified by iOS when increased contrast is enabled — now, the behavior for PhotonActionSheetCell is accessible, in addition to being inline with ThemedWidgets.

* Night mode action foreground color -> white

This increases readability for when “increase contrast” is enabled.

* Disable theme bg alpha on reduced transprency

Also:
- flipped reduce transparency logic to be more readable -> (isEnabled) instead of (!isEnabled)
- Changed Theme ActionMenuColor to be inline with corresponding DarkTheme color, by just using defaultBackground
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
access Relates to a11y features for users, such as Voice Over, Dynamic Type, Constrat, Readability, etc. Bug 🐞 This is a bug with existing functionality not behaving as expected Contributor OK This is a good issue for contributors interested in helping the project P3 Issues that would be nice to have for the current release
Projects
No open projects
Firefox iOS Development
Done
Milestone
No milestone
5 participants
@nil4 @farhanpatel @peterkos @garvankeeley @SimonBasca