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.

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

Fix part of #28,#29,#33: Hi-fi input interaction views #330

Merged
merged 14 commits into from
Nov 14, 2019

Conversation

nikitamarysolomanpvt
Copy link
Contributor

@nikitamarysolomanpvt nikitamarysolomanpvt commented Nov 11, 2019

Explanation

Mock: https://xd.adobe.com/spec/e2239cf4-9cde-4c08-5296-25316c1f0a14-9412/screen/40d6cf5f-f673-42c8-af15-035f711ef6b9/PM-IN-Introduction-

Checklist

  • TextInput (similar to the mock)

  • Final touch up with padding, margin and Accessibility Scanner test

  • Numeric Text Input (similar to the mock)

  • Final touch up with padding, margin and Accessibility Scanner test

  • FractionInput (similar to the mock)

  • Final touch up with padding, margin and Accessibility Scanner test

Reference Mocks

https://xd.adobe.com/spec/e2239cf4-9cde-4c08-5296-25316c1f0a14-9412/screen/4d4e4bd8-3755-41fc-bf83-3dcff5d5eee1/Lesson-1-a-ii-Exploration-Player-Text-Input-No-Ans
https://xd.adobe.com/spec/e2239cf4-9cde-4c08-5296-25316c1f0a14-9412/screen/eeed0f6c-54ca-4371-ab23-5199abd87f28/Lesson-1-a-ii-Exploration-Player-Text-Input-Keyboa
https://xd.adobe.com/spec/e2239cf4-9cde-4c08-5296-25316c1f0a14-9412/screen/d66097bf-8421-41d8-bfda-2450d6e98dea/Lesson-1-a-i-Exploration-Player-Fraction-Input-No-
https://xd.adobe.com/spec/e2239cf4-9cde-4c08-5296-25316c1f0a14-9412/screen/249c3349-605b-4569-bbe9-1a017ab90101/Lesson-1-a-i-Exploration-Player-Fraction-Input-No-
https://xd.adobe.com/spec/e2239cf4-9cde-4c08-5296-25316c1f0a14-9412/screen/c4b0dfb3-53b4-491e-a759-818e096183fd/Lesson-1-a-v-Exploration-Player-Numeric-Input-No-A

Checklist

  • The PR title starts with "Fix #bugnum: ", followed by a short, clear summary of the changes. (If this PR fixes part of an issue, prefix the title with "Fix part of #bugnum: ...".)
  • The PR explanation includes the words "Fixes #bugnum: ..." (or "Fixes part of #bugnum" if the PR only partially fixes an issue).
  • The PR follows the style guide.
  • The PR does not contain any unnecessary auto-generated code from Android Studio.
  • The PR is made from a branch that's not called "develop".
  • The PR is made from a branch that is up-to-date with "develop".
  • The PR's branch is based on "develop" and not on any other branch.
  • The PR is assigned to an appropriate reviewer in both the Assignees and the Reviewers sections.

@nikitamarysolomanpvt
Copy link
Contributor Author

nikitamarysolomanpvt commented Nov 11, 2019

@mschanteltc
1.Please suggest on focus of edit text iam I supposed to clear hint(place holder text) ?
on Accessibility Scanner test it is giving suggestions as no label found.

Item label org.oppia.app:id/fraction_input_interaction_view This item may not have a label readable by screen readers.
screenshot_Oppia_2019-11-11-22_45_09

2.The color of hint/text is not matching required contrast ratio.
Text contrast
org.oppia.app:id/fraction_input_interaction_view The item's text contrast ratio is 1.61. This ratio is based on an estimated foreground color of #CCCCCC and an estimated background color of #FFFFFF. Consider increasing this item's text contrast ratio to 3.00 or greater.
screenshot_Oppia_2019-11-11-22_11_35

@mschanteltc
3.Text contrast
org.oppia.app:id/fraction_input_interaction_view
The item's text contrast ratio is 1.80. This ratio is based on an estimated foreground color of #ABC2EC and an estimated background color of #FFFFFF. Consider increasing this item's text contrast ratio to 3.00 or greater.

screenshot_Oppia_2019-11-12-10_09_21

@mschanteltc
Copy link

Hi Nikita,

  1. Although there are some drawbacks of removing the placeholder text, it should still disappear from the text input because it is more commonplace than keeping it there. If the input is still empty and the user taps out of the text field, then the placeholder text should reappear.

  2. Because it is placeholder text, we can assume that this is not "normal" text and that it does not adhere to the WCAG 2.0 guidelines.

@nikitamarysolomanpvt
Copy link
Contributor Author

nikitamarysolomanpvt commented Nov 12, 2019

