App: [HOLD for payment 2023-03-20] [HOLD #12370][$2000] Audit forms and fix inconsistencies with focus, tab and shift + tab behavior 3/4

There are issues with OptionsList. It toggles selection with enter and when you press it toggles as well as submits the form that is not the user is expecting. We are discussing the accessibility of OptionsList in the other issue may be continue the discussion here https://github.com/Expensify/App/issues/7916

Looks correct, and I believe this issue was created way back before we even added time bonuses so let’s just do normal payouts for this issue

I think we don’t need a BZ Checklist. It’s all N/A for this one!

@dylanexpensify

cc: @thienlnam

@thienlnam this issue is not fully completed can we update the title to avoid any confusions 2 more PRs to go!

cc: @dylanexpensify

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

Alright, we’re all sorted here! Thanks for playing!

@mdneyazahmad Ah thanks, I believe this one comes with in the scope of this audit. We should fix it here.

cc: @luacmartins @thienlnam

@luacmartins

• Signup a new account using email
• Open magic received from mail
• Enter invalid password or don’t type anything. Now Press Enter

Pressing Enter should error, instead goes to home page

We are changing parts of the IOU flow in the Manual requests design doc. So I don’t think we need to address that here.

Sorry for the inconvenience, @mdneyazahmad seems accidentally missed this one. I’ll update by Monday or sooner, seems most likely to do nothing here. I’ll test and update.

@mdneyazahmad

[KYC flow]: I can not navigate to this, but I have checked the code of this components. This also seems to be fixed as this also uses the updated Form component.

Here are the steps to navigate this flow.

Okay, I’ve gone through the thread, next steps would be. Since it’s been a while we just need to re-run the audit on the flow/pages again please share screen records of the same i.e. if all looks good we can confirm and close this one. Thanks

Cc: @thienlnam

Tomorrow I’ll go through the thread to look if anything is missed and confirm everything is working.

Update: PR (https://github.com/Expensify/App/pull/12370) is merged! I will create the PR for this issue this weekend. Thanks!

Hm, I have no memory of why I did that, so I think you should feel free to remove the hold.

Checkbox PR is merged now! Once the Form submission is PR merged, let’s make a PR for this issue.

Sounds good to me!

Hey @dylanexpensify, reassigning this one since I am about to head OOO. To save you some scrolling, we got bit stuck on the best way to handle button behavior, discussion on that is going on here: https://expensify.slack.com/archives/C01GTK53T8Q/p1654195847140899. Thank you!

@mdneyazahmad We have an update on the slack thread can you check it out.

I am trying to handle other issues in a separate PR. Checkbox issue is common to the other issue I am working therefore I created a separate PR for that.

PR for other issue is drafted here https://github.com/Expensify/App/pull/8747 but I am introducing one issue if we go with the pressOnEnter on Button https://github.com/Expensify/App/issues/7918#issuecomment-1134216565

cc: @Santhosh-Sellavel

Yes, group upto maximum two tests in a single video.

Break down into seperate comments for each test or grouped tests, yes upload all platform videos thanks!

I am sorry for the delay PR is almost ready.

@Santhosh-Sellavel PR is ready for review https://github.com/Expensify/App/pull/8874

This is my initial attempt to fix the checkbox accessibility.

1. Created a separate implementation for native and others.
2. native implementation is exactly same.
3. web and desktop added custom logic to handle onClick and onKeyDown to listen for space.

You can check the diff here https://github.com/Expensify/App/compare/main...mdneyazahmad:fix/checkbox

I am ooo and will be back in 1 -2 days. Remaining task

• audit https://github.com/Expensify/App/issues/7917#issuecomment-1106834209
• fix checkbox

Thank you!

@Santhosh-Sellavel correct! I’d just hardcode each step individually to test each of them.

Thanks, @mdneyazahmad. Let’s not wait for it. Perform the audit on each form and list out the issues/inconsistencies. if there are issues with Enter to submit feel free to point out that too.

cc: @thienlnam

I’m going to be ooo until April 26th so I’m going to assign a new CM to this issue. Thanks!

@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

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

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

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.