[A11y] Pin Verification Screen #2627

rt4914 · 2021-02-05T07:38:21Z

Current Output

current_profile_pin_full_video.mp4

Issues Identified

If there is incorrect PIN the talkback does not shift to error and does not say that it was incorrect therefore the learner won't know what went wrong. Ideally as soon as error is show it should get highlighted. (For reference: In this video as soon as we enter incorrect answer the talkback automatically focuses on error.)
If PIN area is selected, on swipe to next talkback shifts to FORGOT MY PIN but instead it should shift to Show/Hide Icon.
Output for Show/Hide View is following:
(a) Password [shown/hidden] icon
(b.) [SHOW/HIDE]
(c.) Double-tap to activate

Note: To understand the above issue(s) completely, it is recommended that you setup Talkback and play with the app keeping it on and that will give you better context.

Accessibility Guide: https://github.com/oppia/oppia-android/wiki/Accessibility-(A11y)-Guide

mschanteltc · 2021-02-06T20:21:23Z

Let's leave it as a keyboard because in most cases, users would want to put in their PIN instead of reading the description. If a user has a PIN, they would need to set it up beforehand, so it's possible that they may be more understanding of why this screen exists and why a keyboard is immediately available.
I prefer the first suggestion "Show/Hide password icon, [STATE]" because it's similar to the way the toggle switch is described in the Administrator Controls ([A11y] Administrator Controls #2618). Can we also add "Double tap to [SHOW/HIDE] password" since it is also a button?

rt4914 · 2021-02-08T06:57:20Z

Let's leave it as a keyboard because in most cases, users would want to put in their PIN instead of reading the description. If a user has a PIN, they would need to set it up beforehand, so it's possible that they may be more understanding of why this screen exists and why a keyboard is immediately available.

I prefer the first suggestion "Show/Hide password icon, [STATE]" because it's similar to the way the toggle switch is described in the Administrator Controls ([A11y] Administrator Controls #2618). Can we also add "Double tap to [SHOW/HIDE] password" since it is also a button?

@mschanteltc Actually we cannot control the Double Tap related statement as it is controlled by Talkback directly.

rt4914 · 2021-02-08T06:57:24Z

Let's leave it as a keyboard because in most cases, users would want to put in their PIN instead of reading the description. If a user has a PIN, they would need to set it up beforehand, so it's possible that they may be more understanding of why this screen exists and why a keyboard is immediately available.

I prefer the first suggestion "Show/Hide password icon, [STATE]" because it's similar to the way the toggle switch is described in the Administrator Controls ([A11y] Administrator Controls #2618). Can we also add "Double tap to [SHOW/HIDE] password" since it is also a button?

@mschanteltc Actually we cannot control the Double Tap related statement as it is controlled by Talkback directly.

mschanteltc · 2021-02-09T05:44:05Z

@mschanteltc Actually we cannot control the Double Tap related statement as it is controlled by Talkback directly.

How would the user know that the 'Show/Hide' button is clickable? If there is no label for this button or to show that it can be toggled, is there any way that we can?

rt4914 · 2021-02-17T20:12:25Z

@mschanteltc Actually we cannot control the Double Tap related statement as it is controlled by Talkback directly.
How would the user know that the 'Show/Hide' button is clickable? If there is no label for this button or to show that it can be toggled, is there any way that we can?

It would read like this:
Show/Hide password icon, SHOW, Double-tap to activate. @mschanteltc

mschanteltc · 2021-02-17T20:51:05Z

Is it possible we can use "Double-tap to hide" (or show)? Or is "Double-tap to activate" the default we must use?

Arjupta · 2021-02-18T05:38:48Z

@mschanteltc Actually we cannot control the Double Tap related statement as it is controlled by Talkback directly.
How would the user know that the 'Show/Hide' button is clickable? If there is no label for this button or to show that it can be toggled, is there any way that we can?

It would read like this:
Show/Hide password icon, SHOW, Double-tap to activate. @mschanteltc

@rt4914

Why can't we just go with Show Password, Button as a response because by default the Pin is in hidden state.
We can make the Show/Hide Icon to be a Button with that image and a textview just below showing the current state (ie HIDE or SHOW) and mark this textview not important for accessibility. WDYT?
The Show hide icon is read after forgot pin because it is mentioned after the Forgot Pin textview in the layout file.

rt4914 · 2021-02-18T16:39:20Z

Is it possible we can use "Double-tap to hide" (or show)? Or is "Double-tap to activate" the default we must use?

@mschanteltc So basically there are three parts to this:
(a.) Show/Hide password icon
(b.) SHOW
(c.) Double-tap to activate

So in this we can control only (a.) and (b.). Part (c.) is controlled by readers and therefore we cannot control it.

rt4914 · 2021-02-18T16:40:06Z

@mschanteltc Actually we cannot control the Double Tap related statement as it is controlled by Talkback directly.
How would the user know that the 'Show/Hide' button is clickable? If there is no label for this button or to show that it can be toggled, is there any way that we can?

It would read like this:
Show/Hide password icon, SHOW, Double-tap to activate. @mschanteltc

@rt4914

Why can't we just go with Show Password, Button as a response because by default the Pin is in hidden state.

We can make the Show/Hide Icon to be a Button with that image and a textview just below showing the current state (ie HIDE or SHOW) and mark this textview not important for accessibility. WDYT?

The Show hide icon is read after forgot pin because it is mentioned after the Forgot Pin textview in the layout file.

Okay so in that case what would be the final output from talkback? @Arjupta

mschanteltc · 2021-02-18T21:53:57Z

Current, Adobe XD mock (with confusing icon and label):

Looking at the current output, the current Adobe XD mock (above image), and the screenshot in the PRD, there seems to be inconsistencies with the UI/UX.

I'm thinking of the following solution, based on NN Group's recommendation on state-switch controls (scroll to "Recommendations"):

Have the icon reflect the current state of the PIN's visibility
The label indicates what will happen if the user will tap on that control

PIN Shown (Talkback: Password shown icon, Hide, Double-tap to activate)

PIN Hidden (Talkback: Password hidden icon, Show, Double-tap to activate)

With these in mind, the following can be read:
(a) Password [shown/hidden] icon
(b.) [SHOW/HIDE]
(c.) Double-tap to activate

WDYT?

rt4914 · 2021-02-19T16:12:00Z

Current, Adobe XD mock (with confusing icon and label):

Looking at the current output, the current Adobe XD mock (above image), and the screenshot in the PRD, there seems to be inconsistencies with the UI/UX.

I'm thinking of the following solution, based on NN Group's recommendation on state-switch controls (scroll to "Recommendations"):

Have the icon reflect the current state of the PIN's visibility

The label indicates what will happen if the user will tap on that control

PIN Shown (Talkback: Password shown icon, Hide, Double-tap to activate)

PIN Hidden (Talkback: Password hidden icon, Show, Double-tap to activate)

With these in mind, the following can be read:
(a) Password [shown/hidden] icon
(b.) [SHOW/HIDE]
(c.) Double-tap to activate

WDYT?

@mschanteltc Sounds good. We can implement this.

mschanteltc · 2021-04-12T18:31:47Z

Updated the mocks to reflect the new changes.

* A11y related strings * Part 2 of issue fixed * Nit fix in tests * Added another test Co-authored-by: Rajat Talesra <[email protected]>

rt4914 · 2021-07-14T15:36:39Z

demo_new_pin_view.mp4

This is just a demo for reference fore new pin view which will help us control RTL and A11y in much better way and also we can remove the 3rd party library which we are using right now.

rt4914 · 2022-03-24T14:32:19Z

@yash10019coder Any updates on this?

## Explanation Fixes #2627: Improve accessibility for Pin Verification screen. I have removed seperate textview which is used to show error text. Now, error is set directly to PinPassPasswordInputEditText using onTextChanged extension function. ## Essential Checklist  - [x] The PR title and explanation each start with "Fix #bugnum: " (If this PR fixes part of an issue, prefix the title with "Fix part of #bugnum: ...".) - [x] Any changes to [scripts/assets](https://github.com/oppia/oppia-android/tree/develop/scripts/assets) files have their rationale included in the PR explanation. - [x] The PR follows the [style guide](https://github.com/oppia/oppia-android/wiki/Coding-style-guide). - [x] The PR does not contain any unnecessary code changes from Android Studio ([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#undo-unnecessary-changes)). - [x] The PR is made from a branch that's **not** called "develop" and is up-to-date with "develop". - [x] The PR is **assigned** to the appropriate reviewers ([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#clarification-regarding-assignees-and-reviewers-section)). ### Before https://user-images.githubusercontent.com/9396084/107003150-543c2700-67b2-11eb-97f0-636b2bd4db10.mp4 ### After https://user-images.githubusercontent.com/43074241/180941747-b5dad9b0-2ea4-45c2-9003-a4dc1ac56ff9.mp4 ### Passing updated testcases ![Screenshot from 2022-07-29 23-49-25](https://user-images.githubusercontent.com/43074241/181823121-7932c429-8d02-4cf5-b751-48fcabd7c15c.png) ![Screenshot from 2022-07-29 23-52-30](https://user-images.githubusercontent.com/43074241/181823129-e6c3efdc-6183-4233-86b9-b47ccb5e7d6d.png) ![Screenshot from 2022-07-29 23-55-13](https://user-images.githubusercontent.com/43074241/181823134-12b66281-ecec-4215-96b3-5ca06bc11ad2.png)

