@planningcenter/chat-react-native 3.15.0-rc.0 → 3.15.0-rc.10

package/src/polyfills/events/internals/EventTargetInternals.ts

@@ -0,0 +1,16 @@
+/**
+ * Internal implementation details for the `EventTarget` module.
+ */
+
+import type Event from '../Event'
+import type EventTarget from '../EventTarget'
+import { setIsTrusted } from './EventInternals'
+
+export const EVENT_TARGET_GET_THE_PARENT_KEY: unique symbol = Symbol('EventTarget[get the parent]')
+
+export const INTERNAL_DISPATCH_METHOD_KEY: unique symbol = Symbol('EventTarget[dispatch]')
+
+export function dispatchTrustedEvent(eventTarget: EventTarget, event: Event): void {
+  setIsTrusted(event, true)
+  return eventTarget[INTERNAL_DISPATCH_METHOD_KEY](event)
+}

package/src/polyfills/webidl/PlatformObjects.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const IS_PLATFORM_OBJECT_KEY = Symbol('isPlatformObject')
+const CLONE_PLATFORM_OBJECT_KEY = Symbol('clonePlatformObject')
+
+type CloneFn<T extends object> = (value: T) => T
+
+/**
+ * Marks the given object or instances of the given class as platform objects.
+ *
+ * Optionally, it sets the clone function for that platform object, which is a
+ * simplification of the serializable attribute of the Web interface.
+ */
+export function setPlatformObject<T extends object>(
+  obj: { prototype: unknown },
+  options?: { clone: CloneFn<T> }
+): void
+export function setPlatformObject<T extends object>(obj: T, options?: { clone: CloneFn<T> }): void
+export function setPlatformObject(obj: any, options?: { clone: (value: any) => any }): void {
+  if (typeof obj === 'function') {
+    ;(obj.prototype as any)[IS_PLATFORM_OBJECT_KEY] = true
+    if (options) {
+      ;(obj.prototype as any)[CLONE_PLATFORM_OBJECT_KEY] = options.clone
+    }
+  } else {
+    ;(obj as any)[IS_PLATFORM_OBJECT_KEY] = true
+    if (options) {
+      ;(obj as any)[CLONE_PLATFORM_OBJECT_KEY] = options.clone
+    }
+  }
+}
+
+/**
+ * Indicates if the given object is a platform object.
+ */
+export function isPlatformObject<T extends object>(obj: T): boolean {
+  return IS_PLATFORM_OBJECT_KEY in (obj as any)
+}
+
+/**
+ * Returns the clone function for the given platform object, if it was set.
+ */
+export function getPlatformObjectClone<T extends object>(obj: T): ((value: T) => T) | undefined {
+  return (obj as any)[CLONE_PLATFORM_OBJECT_KEY]
+}

package/src/screens/bug_report_screen.tsx

@@ -1,5 +1,13 @@
 import React, { useCallback, useLayoutEffect, useState } from 'react'
-import { View, StyleSheet, TextInput, Linking, ScrollView, TouchableOpacity } from 'react-native'
+import {
+  View,
+  StyleSheet,
+  TextInput,
+  Linking,
+  ScrollView,
+  TouchableOpacity,
+  Platform,
+} from 'react-native'
 import type {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
@@ -27,19 +35,23 @@ import { DefaultLoading } from '../components/page/loading'
 import { startsWith } from 'lodash'
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 import { SafeAreaModal } from '../components/safe_area_modal'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useAppName } from '../hooks/use_app_name'
 
 const MAX_DESCRIPTION_LENGTH = 2000
 
