Skip to content

Conversation

@malmstein
Copy link
Contributor

Task/Issue URL: https://app.asana.com/0/715106103902962/874107794298116
Product Review URL: https://app.asana.com/0/1142021229838617/1176459710279645

Description:
In a handful of scenarios in our Android app we fail to meet WCAG (Web Content Accessibility Guidelines https://www.w3.org/WAI/standards-guidelines/wcag/) standards. This results in a problematic user experience for people with visual impairments and suboptimal experience for everyone else.

This PR fixes those issues, using new colors that meet the above mentioned guidelines

Steps to test this PR:

  1. Open the app in Light Mode and Dark Mode
  2. Navigate through the app and check the new colors as per https://www.figma.com/file/DTS9R8KSj29PANxUUCdfWJ/Optimize-Themes?node-id=0%3A1

Internal references:

Software Engineering Expectations
Technical Design Template

malmstein added 30 commits May 7, 2020 10:57
# Conflicts:
#	app/src/main/res/values/attrs.xml
#	app/src/main/res/values/themes.xml
…contrast_colors_change

# Conflicts:
#	app/src/main/java/com/duckduckgo/app/bookmarks/ui/BookmarksActivity.kt
val message = getString(R.string.bookmarkDeleteConfirmMessage, bookmark.title).html(this)
val title = getString(R.string.dialogConfirmTitle)
deleteDialog = AlertDialog.Builder(this)
deleteDialog = MaterialAlertDialogBuilder(this)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because we want to change the background color of the dialogs, we move to MaterialAlertDialog and apply a default theme


}
private fun showOverFlowMenu(anchor: ImageView, bookmark: BookmarkEntity) {
val popupMenu = BookmarksPopupMenu(layoutInflater)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here, need to change the PopupMenu colors

val urlInput = rootView.find<EditText>(R.id.urlInput)

val alertBuilder = AlertDialog.Builder(requireActivity())
val alertBuilder = MaterialAlertDialogBuilder(requireActivity())
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto


if (isShowing != true) {
alertDialog = AlertDialog.Builder(context)
alertDialog = MaterialAlertDialogBuilder(context)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto

<shape android:shape="rectangle">
<padding android:top="1dp"/>
<solid android:color="#50CCCCCC" />
<solid android:color="?attr/toolbarBgBorderColor" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these are preliminary changes, https://app.asana.com/0/1157893581871903/1176799629392268 will make sure to update these changes should the experiment move forward

@marcosholgado marcosholgado self-assigned this May 26, 2020
Copy link
Contributor

@marcosholgado marcosholgado left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code wise just some minor comments. I also created https://app.asana.com/0/inbox/1125189844075764/1177618788912081/1177628356924635 to list different UI issues, we can continue the conversation there to see which one of them are actually issues.

class BookmarksPopupMenu(layoutInflater: LayoutInflater, view: View = inflate(layoutInflater, R.layout.popup_window_bookmarks_menu)) :
PopupWindow(view, WRAP_CONTENT, WRAP_CONTENT, true) {

// popupwindow gets stuck on the screen on API 22 (tested on 23) without a background
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: we already have this comment below

// color. Adding it however garbles the elevation so we cannot have elevation here.
setBackgroundDrawable(ColorDrawable(Color.WHITE))
} else {
elevation = 6.toFloat()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be in a const like MARGIN making it a Float and save the .toFloat()?

android:paddingBottom="17dp"
android:text="@string/fireClearAll"
android:textColor="@color/brickOrange"
android:textColor="?fireIcon"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider changing this to fireIconColor to be consistent with the rest of the attrs which always specify in the name what they are.

@malmstein
Copy link
Contributor Author

@marcosholgado I've removed the changes to the Dialogs and it's now good for re-review. Addressed the comments you had too. Thanks for the review!

@malmstein malmstein requested a review from marcosholgado May 27, 2020 15:13
Copy link
Contributor

@marcosholgado marcosholgado left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Nice job!

@malmstein
Copy link
Contributor Author

Thanks for the review @marcosholgado !

@malmstein malmstein merged commit 28fff5a into develop May 28, 2020
@malmstein malmstein deleted the feature/david/contrast_colors_change branch May 28, 2020 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants