[HOLD for payment 2023-07-21] [HOLD for payment 2023-07-20] [Accessible Pressables] Add new ESLint rules to enforce use of accessible pressable components

[roryabraham]

HOLD on:

• [Accessible Pressables] Migrate components using TouchableWithoutFeedback to use PressableWithoutFeedback #16990
• [Accessible Pressables] Migrate TouchableOpacity to accessible pressables #16991
• [Accessible Pressable] Migrate Pressable to accessable pressables #16993
• [Accessible Pressable] Migrate Emoji-related components to use new pressables #16998
• [Accessible Pressables] Migrate multi-purpose components to use Accessible Pressables #17000
• [Accessible Pressables] Migrate image-related and other miscellaneous components to new pressables #17002

Design doc section

https://docs.google.com/document/d/1yHHs4IfaMxB2q7eW8Hyt7ew4rNtY6HdduPKdf-Q2ZxE/edit#bookmark=id.qrj5v8pfxn22

[roryabraham]

cc @robertKozik

[melvin-bot]

@roryabraham, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

[robertKozik]

@roryabraham There is still an unmerged PR (draft to be precise) from @Skalakid, looks like project automation close it sooner as it should
edit: looks like other issues from this project suffered the same fate

[roryabraham]

@Skalakid do you think the migration's at the point where we can disable new non-accessible pressables going forward?

[Skalakid]

@roryabraham I have one more PR to be merged, but I think yes. I will open my PR #20363

[Skalakid]

@roryabraham Okay, so I fixed all ESlint errors connected with accessibility. While doing it I found out that there are a few new components that are using "old" Pressables:

• SignInPageGraphics
• ThreePaneView
• FloatingActionButton
• Badge

I think we can move forward with the PR! What do you think bout it @robertKozik?

[robertKozik]

Yeah, we need to cut the flow of the new Pressables. The amount of them is bearable for now, so I think we should prohibit the usage of react-native Pressable ASAP and then migrate the last of them.
CC. @roryabraham

[Skalakid]

Hi @roryabraham, I just found a bug in our ESlint rules. We have 3 no-restricted-imports rules for react-native but with different messages. Unfortunately, only the last one in the paths array is enabled. It is a known issue and ESlint is working on it, you can find it here eslint/eslint#15261.

To make this PR work I moved the Pressable rule to the bottom, but this is only a workaround. Should I fix this issue in my PR? I think it can be solved by adding custom eslint rules

[blazejkustra]

@Skalakid @roryabraham I also noticed this bug in Setup App for TypeScript #20179. My workaround for now is to group imports together with a longer description:

{
    name: 'react-native',
    importNames: ['useWindowDimensions', 'TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight', 'StatusBar'],
    message: [
        "For 'useWindowDimensions', please use 'src/hooks/useWindowDimensions' instead.",
        "For 'TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight', please use 'PressableWithFeedback' and/or 'PressableWithoutFeedback' from 'src/components/Pressable' instead.",
        "For 'StatusBar', please use 'src/libs/StatusBar' instead.",
    ].join('\n'),
},

This way all listed react-native imports are restricted.

[roryabraham]

Thanks @blazejkustra. I've hired someone to implement that workaround (they beat you to it on #22459)

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.39-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• 17004 - add new ESLint rules to enforce use of accessible pressable components #20363

If no regressions arise, payment will be issued on 2023-07-20. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.40-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• 17004 - add accessibility and Pressable ESLint rules follow up #22732

If no regressions arise, payment will be issued on 2023-07-21. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

12 days overdue. Walking. Toward. The. Light...

[roryabraham]

This is done