[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
				
			
		| 
						 | 
				
			
			@ -5,8 +5,7 @@ import {Text} from '../text/Text'
 | 
			
		|||
import {usePalette} from 'lib/hooks/usePalette'
 | 
			
		||||
import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
 | 
			
		||||
import {isMobileWeb} from 'platform/detection'
 | 
			
		||||
 | 
			
		||||
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
 | 
			
		||||
import {HITSLOP_20} from 'lib/constants'
 | 
			
		||||
 | 
			
		||||
export const LoadLatestBtn = ({
 | 
			
		||||
  onPress,
 | 
			
		||||
| 
						 | 
				
			
			@ -40,7 +39,7 @@ export const LoadLatestBtn = ({
 | 
			
		|||
            minimalShellMode && styles.loadLatestCenteredMinimal,
 | 
			
		||||
          ]}
 | 
			
		||||
          onPress={onPress}
 | 
			
		||||
          hitSlop={HITSLOP}
 | 
			
		||||
          hitSlop={HITSLOP_20}
 | 
			
		||||
          accessibilityRole="button"
 | 
			
		||||
          accessibilityLabel={label}
 | 
			
		||||
          accessibilityHint="">
 | 
			
		||||
| 
						 | 
				
			
			@ -52,7 +51,7 @@ export const LoadLatestBtn = ({
 | 
			
		|||
      <TouchableOpacity
 | 
			
		||||
        style={[pal.view, pal.borderDark, styles.loadLatest]}
 | 
			
		||||
        onPress={onPress}
 | 
			
		||||
        hitSlop={HITSLOP}
 | 
			
		||||
        hitSlop={HITSLOP_20}
 | 
			
		||||
        accessibilityRole="button"
 | 
			
		||||
        accessibilityLabel={label}
 | 
			
		||||
        accessibilityHint="">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -7,8 +7,7 @@ import {clamp} from 'lodash'
 | 
			
		|||
import {useStores} from 'state/index'
 | 
			
		||||
import {usePalette} from 'lib/hooks/usePalette'
 | 
			
		||||
import {colors} from 'lib/styles'
 | 
			
		||||
 | 
			
		||||
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
 | 
			
		||||
import {HITSLOP_20} from 'lib/constants'
 | 
			
		||||
 | 
			
		||||
export const LoadLatestBtn = observer(
 | 
			
		||||
  ({
 | 
			
		||||
| 
						 | 
				
			
			@ -35,7 +34,7 @@ export const LoadLatestBtn = observer(
 | 
			
		|||
          },
 | 
			
		||||
        ]}
 | 
			
		||||
        onPress={onPress}
 | 
			
		||||
        hitSlop={HITSLOP}
 | 
			
		||||
        hitSlop={HITSLOP_20}
 | 
			
		||||
        accessibilityRole="button"
 | 
			
		||||
        accessibilityLabel={label}
 | 
			
		||||
        accessibilityHint="">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue