@planningcenter/chat-react-native 3.14.0 → 3.15.0-rc.1

package/src/components/display/toggle_button.tsx

@@ -17,11 +17,20 @@ import { Icon, IconString } from './icon'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { Haptic } from '../../utils/native_adapters/configuration'
 
+// =================================
+// ====== Constants ================
+// =================================
+
+// We are omitting `onLongPress` because we are instead supporting `accessibilityShowsLargeContentViewer`.
+// This is triggered by an `onLongPress` event when an iOS device is in Apple's accessible font scale range.
+// Triggering this prop will display an almost full screen iOS a11y button.
+type RestrictedPressableProps = Omit<PressableProps, 'onLongPress'>
+
 // =================================
 // ====== Component ================
 // =================================
 
-export interface ToggleButtonProps extends PressableProps {
+export interface ToggleButtonProps extends RestrictedPressableProps {
   /**
    * Pressable container styles
    */
@@ -102,6 +111,8 @@ export function ToggleButton({
       accessibilityState={{ checked: active }}
       android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
       onPress={handlePress}
+      accessibilityShowsLargeContentViewer
+      accessibilityLargeContentTitle={title}
       {...props}
     >
       {iconNameLeft && (

package/src/hooks/index.ts

@@ -12,3 +12,5 @@ export * from './use_api'
 export * from './use_api_client'
 export * from './use_message_reaction_toggle'
 export * from './use_interaction_ghost_color'
+export * from './use_at_font_scale_breakpoint'
+export * from './use_scalable_number_of_lines'

package/src/hooks/use_at_font_scale_breakpoint.ts

@@ -0,0 +1,11 @@
+import { useFontScale } from './use_font_scale'
+
+// Based on iOS's AX1 font scale https://developer.apple.com/design/human-interface-guidelines/typography#iOS-iPadOS-larger-accessibility-type-sizes
+const FONT_SCALE_BREAKPOINT_FALLBACK = 1.78
+
+export const useAtFontScaleBreakpoint = (scaleBreakpoint?: number) => {
+  const fontScale = useFontScale()
+  const breakpoint = scaleBreakpoint ?? FONT_SCALE_BREAKPOINT_FALLBACK
+
+  return fontScale >= breakpoint
+}

package/src/hooks/use_scalable_number_of_lines.ts

@@ -0,0 +1,10 @@
+import { useAtFontScaleBreakpoint } from './use_at_font_scale_breakpoint'
+
+export const useScalableNumberOfLines = (numberOfLines?: number): number | undefined => {
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+
+  if (!numberOfLines) return undefined
+
+  const numberOfLinesDoubled = numberOfLines + 1
+  return atFontScaleBreakpoint ? numberOfLinesDoubled : numberOfLines
+}

package/src/screens/conversations/components/list_header_component.tsx

@@ -2,7 +2,7 @@ import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import React, { useCallback, useMemo } from 'react'
 import { Alert, ScrollView, StyleSheet, View } from 'react-native'
 import { Heading, TextButton, ToggleButton } from '../../../components'
-import { useCurrentPersonCache, useTheme } from '../../../hooks'
+import { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks'
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
 import { ConversationsScreenProps } from '../conversations_screen'
@@ -68,6 +68,8 @@ export const ListHeaderComponent = () => {
           onPress={alertMarkAllRead}
           disabled={isPending}
           maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          accessibilityShowsLargeContentViewer
+          accessibilityLargeContentTitle="Mark all read"
         >
           Mark all read
         </TextButton>
@@ -136,6 +138,8 @@ export const ListHeaderComponent = () => {
 
 const useStyles = () => {
   const theme = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+
   return StyleSheet.create({
     listHeader: {
       borderBottomWidth: 1,
@@ -144,9 +148,14 @@ const useStyles = () => {
       gap: 12,
     },
     titleRow: {
-      flexDirection: 'row',
+      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
       justifyContent: 'space-between',
+      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
+      flexWrap: 'wrap',
+      rowGap: 8,
+      columnGap: 16,
       paddingTop: 8,
+      paddingBottom: atFontScaleBreakpoint ? 4 : 0,
       paddingHorizontal: ROW_PADDING_HORIZONTAL,
     },
     filterRow: {

package/src/screens/conversations/conversations_screen.tsx

@@ -73,6 +73,8 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
             variant="tertiary"
             onPress={reportABug}
             maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            accessibilityShowsLargeContentViewer
+            accessibilityLargeContentTitle="Report a bug"
           >
             Report a bug
           </TextButton>

package/src/utils/styles.ts

@@ -2,7 +2,7 @@ import { Platform } from 'react-native'
 import { tokens } from '../vendor/tapestry/tokens'
 
 export const MAX_FONT_SIZE_MULTIPLIER = 1.5
-export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.3 // Use in headers, footers, toolbars, etc.
+export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers, toolbars, etc.
 
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created