[$500] Improve Tab Navigation & Accessibility

[kosmydel]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: Latest
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): N/A
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL: N/A
Issue reported by: me
Slack conversation: N/A

Action Performed:

1. Open report.
2. Click the user avatar (next to the message).
3. The RHP opens.
4. Try to tab navigate.

Expected Result:

You should navigate only inside the RHP modal. You shouldn't be able to escape it (unless you press escape/back button). This would improve the accessibility for users with visual disabilities.

Actual Result:

You can navigate outside the RHP modal.

Workaround:

N / A

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Screen.Recording.2024-02-14.at.13.09.16.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01681c9914c65b84bc
• Upwork Job ID: 1758337605760794624
• Last Price Increase: 2024-02-16
• Automatic offers:
• c3024 | Reviewer | 0
• fedirjh | Contributor | 0

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[kosmydel]

Coming from here.
cc @roryabraham

---

Proposal

Please re-state the problem that we are trying to solve in this issue.

Users can navigate outside the RHP modal using the Tab/Shift+Tab.

What is the root cause of that problem?

We are not using FocusTrap on the RHP modals.

What changes do you think we should make in order to solve the problem?

Just add the focus trap like in this PR.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01681c9914c65b84bc

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @c3024 (External)

[melvin-bot]

📣 @c3024 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[roryabraham]

Let's swap in @fedirjh as C+ since he's got context on the focus trap

[melvin-bot]

📣 @fedirjh 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

[roryabraham]

Not overdue, go away melvin

[kosmydel]

Thanks @roryabraham!
I'm going to work on this next week, as this week I'm busy with higher priority issues and I'm OOO from Wednesday.

[roryabraham]

This is less urgent so I'm going to move it to weekly

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

This issue has not been updated in over 15 days. @isabelastisser, @fedirjh, @roryabraham, @WojtekBoman, @jnowakow, @kosmydel eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[techievivek]

@jnowakow, do you have an update on this issue? We have a few other issues on hold because of this one, so an update would be greatly appreciated. Thanks!

[jnowakow]

I'm not working on this one for quite a while. When it was merged I fixed some issues that appeared. Since then I assumed it was ready

[roryabraham]

We've added focus trap, which helps improve tab navigation in the RHP. It's a step in the right direction.

But I'm going to close this issue out. The original bug report is fixed, and the other kind of lofty goals of improving tab navigation across the app are not tightly scoped or high roadmap priorities.

[fedirjh]

@isabelastisser It appears that the issue was closed before payment was made. Could you please take care of the payment?

[roryabraham]

sorry about that @fedirjh

[isabelastisser]

Payment summary:

@fedirjh $500 for C+ review. Pending via NewDot.

@fedirjh, can you please confirm this is correct? Thanks!

[fedirjh]

@isabelastisser Yep all good. I have requested payment in NewDot.

[JmillsExpensify]

$500 approved for @fedirjh

[isabelastisser]

All set. Closing!