[Tracking] Migrate away from Touchables and create a standardized, accessible button library using Pressables

[mountiny]

Design doc link: here

Proposal:

Migrate away from Touchables and create a standardized, accessible button library using Pressables

Problem:

The next release of react-native-web will deprecate Touchable components – the same is likely to happen in a future release of react-native. We use Touchables extensively throughout the app. Meanwhile, we have a clear problem with a lack of accessibility.

Solution:

Let’s kill two birds with one stone by taking accessibility (and general UI/UX) into account as we do this migration, and create a standardized framework for Pressables across the app. This includes:

• Migrating away from Touchables and standardizing on Pressable, everywhere in the app
• Creating a standardized framework for all of our Pressable components that accounts for:
  • Visual accessibility (i.e: changes in style for hovered and pressed stated)
  • ScreenReader accessibility (i.e: tabindex, focus, etc…)
  • Custom cursor states (i.e: disabled pressables should have the cursor: not-allowed style)
  • Cross-platform compatibility, including iPads with keyboards and touch-screen laptops
  • Haptic feedback (with a framework to standardize various forms of haptic feedback)
  • Intuitive gesture handling (i.e: if you tap on a button, but slide your finger away before lifting your finger, that’s an indication that the user probably meant to “cancel” their tap)
• Ideally creating lint rules to automatically enforce that this framework is followed

Tasks

• Post Proposal (full Problem/Solution statement) in #expensify-open-source
• Wait at least one full business day, and until the post has a majority (2/3) of positive reactions (👍)
• Paste Proposal in the space above with a link to the Slack thread
• Email [email protected] and paste in the Proposal
• Fill out the High-level overview of the problem, Timeline, and Terminology sections of the Design Doc
• Email [email protected] (continue the same email chain as before) with the link to your Design Doc
• Host a pre-design meeting (example) in #expensify-open-source to discuss any necessary details in public before filling out the High-level of proposed solution section.
• Fill out the High-level of proposed solution section
• Email [email protected] again with links to the doc and pre-design conversation in Slack
• Add the DesignDocReview label to get the High-level of proposed solution section reviewed
• Respond to any questions or concerns and bring up blockers in Slack to get a consensus if necessary
• Confirm that the doc has the minimum necessary number of reviews before proceeding
• Host another pre-design meeting in #expensify-open-source to ask for engineering feedback on the technical solution.
• Fill out the Detailed implementation of the solution and related sections.
• Re-add the DesignDocReview label to this issue
• Respond to any questions or concerns and bring up blockers in Slack to get consensus if necessary
• Confirm that the doc has the minimum necessary number of reviews before proceeding
• Email [email protected] one last time to let them know the Design Doc is moving into the implementation phase
• Implement the changes
  • Tracking project: https://github.com/orgs/Expensify/projects/29/views/1
• Send out a follow up email to [email protected] once everything has been implemented and do a Project Wrap-Up retrospective that provides:
  • Summary of what we accomplished with this project
  • What went well?
  • What could we have done better?
  • What did we learn?

cc @roryabraham

[robertKozik]

Let me look into it

[s77rt]

Will this cover the use of TouchableWithoutFeedback
We have this issue here #14301 where we are trying to actually do the opposite, as it's a case where accessibility is something that we don't want and the button should not have any feedback.

[roryabraham]

Created WIP design doc here

[MelvinBot]

👋 Hello Generalist Track Team - you have been assigned to review this High Level Design Doc. Please, treat this as a priority. Review this Stack Overflow for some tips on reviewing a design doc. Once you are done, simply press the Add "Reviewed Doc" comment button in the right hand side K2 pannel or follow these instructions.

---

• @shmaxey (Expensifier / Graduate) - High-level design doc review (Expensifier / Graduate) - [Tracking] Migrate away from Touchables and create a standardized, accessible button library using Pressables #14963
• @michaelhaxhiu (Expensifier / Graduate) - High-level design doc review (Expensifier / Graduate) - [Tracking] Migrate away from Touchables and create a standardized, accessible button library using Pressables #14964
• @mateocole (Project Manager) - High-level design doc review (Project Manager) - [Tracking] Migrate away from Touchables and create a standardized, accessible button library using Pressables #14965
• @zsgreenwald (Project Manager) - High-level design doc review (Project Manager) - [Tracking] Migrate away from Touchables and create a standardized, accessible button library using Pressables #14966
• @RobertLadue (Product Manager) - High-level design doc review (Product Manager) - [Tracking] Migrate away from Touchables and create a standardized, accessible button library using Pressables #14967
• @stephanieelliott (Product Manager) - High-level design doc review (Product Manager) - [Tracking] Migrate away from Touchables and create a standardized, accessible button library using Pressables #14968
• @ryanschaffer (Generalist) - High-level design doc review (Generalist) - [Tracking] Migrate away from Touchables and create a standardized, accessible button library using Pressables #14969
• @KirkBarrett (Generalist) - High-level design doc review (Generalist) - [Tracking] Migrate away from Touchables and create a standardized, accessible button library using Pressables #14970
• @trentpetty (Accounting Technical Team) - High-level design doc review (Accounting Technical Team) - [Tracking] Migrate away from Touchables and create a standardized, accessible button library using Pressables #14971

[roryabraham]

High level ready for review. Also started a slack convo here

[trentpetty]

I have read and reviewed this Design Doc!

[KirkBarrett]

I have read and reviewed this Design Doc!

[roryabraham]

According to https://github.com/orgs/Expensify/projects/29/views/1?layout=board, we have:

• 35 issues done
• 17 done & HOLD for payment
• 18 in progress
• 8 more TODO

[roryabraham]

We are very close to being done here, with I think only one remaining Pressable to migrate 🎉

Then we will merge https://github.com/Expensify/App/pull/20363/files to prevent any re-introduction of the old pressables.

[roryabraham]

#20363 is ongoing. All that's left here is that and also the documentation updates.

[roryabraham]

Only issue that's not HOLD for payment is #17005.

[roryabraham]

Asked for a slack update: https://expensify.slack.com/archives/C04878MDF34/p1689641773049579

[roryabraham]

Just waiting on the documentation PR here, then we're done

[roryabraham]

Still waiting on a documentation PR

[roryabraham]

@robertKozik is busy with C+ work, this isn't urgent but would be really nice to get finished soon. All that's left is documentation

[roryabraham]

DM'd @robertKozik to bump on this

[roryabraham]

Documentation added, sent project wrap up email, closing this out 🎉