[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`
This commit is contained in:
parent
eec300d772
commit
3b8b562268
30 changed files with 1093 additions and 342 deletions
|
@ -10,11 +10,9 @@ import {useStores} from 'state/index'
|
|||
import {isDesktopWeb} from 'platform/detection'
|
||||
import {openCamera} from 'lib/media/picker'
|
||||
import {useCameraPermission} from 'lib/hooks/usePermissions'
|
||||
import {POST_IMG_MAX} from 'lib/constants'
|
||||
import {HITSLOP_10, POST_IMG_MAX} from 'lib/constants'
|
||||
import {GalleryModel} from 'state/models/media/gallery'
|
||||
|
||||
const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
|
||||
|
||||
type Props = {
|
||||
gallery: GalleryModel
|
||||
}
|
||||
|
@ -54,7 +52,7 @@ export function OpenCameraBtn({gallery}: Props) {
|
|||
testID="openCameraButton"
|
||||
onPress={onPressTakePicture}
|
||||
style={styles.button}
|
||||
hitSlop={HITSLOP}
|
||||
hitSlop={HITSLOP_10}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Camera"
|
||||
accessibilityHint="Opens camera on device">
|
||||
|
|
|
@ -9,8 +9,7 @@ import {useAnalytics} from 'lib/analytics/analytics'
|
|||
import {isDesktopWeb} from 'platform/detection'
|
||||
import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions'
|
||||
import {GalleryModel} from 'state/models/media/gallery'
|
||||
|
||||
const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
|
||||
import {HITSLOP_10} from 'lib/constants'
|
||||
|
||||
type Props = {
|
||||
gallery: GalleryModel
|
||||
|
@ -36,7 +35,7 @@ export function SelectPhotoBtn({gallery}: Props) {
|
|||
testID="openGalleryBtn"
|
||||
onPress={onPressSelectPhotos}
|
||||
style={styles.button}
|
||||
hitSlop={HITSLOP}
|
||||
hitSlop={HITSLOP_10}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Gallery"
|
||||
accessibilityHint="Opens device photo gallery">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue