[$2000] Audit forms and fix inconsistencies with focus, tab and shift + tab behavior 3/4

[dylanexpensify]

We should audit all our forms and fix any inconsistencies with focus, tab, shift + tab and enter behavior. The expected behavior is as follows:

1. Tab navigates to the next input.
2. Shift + tab navigates to the previous input.
3. Enter submits the form.
4. Space toggles checkboxes/dropdowns.

Note: We should make sure that tabbing cycles through the form in an order that makes sense, usually top to bottom.

Here's a list of forms to be audited:

• [ ] IOU flow
• [ ] KYC flow
• [ ] New Room screen
• [ ] Add Debit card flow
• [ ] New password form

[MelvinBot]

Triggered auto assignment to @marcochavezf (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @Christinadobrzyn (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[dylanexpensify]

Note: decision to split this main issue up into smaller issues came from this convo

[marcochavezf]

I've been working on an N7 issue these last few days and still today, but I will come back to this issue today at EOD or tomorrow morning.

[Christinadobrzyn]

@dylanexpensify can you clarify, are we paying the hired contributor $250 to update all of the forms in the OP? Also asked here

[marcochavezf]

Oh I hadn't seen the conversation. I think this case I can just unassign myself since the Exported label will be applied to assign reviewers.

[Christinadobrzyn]

Dylan confirmed this GH job is $250. Created Upwork job

Internal job posting - https://www.upwork.com/ab/applicants/1499638878787203072/job-details External job positing - https://www.upwork.com/jobs/~014a2b9d0ae263c283

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (Exported)

[MelvinBot]

Triggered auto assignment to @thienlnam (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[mdneyazahmad]

Proposal

These 4 related issues are very similar. I proposed the solution here https://github.com/Expensify/App/issues/7918#issuecomment-1063298280

[thienlnam]

Still waiting on a volunteer to audit the forms

[Christinadobrzyn]

Price increase to $500

[thienlnam]

Price increased to $1000, still looking for a volunteer

[Christinadobrzyn]

Job price increase to $2,000. Waiting on takers.

[mdneyazahmad]

I have noticed that we have a team of accessibility engineer may be they can help us audit and the contributor can submit proposal for fixing that issues?

[OneDevStopShop]

Hi I am interested in this issue. I am confused about the expectations, do we just need to update the tab functionality if it does not work as expected?

How do you access the KYC flow page?

[thienlnam]

I have noticed that we have a team of accessibility engineer may be they can help us audit and the contributor can submit proposal for fixing that issues?

@mdneyazahmad Good suggestion, though our accessibility QA team is going through a different flow so they wouldn't test this unless a PR happened to touch these forms. We've narrowed the scope of this issue and since it's just checking a few things I think a contributor should be able to do it

@OneDevStopShop If you're looking for an example of what needs to be done, feel free to check this other similar issue out https://github.com/Expensify/App/issues/7523

How do you access the KYC flow page?

Good question, this step comes up when we're setting up your Expensify Wallet. Check out the EnablePaymentsPage and you'll likely have to be on a new account.

[OneDevStopShop]

I looked through the issue you linked and would like to take this issue

[melvin-bot[bot]]

📣 @OneDevStopShop You have been assigned to this job by @thienlnam! Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[Christinadobrzyn]

Hired @OneDevStopShop for the job and @Santhosh-Sellavel as the C+ in Upwork!

[Santhosh-Sellavel]

@OneDevStopShop If you have any questions please feel to post them here. Thanks!

[OneDevStopShop]

Hi I am having trouble with Upwork and cannot complete jobs at this time. Please find someone new for the job and sorry for the inconvenience

[mdneyazahmad]

I would like to take this one. I am also assigned other form audit issues and working on it. Thank you.

[melvin-bot[bot]]

📣 @mdneyazahmad You have been assigned to this job by @thienlnam! Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[Santhosh-Sellavel]

@mdneyazahmad Any update?

[Christinadobrzyn]

Wait, sorry @thienlnam I might have missed something.

I hired @OneDevStopShop for this job based on the 'thumbs up' to this post - https://github.com/Expensify/App/issues/7917#issuecomment-1090410859 and this bot comment - https://github.com/Expensify/App/issues/7917#issuecomment-1090577860

Should I also hire @mdneyazahmad?

[thienlnam]

@Christinadobrzyn No you were correct in hiring them. Though from this comment https://github.com/Expensify/App/issues/7917#issuecomment-1093009100 it seems like they're having an issue with Upwork and so I've hired @mdneyazahmad for the job instead. So if possible, revoke the job from @OneDevStopShop and then hire @mdneyazahmad instead

[Christinadobrzyn]

Oh I'm so sorry, not sure how I missed that comment. Thank you for clarifying!

I hired @mdneyazahmad for the job! Sorry about the confusion.

[luacmartins]

@mdneyazahmad please note that 4. Space toggles checkboxes. was added to the list of expected behavior.

[Santhosh-Sellavel]

@mdneyazahmad Kindly provide an update on how is it coming up?