[APP-737] Accessible native dropdown menu (#988)

* fix comments

* add zeego package

* get basic native dropdown working

* add separator and icon components

* refined native dropdown component

* add android build properties to app.json

* move `PostDropdownBtn` to its own component

* fix selectors issue

* move `PostDropdownBtn` to its own component

* fix hitslop

* fix post dropdown hitslop

* fix android dropdown icons

* move `UserAvatar.tsx` to native dropdown

* use native dropdown in `ProfileHeader.tsx`

* use native dropdown in `PostThreadItem.tsx`

* use native dropdown in `UserBanner.tsx`

* use native dropdown in `CustomFeed.tsx`

* replace `testId` with `testID` (which is what is used everywhere)

* move `Settings.tsx` to use native dropdown

* create jest mocks for zeego

* create jest mock for `zeego/dropdown-menu`

* web styles for native dropdown

* remove example native dropdown

* adjust web styles

* fix propagation

* fix pressable in `Settings.tsx`

* animate dropdown on web

* add keyboard nav and hover styles

* add hitslop to constants

* add comments to NativeDropdown component

* temporarily removed android icons

* add testID to PostDropdownBtn

* add testID back to all NativeDropdown button implementations

* add postDropdownBtn testID

* add testID to dropdown items

* remove testID from dropdown menu item

* refactor home-screen tests for native dropdown

* refactor profile-screen tests for native dropdown

* refactor thread-muting tests for native dropdown

* refactor thread-screen tests for native dropdown

* fix dropdown color for post dropdown button

* remove icons from android dropdown menu

* fix `create-account.test.ts`

* fix `invite-codes.test.ts`

6 files changed, 18 insertions, 14 deletions

diff --git a/__e2e__/tests/create-account.test.ts b/__e2e__/tests/create-account.test.ts
index 7db4e912a..8706fae7c 100644
--- a/__e2e__/tests/create-account.test.ts
+++ b/__e2e__/tests/create-account.test.ts
@@ -25,6 +25,8 @@ describe('Create account', () => {
     await element(by.id('handleInput')).typeText('e2e-test')
     await device.takeScreenshot('4- entered handle')
     await element(by.id('nextBtn')).tap()
+    await expect(element(by.id('welcomeScreen'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
     await expect(element(by.id('homeScreen'))).toBeVisible()
   })
 })
diff --git a/__e2e__/tests/home-screen.test.ts b/__e2e__/tests/home-screen.test.ts
index 7fa9ff28c..d0eeb6703 100644
--- a/__e2e__/tests/home-screen.test.ts
+++ b/__e2e__/tests/home-screen.test.ts
@@ -55,7 +55,7 @@ describe('Home screen', () => {
     await element(by.id('postDropdownBtn').withAncestor(carlaPosts))
       .atIndex(0)
       .tap()
-    await element(by.id('postDropdownReportBtn')).tap()
+    await element(by.text('Report post')).tap()
     await expect(element(by.id('reportPostModal'))).toBeVisible()
     await element(
       by.id('reportPostRadios-com.atproto.moderation.defs#reasonSpam'),
@@ -84,7 +84,7 @@ describe('Home screen', () => {
     await element(by.id('postDropdownBtn').withAncestor(alicePosts))
       .atIndex(0)
       .tap()
-    await element(by.id('postDropdownDeleteBtn')).tap()
+    await element(by.text('Delete post')).tap()
     await expect(element(by.id('confirmModal'))).toBeVisible()
     await element(by.id('confirmBtn')).tap()
     await expect(
diff --git a/__e2e__/tests/invite-codes.test.ts b/__e2e__/tests/invite-codes.test.ts
index 846d3b768..74b80a8d0 100644
--- a/__e2e__/tests/invite-codes.test.ts
+++ b/__e2e__/tests/invite-codes.test.ts
@@ -42,6 +42,8 @@ describe('invite-codes', () => {
     await element(by.id('handleInput')).typeText('e2e-test')
     await device.takeScreenshot('4- entered handle')
     await element(by.id('nextBtn')).tap()
+    await expect(element(by.id('welcomeScreen'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
     await expect(element(by.id('homeScreen'))).toBeVisible()
     await element(by.id('viewHeaderDrawerBtn')).tap()
     await element(by.id('menuItemButton-Settings')).tap()
diff --git a/__e2e__/tests/profile-screen.test.ts b/__e2e__/tests/profile-screen.test.ts
index a7bb93656..6c6d6db9c 100644
--- a/__e2e__/tests/profile-screen.test.ts
+++ b/__e2e__/tests/profile-screen.test.ts
@@ -62,10 +62,10 @@ describe('Profile screen', () => {
     await element(by.id('profileHeaderEditProfileButton')).tap()
     await expect(element(by.id('editProfileModal'))).toBeVisible()
     await element(by.id('changeBannerBtn')).tap()
-    await element(by.id('changeBannerLibraryBtn')).tap()
+    await element(by.text('Library')).tap()
     await sleep(3e3)
     await element(by.id('changeAvatarBtn')).tap()
-    await element(by.id('changeAvatarLibraryBtn')).tap()
+    await element(by.text('Library')).tap()
     await sleep(3e3)
     await element(by.id('editProfileSaveBtn')).tap()
     await expect(element(by.id('editProfileModal'))).not.toBeVisible()
@@ -79,9 +79,9 @@ describe('Profile screen', () => {
     await element(by.id('profileHeaderEditProfileButton')).tap()
     await expect(element(by.id('editProfileModal'))).toBeVisible()
     await element(by.id('changeBannerBtn')).tap()
-    await element(by.id('changeBannerRemoveBtn')).tap()
+    await element(by.text('Remove')).tap()
     await element(by.id('changeAvatarBtn')).tap()
-    await element(by.id('changeAvatarRemoveBtn')).tap()
+    await element(by.text('Remove')).tap()
     await element(by.id('editProfileSaveBtn')).tap()
     await expect(element(by.id('editProfileModal'))).not.toBeVisible()
     await expect(element(by.id('userBannerFallback'))).toExist()
@@ -109,16 +109,16 @@ describe('Profile screen', () => {
   it('Can mute/unmute another user', async () => {
     await expect(element(by.id('profileHeaderMutedNotice'))).not.toExist()
     await element(by.id('profileHeaderDropdownBtn')).tap()
-    await element(by.id('profileHeaderDropdownMuteBtn')).tap()
+    await element(by.text('Mute Account')).tap()
     await expect(element(by.id('profileHeaderMutedNotice'))).toBeVisible()
     await element(by.id('profileHeaderDropdownBtn')).tap()
-    await element(by.id('profileHeaderDropdownMuteBtn')).tap()
+    await element(by.text('Unmute Account')).tap()
     await expect(element(by.id('profileHeaderMutedNotice'))).not.toExist()
   })
 
   it('Can report another user', async () => {
     await element(by.id('profileHeaderDropdownBtn')).tap()
-    await element(by.id('profileHeaderDropdownReportBtn')).tap()
+    await element(by.text('Report Account')).tap()
     await expect(element(by.id('reportAccountModal'))).toBeVisible()
     await element(
       by.id('reportAccountRadios-com.atproto.moderation.defs#reasonSpam'),
@@ -166,7 +166,7 @@ describe('Profile screen', () => {
   it('Can report posts', async () => {
     const posts = by.id('feedItem-by-bob.test')
     await element(by.id('postDropdownBtn').withAncestor(posts)).atIndex(0).tap()
-    await element(by.id('postDropdownReportBtn')).tap()
+    await element(by.text('Report post')).tap()
     await expect(element(by.id('reportPostModal'))).toBeVisible()
     await element(
       by.id('reportPostRadios-com.atproto.moderation.defs#reasonSpam'),
diff --git a/__e2e__/tests/thread-muting.test.ts b/__e2e__/tests/thread-muting.test.ts
index a5cefdb26..8acd9d81f 100644
--- a/__e2e__/tests/thread-muting.test.ts
+++ b/__e2e__/tests/thread-muting.test.ts
@@ -45,7 +45,7 @@ describe('Thread muting', () => {
     await element(by.id('postDropdownBtn').withAncestor(bobNotifs))
       .atIndex(0)
       .tap()
-    await element(by.id('postDropdownMuteThreadBtn')).tap()
+    await element(by.text('Mute thread')).tap()
     // have to wait for the toast to clear
     await waitFor(element(by.id('viewHeaderDrawerBtn')))
       .toBeVisible()
@@ -93,7 +93,7 @@ describe('Thread muting', () => {
     await element(by.id('postDropdownBtn').withAncestor(alicePosts))
       .atIndex(0)
       .tap()
-    await element(by.id('postDropdownMuteThreadBtn')).tap()
+    await element(by.text('Mute thread')).tap()
 
     // TODO
     // the swipe down to trigger PTR isnt working and I dont want to block on this
diff --git a/__e2e__/tests/thread-screen.test.ts b/__e2e__/tests/thread-screen.test.ts
index 8d3eacc88..081282a36 100644
--- a/__e2e__/tests/thread-screen.test.ts
+++ b/__e2e__/tests/thread-screen.test.ts
@@ -104,7 +104,7 @@ describe('Thread screen', () => {
   it('Can report the root post', async () => {
     const post = by.id('postThreadItem-by-bob.test')
     await element(by.id('postDropdownBtn').withAncestor(post)).atIndex(0).tap()
-    await element(by.id('postDropdownReportBtn')).tap()
+    await element(by.text('Report post')).tap()
     await expect(element(by.id('reportPostModal'))).toBeVisible()
     await element(
       by.id('reportPostRadios-com.atproto.moderation.defs#reasonSpam'),
@@ -116,7 +116,7 @@ describe('Thread screen', () => {
   it('Can report a reply post', async () => {
     const post = by.id('postThreadItem-by-carla.test')
     await element(by.id('postDropdownBtn').withAncestor(post)).atIndex(0).tap()
-    await element(by.id('postDropdownReportBtn')).tap()
+    await element(by.text('Report post')).tap()
     await expect(element(by.id('reportPostModal'))).toBeVisible()
     await element(
       by.id('reportPostRadios-com.atproto.moderation.defs#reasonSpam'),