Hi Nikita,

  1. Although there are some drawbacks of removing the placeholder text, it should still disappear from the text input because it is more commonplace than keeping it there. If the input is still empty and the user taps out of the text field, then the placeholder text should reappear.
  2. Because it is placeholder text, we can assume that this is not "normal" text and that it does not adhere to the WCAG 2.0 guidelines.

Ok thank you. please reply on the below and also review this PR.

3.Text contrast
org.oppia.app:id/fraction_input_interaction_view
The item's text contrast ratio is 1.80. This ratio is based on an estimated foreground color of #ABC2EC and an estimated background color of #FFFFFF. Consider increasing this item's text contrast ratio to 3.00 or greater.

screenshot_Oppia_2019-11-12-10_09_21
4. Please suggest if you want any changes in the padding , margin or any other specifications.

@veena14cs
Copy link
Contributor

Please update your code with latest develop.

@seanlip seanlip removed their assignment Nov 12, 2019
Copy link
Contributor

@veena14cs veena14cs left a comment

Choose a reason for hiding this comment

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

Please do the changes and assign me back.

@veena14cs veena14cs removed their assignment Nov 12, 2019
@nikitamarysolomanpvt
Copy link
Contributor Author

@nikitamarysolomanpvt Suggestions: Change background of the StateFragment to #E0F2F1 to fix the contrast issue.

Found this is not the reason of the suggestion in Accessibility Scanner test.

@nikitamarysolomanpvt
Copy link
Contributor Author

The cursor color in edittext is not correct: it should be #2D4A9D and currently it is pink.

Done

…://github.com/oppia/oppia-android into hi-fi-input-interaction-views

# Conflicts:
#	app/src/main/res/layout/text_input_interaction_item.xml
@nikitamarysolomanpvt
Copy link
Contributor Author

Hi Nikita,

  1. Although there are some drawbacks of removing the placeholder text, it should still disappear from the text input because it is more commonplace than keeping it there. If the input is still empty and the user taps out of the text field, then the placeholder text should reappear.
  2. Because it is placeholder text, we can assume that this is not "normal" text and that it does not adhere to the WCAG 2.0 guidelines.

Ok thank you. please reply on the below and also review this PR.
3.Text contrast
org.oppia.app:id/fraction_input_interaction_view
The item's text contrast ratio is 1.80. This ratio is based on an estimated foreground color of #ABC2EC and an estimated background color of #FFFFFF. Consider increasing this item's text contrast ratio to 3.00 or greater.
screenshot_Oppia_2019-11-12-10_09_21
4. Please suggest if you want any changes in the padding , margin or any other specifications.

In regards to the text input, the input box itself should have a border with hex value #395FD0 and opacity 100%.

The text "1/2" should be #666666 at 100% opacity against a #FFFFFF background, so the contrast ratio should pass the accessibility checker.

Theme colors have been changed from to #019489 to #00645C so most objects are able to pass the accessibility checker.

For the back button, this design may need further discussing. We have had the arrow by itself, without a box. Making the arrow white with a background color provides it as much significance as a "Submit" button, but should not be used frequently. It seems that there will be drawbacks regardless of the design we choose, but for now, let's stick with the current one that we have. I believe adding shadow elevates the back button to make it stand out to the user.

Thank you. This PR is only for input views.

Copy link
Contributor

@rt4914 rt4914 left a comment

Choose a reason for hiding this comment

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

LGTM and nice work with Date input type.

@rt4914 rt4914 changed the title Fix #28,#29,#33: Hi-fi input interaction views Fix part of #28,#29,#33: Hi-fi input interaction views Nov 13, 2019
android:imeOptions="actionDone"
android:inputType="date"
Copy link
Contributor

Choose a reason for hiding this comment

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

One problem with this date input type. It allows user to add - and if this is submitted it will crash.

Copy link
Contributor Author

@nikitamarysolomanpvt nikitamarysolomanpvt Nov 13, 2019

Choose a reason for hiding this comment

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

Fraction can be negative. If its is getting crashed need to find the issue in parsing which is updated by ben.

Copy link
Contributor

Choose a reason for hiding this comment

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

Okay just make a note of it, that we need to resolve this. Beside this looks good to me.

Copy link
Contributor

@veena14cs veena14cs left a comment

Choose a reason for hiding this comment

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

Please resolve one comment and assign it back to me.

@nikitamarysolomanpvt
Copy link
Contributor Author

Please resolve one comment and assign it back to me.

OK

@nikitamarysolomanpvt nikitamarysolomanpvt merged commit 0473566 into develop Nov 14, 2019
@nikitamarysolomanpvt nikitamarysolomanpvt deleted the hi-fi-input-interaction-views branch November 14, 2019 07:35
@nikitamarysolomanpvt nikitamarysolomanpvt restored the hi-fi-input-interaction-views branch November 14, 2019 07:43
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.

5 participants