-const BUG_TYPE_OPTIONS = [
-  'Issues sending or receiving messages',
-  'Trouble starting a new conversation',
-  "Notifications aren't working",
-  'Incorrect read receipts or unread counts',
-  'Problems with file attachments',
-  "Something isn't displaying properly",
-  'App is slow or crashes',
-  'Other',
-]
+enum BUG_TYPE_OPTIONS {
+  Chat = 'Chat',
+  FindMyChurch = 'Find my church',
+  LoggingIn = 'Logging in',
+  UsingGroups = 'Using groups (events, resources, members)',
+  CheckingIn = 'Checking in',
+  MakingADonation = 'Making a donation',
+  RegisteringForAnEvent = 'Registering for an event',
+  MyProfileAndSchedule = 'My profile and schedule',
+  Directory = 'Directory',
+  Other = 'Other',
+}
 
 export const BugReportScreenOptions = ({
   navigation,
@@ -55,57 +67,49 @@ interface Attachment {
   type: string
 }
 
+enum QualifiedMobileAppName {
+  chat = 'Chat', // There is no app name for the mobile app
+  churchcenter = 'Church Center App',
+  services = 'Services Mobile',
+}
+
 export function BugReportScreen() {
   const styles = useStyles()
   const navigation = useNavigation()
-  const [bugType, setBugType] = useState('')
+  const name = useAppName()
+  const appName = QualifiedMobileAppName[name]
+  const [bugType, setBugType] = useState<BUG_TYPE_OPTIONS>(BUG_TYPE_OPTIONS.Chat)
   const [showBugTypePicker, setShowBugTypePicker] = useState(false)
   const [whatWereDoing, setWhatWereDoing] = useState('')
   const [whatExpected, setWhatExpected] = useState('')
-  const [stepsToResolve, setStepsToResolve] = useState('')
   const uploadApi = useUploadClient()
   const [uploading, setUploading] = useState(false)
   const [attachment, setAttachment] = useState<Attachment | null>(null)
   const [uploadError, setUploadError] = useState<string | null>(null)
-  const mutation = useReportBugAction()
-  const { mutate, status } = mutation
+  const { mutate: createBugReport, status } = useReportBugAction()
   const formValid =
     bugType.trim().length > 0 &&
     whatWereDoing.trim().length > 0 &&
     whatExpected.trim().length > 0 &&
-    stepsToResolve.trim().length > 0 &&
     status === 'idle' &&
     !uploading
   const [imagePreviewURI, setImagePreviewURI] = useState<string>('')
-
   const isImageAttachment = startsWith(attachment?.type, 'image/')
 
   const handleSubmit = useCallback(() => {
-    const description = `${whatWereDoing.substring(0, 100)}
-
-## What kind of bug did you experience?
-${bugType}
-
-## What were you trying to do when you encountered the bug?
-${whatWereDoing}
-
-## What did you expect to happen? What actually happened?
-${whatExpected}
+    const description = generateBugReportDescription(bugType, whatWereDoing, whatExpected)
 
-## What steps have you tried to resolve the issue?
-${stepsToResolve}`
-
-    mutate({
+    createBugReport({
       description,
-      description_json: JSON.stringify({
+      description_json: {
         bugType,
         whatWereDoing,
         whatExpected,
-        stepsToResolve,
-      }),
+        appName: appName,
+      },
       attachmentIds: attachment ? [attachment.id] : [],
     })
-  }, [attachment, bugType, whatWereDoing, whatExpected, stepsToResolve, mutate])
+  }, [attachment, bugType, whatWereDoing, whatExpected, createBugReport, appName])
 
   const handleRemoveAttachment = useCallback(() => {
     setAttachment(null)
@@ -215,12 +219,10 @@ ${stepsToResolve}`
 
         <View style={styles.textInputContainer}>
           <Text style={styles.fieldLabel}>
-            What kind of bug did you experience? <Text style={styles.required}>*</Text>
+            Where did you experience the issue? <Text style={styles.required}>*</Text>
           </Text>
           <TouchableOpacity style={styles.pickerButton} onPress={() => setShowBugTypePicker(true)}>
-            <Text style={[styles.pickerText, !bugType && styles.pickerPlaceholder]}>
-              {bugType || 'Select the bug type'}
-            </Text>
+            <Text style={[styles.pickerText, !bugType && styles.pickerPlaceholder]}>{bugType}</Text>
             <Icon
               name="general.downChevron"
               style={styles.pickerArrow}
@@ -242,7 +244,7 @@ ${stepsToResolve}`
               <View style={styles.modalHeaderSpacer} />
             </View>
             <ScrollView style={styles.modalContent}>
-              {BUG_TYPE_OPTIONS.map(option => (
+              {Object.values(BUG_TYPE_OPTIONS).map(option => (
                 <TouchableOpacity
                   key={option}
                   style={styles.modalOption}
@@ -287,7 +289,7 @@ ${stepsToResolve}`
 
         <View style={styles.textInputContainer}>
           <Text style={styles.fieldLabel}>
-            What did you expect to happen? What actually happened?{' '}
+            What did you expect to happen? Please describe what actually happened.{' '}
             <Text style={styles.required}>*</Text>
           </Text>
           <TextInput
@@ -305,25 +307,6 @@ ${stepsToResolve}`
           )}
         </View>
 
-        <View style={styles.textInputContainer}>
-          <Text style={styles.fieldLabel}>
-            What steps have you tried to resolve the issue? <Text style={styles.required}>*</Text>
-          </Text>
-          <TextInput
-            style={styles.textInput}
-            multiline
-            placeholder="Description"
-            value={stepsToResolve}
-            onChangeText={setStepsToResolve}
-            maxLength={MAX_DESCRIPTION_LENGTH}
-          />
-          {stepsToResolve.length >= MAX_DESCRIPTION_LENGTH - 100 && (
-            <Text variant="footnote">
-              {stepsToResolve.length}/{MAX_DESCRIPTION_LENGTH}
-            </Text>
-          )}
-        </View>
-
         <View style={styles.attachmentSection}>
           <View style={styles.attachmentHeader}>
             <Text style={styles.attachmentLabel}>
@@ -349,7 +332,7 @@ ${stepsToResolve}`
             </View>
           ) : (
             <Button
-              title="Attach a screenshot"
+              title="Attach a screenshot or recording"
               accessibilityHint="Opens your device's image gallery"
               iconNameLeft="general.paperclip"
               onPress={pickImage}
@@ -359,14 +342,19 @@ ${stepsToResolve}`
               disabled={uploading || Boolean(attachment)}
             />
           )}
-        </View>
-
-        <View style={styles.footer}>
           <Text variant="footnote">
-            We can’t respond to every submission, but we may reach out if we have additional
-            questions.
+            Screenshots and screen recordings help us reproduce and fix issues faster.{' '}
+            <TextInlineButton
+              accessibilityRole="link"
+              variant="footnote"
+              onPress={() => Linking.openURL(VIDEO_RECORDING_HELP_URL)}
+            >
+              How to record your screen
+            </TextInlineButton>
           </Text>
+        </View>
 
+        <View style={styles.footer}>
           <Text variant="footnote">
             For details on how we process your data and ensure its security, please refer to our{' '}
             <TextInlineButton
@@ -384,12 +372,36 @@ ${stepsToResolve}`
   )
 }
 
+const VIDEO_RECORDING_HELP_URL = Platform.select({
+  android: 'https://support.google.com/android/answer/6241341?hl=en',
+  default: 'https://support.apple.com/en-us/HT208721',
+})
+
+const generateBugReportDescription = (
+  bugType: BUG_TYPE_OPTIONS,
+  whatWereDoing: string,
+  whatExpected: string
+) => {
+  return `${whatWereDoing.substring(0, 100)}
+
+  ## What kind of bug did you experience?
+${bugType}
+
+## What were you trying to do when you encountered the bug?
+${whatWereDoing}
+
+## What did you expect to happen? What actually happened?
+${whatExpected}
+`
+}
+
 const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
   const { colors } = useTheme()
   return StyleSheet.create({
     container: {
       padding: 16,
-      paddingBottom: 16,
+      paddingBottom: 16 + bottom,
       gap: 24,
     },
     fullHeight: {

package/src/screens/conversation_filters/components/conversation_filters.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useMemo } from 'react'
 import { StyleSheet, View, ViewStyle } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 import { Heading } from '../../../components'
-import { useTheme } from '../../../hooks'
+import { useAtFontScaleBreakpoint, useTheme } from '../../../hooks'
 import { FilterContext, useFilterContext } from '../context/conversation_filter_context'
 import { FilterTypes } from '../filter_types'
 import { useGroupsToFilter, useTeamsToFilter } from '../hooks/filters'
@@ -119,7 +119,7 @@ export const ConversationFilters = () => {
     },
     {
       type: groupItems.length ? SectionTypes.header : SectionTypes.hidden,
-      data: { title: 'Groups' },
+      data: { title: 'Groups', style: styles.extraHeaderScalableSpace },
     },
     ...groupItemData,
     {
@@ -128,7 +128,7 @@ export const ConversationFilters = () => {
     },
     {
       type: teamItems.length ? SectionTypes.header : SectionTypes.hidden,
-      data: { title: 'Teams' },
+      data: { title: 'Teams', style: styles.extraHeaderScalableSpace },
     },
     ...teamItemData,
     {
@@ -166,12 +166,12 @@ export const ConversationFilters = () => {
 const useStyles = () => {
   const { platformListPaddingBottom } = useFilterContext()
   const theme = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
 
   return StyleSheet.create({
     flatlistContainer: {
       paddingBottom: platformListPaddingBottom,
     },
-    section: {},
     sectionHeader: {
       flexDirection: 'row',
       justifyContent: 'space-between',
@@ -179,7 +179,9 @@ const useStyles = () => {
       paddingBottom: 8,
       paddingHorizontal: 16,
     },
-    selectTeamsButton: {},
+    extraHeaderScalableSpace: {
+      marginTop: atFontScaleBreakpoint ? 24 : 0,
+    },
     filterBar: {
       backgroundColor: theme.colors.fillColorNeutral100Inverted,
       flexDirection: 'row',
@@ -203,13 +205,14 @@ const useStyles = () => {
 
 type HeaderProps = {
   title: string
+  style?: ViewStyle
 }
 
-const Header = ({ title }: HeaderProps) => {
+const Header = ({ title, style = {} }: HeaderProps) => {
   const styles = useStyles()
 
   return (
-    <View style={styles.sectionHeader}>
+    <View style={[styles.sectionHeader, style]}>
       <Heading variant="h3">{title}</Heading>
     </View>
   )

package/src/screens/conversation_filters/components/rows.tsx

@@ -3,33 +3,28 @@ import { NavigationProp, useNavigation } from '@react-navigation/native'
 import React, { PropsWithChildren, useContext } from 'react'
 import { StyleSheet, View, ViewStyle } from 'react-native'
 import { Heading, Icon, Image, Text, TextButton } from '../../../components'
-import { useTheme } from '../../../hooks'
+import {
+  useAtFontScaleBreakpoint,
+  useFontScale,
+  useScalableNumberOfLines,
+  useTheme,
+} from '../../../hooks'
 import { useServicesTeamsMap } from '../../../hooks/services/use_services_team'
 import { GroupResource } from '../../../types/resources/group_resource'
 import { FilterContext } from '../context/conversation_filter_context'
 import { FilterTypes } from '../filter_types'
 import { FilteredGroup } from '../hooks/filters'
 import { ConversationFilterStackParamList } from '../screen_props'
+import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightBold } from '../../../utils/styles'
 
 export type FilterProps = { group_source_app_name?: string; isActive: boolean; filter: FilterTypes }
 
 export const FilterRow = ({ group_source_app_name, isActive, filter }: FilterProps) => {
-  const styles = useRowStyles({ isActive })
   const { setAppFilter } = useContext(FilterContext)
 
   return (
-    <PressableRow
-      style={styles.row}
-      onPress={() => setAppFilter({ group_source_app_name })}
-      isActive={isActive}
-    >
+    <PressableRow onPress={() => setAppFilter({ group_source_app_name })} isActive={isActive}>
       <Text>{filter}</Text>
-      <Icon
-        name="general.check"
-        size={16}
-        style={styles.rowIconRight}
-        accessibilityElementsHidden
-      />
     </PressableRow>
   )
 }
@@ -40,7 +35,7 @@ export type GroupRowProps = {
 }
 
 export const GroupRow = ({ group, isActive }: GroupRowProps) => {
-  const styles = useRowStyles({ isActive })
+  const styles = useRowStyles()
   const { setGroupFilter } = useContext(FilterContext)
 
   const handleFilterByGroup = () => {
@@ -50,27 +45,23 @@ export const GroupRow = ({ group, isActive }: GroupRowProps) => {
   const { headerImage, membershipsCount } = group
 
   return (
-    <PressableRow style={styles.row} onPress={handleFilterByGroup} isActive={isActive}>
+    <PressableRow onPress={handleFilterByGroup} isActive={isActive}>
       {headerImage?.thumbnail && (
         <Image
           source={{ uri: headerImage?.thumbnail }}
           resizeMode="cover"
           style={styles.rowImage}
-          alt={`Image for ${group.name}`}
+          alt=""
         />
       )}
-      <View style={styles.rowContent}>
+      <View style={styles.rowTextContainer}>
         <Heading variant="h3" style={styles.rowTitle}>
           {group.name}
         </Heading>
-        {membershipsCount && <Text>{group.membershipsCount} members</Text>}
+        {membershipsCount && (
+          <Text style={styles.rowSubtitle}>{group.membershipsCount} members</Text>
+        )}
       </View>
-      <Icon
-        name="general.check"
-        size={16}
-        style={styles.rowIconRight}
-        accessibilityElementsHidden
-      />
     </PressableRow>
   )
 }
@@ -86,7 +77,8 @@ export const TeamRow = ({ team }: TeamRowProps) => {
   const { params } = useContext(FilterContext)
   const { chat_group_graph_id } = params
   const isActive = chat_group_graph_id === team.id.toString()
-  const styles = useRowStyles({ isActive })
+  const styles = useRowStyles()
+  const scalableNumberOfLines = useScalableNumberOfLines()
 
   const handleFilterByGroup = () => {
     setGroupFilter({ chat_group_graph_id: team.id })
@@ -97,19 +89,15 @@ export const TeamRow = ({ team }: TeamRowProps) => {
   const serviceTypeName = concatedServiceTypeNames || servicesTeam?.group
 
   return (
-    <PressableRow style={styles.row} onPress={handleFilterByGroup} isActive={isActive}>
-      <View style={styles.rowContent}>
+    <PressableRow onPress={handleFilterByGroup} isActive={isActive}>
+      <View style={styles.rowTextContainer}>
         <Heading variant="h3" style={styles.rowTitle}>
           {team.name}
         </Heading>
-        <Text numberOfLines={1}>{serviceTypeName}</Text>
+        <Text numberOfLines={scalableNumberOfLines} style={styles.rowSubtitle}>
+          {serviceTypeName}
+        </Text>
       </View>
-      <Icon
-        name="general.check"
-        size={16}
-        style={styles.rowIconRight}
-        accessibilityElementsHidden
-      />
     </PressableRow>
   )
 }
@@ -121,7 +109,7 @@ export const ViewMore = ({ routeName }: ViewMoreRowProps) => {
   const navigation = useNavigation<NavigationProp<ConversationFilterStackParamList, 'Filters'>>()
 
   return (
-    <View style={[styles.borderLessRow]}>
+    <View style={[styles.rowWithoutBorder]}>
       <TextButton onPress={() => navigation.navigate(routeName, {})} style={styles.viewMoreButton}>
         View more
       </TextButton>
@@ -135,15 +123,23 @@ export const PressableRow = ({
   onPress,
   style,
 }: PropsWithChildren<{ isActive: boolean; onPress: () => void; style?: ViewStyle }>) => {
-  const styles = useRowStyles()
+  const styles = useRowStyles({ isActive })
   return (
     <PlatformPressable
-      style={styles.container}
+      style={styles.pressable}
       onPress={onPress}
       accessibilityRole="radio"
       accessibilityState={{ selected: isActive }}
     >
-      <View style={[styles.innerContainer, style]}>{children}</View>
+      <View style={styles.row}>
+        <View style={[styles.rowInner, style]}>{children}</View>
+        <Icon
+          name="general.check"
+          style={styles.rowIconRight}
+          accessibilityElementsHidden
+          maxFontSizeMultiplier={2.5}
+        />
+      </View>
     </PlatformPressable>
   )
 }
@@ -154,20 +150,35 @@ const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
 
 const useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {
   const theme = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+
   return StyleSheet.create({
-    container: {
+    pressable: {
       paddingLeft: 16,
     },
-    innerContainer: {
+    row: {
       flexDirection: 'row',
       alignItems: 'center',
+      justifyContent: 'space-between',
       gap: 12,
       borderBottomWidth: 1,
-      borderBottomColor: theme.colors.fillColorNeutral050Base,
+      borderBottomColor: atFontScaleBreakpoint
+        ? theme.colors.borderColorDefaultDark
+        : theme.colors.borderColorDefaultBase,
       paddingVertical: 12,
       paddingRight: 16,
     },
-    borderLessRow: {
+    rowInner: {
+      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
+      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
+      gap: 12,
+      flexShrink: 1,
+    },
+    rowTextContainer: {
+      flexShrink: 1,
+    },
+    rowWithoutBorder: {
       flexDirection: 'row',
       alignItems: 'center',
       gap: 12,
@@ -178,23 +189,25 @@ const useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {
     viewMoreButton: {
       flex: 1,
     },
-    row: {},
     rowImage: {
-      width: THUMBNAIL_WIDTH,
-      height: THUMBNAIL_HEIGHT,
-      borderRadius: 4,
-    },
-    rowContent: {
-      flexShrink: 1,
+      width: THUMBNAIL_WIDTH * fontScale,
+      height: THUMBNAIL_HEIGHT * fontScale,
+      borderRadius: 4 * fontScale,
     },
     rowIconRight: {
-      marginLeft: 'auto',
+      fontSize: 16,
       color: theme.colors.statusSuccessIcon,
       opacity: isActive ? 1 : 0,
     },
     rowTitle: {
       fontSize: 16,
       flexShrink: 1,
+      fontWeight: atFontScaleBreakpoint ? 400 : platformFontWeightBold,
+    },
+    rowSubtitle: {
+      color: atFontScaleBreakpoint
+        ? theme.colors.textColorDefaultSecondary
+        : theme.colors.textColorDefaultPrimary,
     },
   })
 }

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

@@ -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>
@@ -153,7 +155,7 @@ const useStyles = () => {
       rowGap: 8,
       columnGap: 16,
       paddingTop: 8,
-      paddingBottom: atFontScaleBreakpoint ? 8 : 0,
+      paddingBottom: atFontScaleBreakpoint ? 4 : 0,
       paddingHorizontal: ROW_PADDING_HORIZONTAL,
     },
     filterRow: {

package/src/screens/conversations/conversations_screen.tsx

@@ -1,5 +1,5 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import React from 'react'
+import React, { useCallback } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Conversations, TextButton } from '../../components'
 import { ActionButton } from '../../components/display/action_button'
@@ -54,9 +54,9 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
     })
   }
 
-  const reportABug = () => {
-    return navigation.navigate('BugReport')
-  }
+  const handleGetHelp = useCallback(() => {
+    navigation.navigate('GetHelp')
+  }, [navigation])
 
   return (
     <View style={styles.container}>
@@ -71,10 +71,12 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
         secondaryButton={
           <TextButton
             variant="tertiary"
-            onPress={reportABug}
+            onPress={handleGetHelp}
             maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            accessibilityShowsLargeContentViewer
+            accessibilityLargeContentTitle="Get help"
           >
-            Report a bug
+            Get help
           </TextButton>
         }
       />

package/src/screens/design_system_screen.tsx

@@ -863,7 +863,7 @@ function ImageIconsSection({ isLast }: SectionProps) {
         description="Displays any icon from @planningcenter/icons. Missing icons will fallback to a grey circle. Styling with `fontSize` will allow it to scale with the device's text a11y size."
       >
         <Row>
-          {/* @ts-expect-error - Icon name is not a string */}
+          {/* @ts-expect-error - Testing missing icon fallback */}
           <Icon name="missingIcon" size={20} />
           <Icon name="general.textMessage" size={20} />
           <Icon name="general.bell" size={20} color={colors.needsDesignPass} />