rt4914 added Priority: Essential This work item must be completed for its milestone. Type: Task A single task of work corresponding to a greater milestone. Generally corresponds to a single PR. labels Feb 5, 2021

rt4914 added this to the Beta milestone Feb 5, 2021

rt4914 assigned mschanteltc Feb 5, 2021

rt4914 assigned rt4914 and unassigned mschanteltc Feb 19, 2021

rt4914 mentioned this issue Feb 23, 2021

Fix #2256: Pin Verification screen A11y #2772

Closed

8 tasks

rt4914 mentioned this issue Apr 8, 2021

Fixes part of #2627: Pin Verification screen A11y #3060

Merged

8 tasks

rt4914 added a commit that referenced this issue Apr 12, 2021

Fixes part of #2627: Pin Verification screen A11y (#3060)

d3bdf68

* A11y related strings * Part 2 of issue fixed * Nit fix in tests * Added another test Co-authored-by: Rajat Talesra <[email protected]>

rt4914 added this to Needs Triage in CLAM Team (deprecated -- please use new board) via automation Jul 12, 2021

rt4914 moved this from Needs Triage to Beta (Features & Tasks) in CLAM Team (deprecated -- please use new board) Jul 12, 2021

rt4914 moved this from Beta (Features & Tasks) to A11Y Basic in CLAM Team (deprecated -- please use new board) Jul 12, 2021

rt4914 removed their assignment Jan 18, 2022

yash10019coder self-assigned this Mar 3, 2022

BenHenning added temp: triage for beta and removed temp: triage for beta labels Jun 11, 2022

rt4914 unassigned yash10019coder Jun 21, 2022

Broppia added the issue_type_bug label Jul 7, 2022

vrajdesai78 self-assigned this Jul 23, 2022

vrajdesai78 mentioned this issue Jul 26, 2022

Fixes #2627: Improve accessibility for Pin Verification Screen #4468

Merged

6 tasks

Broppia added Impact: Medium Moderate perceived user impact (non-blocking bugs and general improvements). user_team labels Jul 29, 2022

BenHenning added Issue: Needs Clarification Indicates that an issue needs more detail in order to be able to be acted upon. Z-ibt Temporary label for Ben to keep track of issues he's triaged. issue_user_learner labels Sep 15, 2022

BenHenning removed this from the Beta milestone Sep 16, 2022

BenHenning closed this as completed in #4468 Nov 6, 2022

CLAM Team (deprecated -- please use new board) automation moved this from [Beta MR1] A11Y Basic to Closed Nov 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[A11y] Pin Verification Screen #2627

[A11y] Pin Verification Screen #2627

rt4914 commented Feb 5, 2021 •

edited

Loading

mschanteltc commented Feb 6, 2021

rt4914 commented Feb 8, 2021

rt4914 commented Feb 8, 2021

mschanteltc commented Feb 9, 2021 •

edited

Loading

rt4914 commented Feb 17, 2021

mschanteltc commented Feb 17, 2021

Arjupta commented Feb 18, 2021

rt4914 commented Feb 18, 2021

rt4914 commented Feb 18, 2021

mschanteltc commented Feb 18, 2021

rt4914 commented Feb 19, 2021

mschanteltc commented Apr 12, 2021

rt4914 commented Jul 14, 2021

rt4914 commented Mar 24, 2022

[A11y] Pin Verification Screen #2627

[A11y] Pin Verification Screen #2627

Comments

rt4914 commented Feb 5, 2021 • edited Loading

Current Output

Issues Identified

mschanteltc commented Feb 6, 2021

rt4914 commented Feb 8, 2021

rt4914 commented Feb 8, 2021

mschanteltc commented Feb 9, 2021 • edited Loading

rt4914 commented Feb 17, 2021

mschanteltc commented Feb 17, 2021

Arjupta commented Feb 18, 2021

rt4914 commented Feb 18, 2021

rt4914 commented Feb 18, 2021

mschanteltc commented Feb 18, 2021

rt4914 commented Feb 19, 2021

mschanteltc commented Apr 12, 2021

rt4914 commented Jul 14, 2021

rt4914 commented Mar 24, 2022

rt4914 commented Feb 5, 2021 •

edited

Loading

mschanteltc commented Feb 9, 2021 •

edited

Loading