Added accessibilityRole header to visual headings for screen readers

src/components/CollapsibleSection/index.tsx

@@ -50,12 +50,14 @@ function CollapsibleSection({title, children, titleStyle, textStyle, wrapperStyl
                 style={[styles.pb4, styles.flexRow]}
                 role={CONST.ROLE.BUTTON}
                 accessibilityLabel={title}
+                sentryLabel="CollapsibleSection-Toggle"
                 hoverDimmingValue={1}
                 pressDimmingValue={0.2}
             >
                 <Text
                     style={textStyle ?? [styles.flex1, styles.textStrong, styles.userSelectNone, titleStyle]}
                     dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+                    accessibilityRole="header"
                 >
                     {title}
                 </Text>

src/components/EmptyStateComponent/index.tsx

@@ -100,7 +100,12 @@ function EmptyStateComponent({
                 <View style={[styles.emptyStateContent, cardStyles]}>
                     <View style={[styles.emptyStateHeader, styles.emptyStateHeaderPosition(headerMediaType === CONST.EMPTY_STATE_MEDIA.ILLUSTRATION), headerStyles]}>{HeaderComponent}</View>
                     <View style={[shouldUseNarrowLayout ? styles.p5 : styles.p8, cardContentStyles]}>
-                        <Text style={[styles.textAlignCenter, styles.textHeadlineH1, styles.mb2, titleStyles]}>{title}</Text>
+                        <Text
+                            style={[styles.textAlignCenter, styles.textHeadlineH1, styles.mb2, titleStyles]}
+                            accessibilityRole="header"
+                        >
+                            {title}
+                        </Text>
                         {subtitleText ??
                             (doesSubtitleContainCustomEmojiAndMore ? (
                                 <TextWithEmojiFragment

src/components/Header.tsx

@@ -77,6 +77,7 @@ function Header({title = '', subtitle = '', textStyles = [], style, containerSty
                           <Text
                               numberOfLines={numberOfTitleLines}
                               style={[styles.headerText, styles.textLarge, styles.lineHeightXLarge, textStyles]}
+                              accessibilityRole="header"
                           >
                               {title}
                           </Text>

src/components/Section/index.tsx

@@ -186,7 +186,16 @@ function Section({
                         />
                     )}
                     <View style={[styles.flexShrink1, styles.w100]}>
-                        {renderTitle ? renderTitle() : !!title && <Text style={[styles.textHeadline, styles.cardSectionTitle, titleStyles]}>{title}</Text>}
+                        {renderTitle
+                            ? renderTitle()
+                            : !!title && (
+                                  <Text
+                                      style={[styles.textHeadline, styles.cardSectionTitle, titleStyles]}
+                                      accessibilityRole="header"
+                                  >
+                                      {title}
+                                  </Text>
+                              )}
                     </View>
                     {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
                         <IconSection

src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

@@ -604,7 +604,12 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
             // we need to know the heights of all list items up-front in order to synchronously compute the layout of any given list item.
             // So be aware that if you adjust the content of the section header (for example, change the font size), you may need to adjust this explicit height as well.
             <View style={[styles.optionsListSectionHeader, styles.justifyContentCenter, sectionTitleStyles]}>
-                <Text style={[styles.ph5, styles.textLabelSupporting]}>{section.title}</Text>
+                <Text
+                    style={[styles.ph5, styles.textLabelSupporting]}
+                    accessibilityRole="header"
+                >
+                    {section.title}
+                </Text>
             </View>
         );
     };
@@ -627,6 +632,7 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
                                 style={[styles.userSelectNone, styles.flexRow, styles.alignItemsCenter]}
                                 onPress={selectAllRow}
                                 accessibilityLabel={translate('workspace.people.selectAll')}
+                                sentryLabel="SelectionList-SelectAll"
                                 role="button"
                                 accessibilityState={{checked: flattenedSections.allSelected}}
                                 disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}

src/components/WorkspaceEmptyStateSection.tsx

@@ -50,7 +50,12 @@ function WorkspaceEmptyStateSection({icon, subtitle, title, containerStyle, shou
 
             <View style={[styles.w100, styles.pt5]}>
                 <View style={[styles.flexRow, styles.justifyContentCenter, styles.w100, styles.mh1, styles.flexShrink1]}>
-                    <Text style={[styles.textHeadline, styles.emptyCardSectionTitle]}>{title}</Text>
+                    <Text
+                        style={[styles.textHeadline, styles.emptyCardSectionTitle]}
+                        accessibilityRole="header"
+                    >
+                        {title}
+                    </Text>
                 </View>
 
                 {(!!subtitle || !!subtitleComponent) && (

src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

@@ -199,6 +199,7 @@ function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboarding
                 key={item.keyForList ?? ''}
                 onPress={() => handleIntegrationSelect(item.keyForList)}
                 accessibilityLabel={item.text}
+                sentryLabel="OnboardingAccounting-SelectIntegration"
                 accessible={false}
                 hoverStyle={!item.isSelected ? styles.hoveredComponentBG : undefined}
                 style={[styles.onboardingAccountingItem, isSmallScreenWidth && styles.flexBasis100, item.isSelected && styles.activeComponentBG]}
@@ -246,7 +247,12 @@ function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboarding
                 shouldDisplayHelpButton={false}
             />
             <View style={[onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}>
-                <Text style={[styles.textHeadlineH1, styles.mb5]}>{translate('onboarding.accounting.title')}</Text>
+                <Text
+                    style={[styles.textHeadlineH1, styles.mb5]}
+                    accessibilityRole="header"
+                >
+                    {translate('onboarding.accounting.title')}
+                </Text>
             </View>
             <ScrollView style={[onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5, styles.pt3, styles.pb8]}>
                 <View style={[styles.flexRow, styles.flexWrap, styles.gap3, styles.mb3]}>{accountingOptions.map(renderOption)}</View>

src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx

@@ -85,7 +85,10 @@ function BaseOnboardingEmployees({shouldUseNativeStyles, route}: BaseOnboardingE
                 }}
                 shouldDisplayHelpButton={false}
             />
-            <Text style={[styles.textHeadlineH1, styles.mb5, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}>
+            <Text
+                style={[styles.textHeadlineH1, styles.mb5, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}
+                accessibilityRole="header"
+            >
                 {translate('onboarding.employees.title')}
             </Text>
             <SelectionList

src/pages/OnboardingInterestedFeatures/BaseOnboardingInterestedFeatures.tsx

@@ -306,6 +306,7 @@ function BaseOnboardingInterestedFeatures({shouldUseNativeStyles}: BaseOnboardin
                         handleFeatureSelect(item.id);
                     }}
                     accessibilityLabel={item.title}
+                    sentryLabel="OnboardingInterestedFeatures-ToggleFeature"
                     accessible={false}
                     hoverStyle={!isSelected ? styles.hoveredComponentBG : undefined}
                     style={[styles.onboardingInterestedFeaturesItem, isSmallScreenWidth ? styles.flexBasis100 : {maxWidth: (width - gap) / 2}, isSelected && styles.activeComponentBG]}
@@ -359,7 +360,12 @@ function BaseOnboardingInterestedFeatures({shouldUseNativeStyles}: BaseOnboardin
                 shouldDisplayHelpButton={false}
             />
             <View style={[onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}>
-                <Text style={[styles.textHeadlineH1, styles.mb5]}>{translate('onboarding.interestedFeatures.title')}</Text>
+                <Text
+                    style={[styles.textHeadlineH1, styles.mb5]}
+                    accessibilityRole="header"
+                >
+                    {translate('onboarding.interestedFeatures.title')}
+                </Text>
             </View>
 
             <ScrollView

src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx

@@ -196,7 +196,12 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
                 shouldTrimValues={false}
             >
                 <View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb5]}>
-                    <Text style={styles.textHeadlineH1}>{translate('onboarding.whatsYourName')}</Text>
+                    <Text
+                        style={styles.textHeadlineH1}
+                        accessibilityRole="header"
+                    >
+                        {translate('onboarding.whatsYourName')}
+                    </Text>
                 </View>
                 <View style={styles.mb4}>
                     <InputWrapper

src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx

@@ -93,7 +93,12 @@ function BaseOnboardingPrivateDomain({shouldUseNativeStyles, route}: BaseOnboard
                 keyboardShouldPersistTaps="handled"
             >
                 <View style={[styles.mb5, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5, styles.flex1]}>
-                    <Text style={styles.textHeadlineH1}>{translate('onboarding.peopleYouMayKnow')}</Text>
+                    <Text
+                        style={styles.textHeadlineH1}
+                        accessibilityRole="header"
+                    >
+                        {translate('onboarding.peopleYouMayKnow')}
+                    </Text>
                     <Text style={[styles.textAlignLeft, styles.mv5]}>{translate('onboarding.workspaceYouMayJoin', {domain, email})}</Text>
                     <ValidateCodeForm
                         validateCodeActionErrorField="getAccessiblePolicies"

src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx

@@ -149,7 +149,12 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro
             <ScrollView style={[styles.flex1, styles.flexGrow1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, paddingHorizontal]}>
                 <View style={styles.flex1}>
                     <View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb5]}>
-                        <Text style={styles.textHeadlineH1}>{translate('onboarding.purpose.title')} </Text>
+                        <Text
+                            style={styles.textHeadlineH1}
+                            accessibilityRole="header"
+                        >
+                            {translate('onboarding.purpose.title')}
+                        </Text>
                     </View>
                     <MenuItemList
                         menuItems={menuItems}

src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

@@ -196,7 +196,12 @@ function BaseOnboardingWorkEmail({shouldUseNativeStyles}: BaseOnboardingWorkEmai
                 >
                     <View>
                         <View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb3]}>
-                            <Text style={styles.textHeadlineH1}>{translate('onboarding.workEmail.title')}</Text>
+                            <Text
+                                style={styles.textHeadlineH1}
+                                accessibilityRole="header"
+                            >
+                                {translate('onboarding.workEmail.title')}
+                            </Text>
                         </View>
                         <View style={styles.mb2}>
                             <Text style={[styles.textNormal, styles.colorMuted]}>{translate('onboarding.workEmail.subtitle')}</Text>

src/pages/OnboardingWorkEmailValidation/BaseOnboardingWorkEmailValidation.tsx

@@ -102,7 +102,12 @@ function BaseOnboardingWorkEmailValidation({shouldUseNativeStyles}: BaseOnboardi
                 </View>
             ) : (
                 <View style={[styles.flex1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}>
-                    <Text style={styles.textHeadlineH1}>{translate('onboarding.workEmailValidation.title')}</Text>
+                    <Text
+                        style={styles.textHeadlineH1}
+                        accessibilityRole="header"
+                    >
+                        {translate('onboarding.workEmailValidation.title')}
+                    </Text>
                     <Text style={[styles.textNormal, styles.colorMuted, styles.textAlignLeft, styles.mt5]}>{translate('onboarding.workEmailValidation.magicCodeSent', {workEmail})}</Text>
                     <ValidateCodeForm
                         handleSubmitForm={validateAccountAndMerge}

src/pages/OnboardingWorkspaceConfirmation/BaseOnboardingWorkspaceConfirmation.tsx

@@ -147,7 +147,12 @@ function BaseOnboardingWorkspaceConfirmation({shouldUseNativeStyles}: BaseOnboar
                 shouldValidateOnBlur={false}
             >
                 <View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb3]}>
-                    <Text style={styles.textHeadlineH1}>{translate('onboarding.confirmWorkspace.title')}</Text>
+                    <Text
+                        style={styles.textHeadlineH1}
+                        accessibilityRole="header"
+                    >
+                        {translate('onboarding.confirmWorkspace.title')}
+                    </Text>
                 </View>
                 <View style={styles.mb5}>
                     <Text style={[styles.textNormal, styles.colorMuted]}>{translate('onboarding.confirmWorkspace.subtitle')}</Text>

src/pages/OnboardingWorkspaceCurrency/BaseOnboardingWorkspaceCurrency.tsx

@@ -58,7 +58,12 @@ function BaseOnboardingWorkspaceCurrency({route, shouldUseNativeStyles}: BaseOnb
                 shouldDisplayHelpButton={false}
             />
             <View style={[onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5, onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb5]}>
-                <Text style={styles.textHeadlineH1}>{translate('common.currency')}</Text>
+                <Text
+                    style={styles.textHeadlineH1}
+                    accessibilityRole="header"
+                >
+                    {translate('common.currency')}
+                </Text>
             </View>
             <CurrencySelectionList
                 style={{listItemWrapperStyle: onboardingIsMediumOrLargerScreenWidth ? [styles.pl8, styles.pr8] : []}}

src/pages/OnboardingWorkspaceInvite/BaseOnboardingWorkspaceInvite.tsx

@@ -215,7 +215,12 @@ function BaseOnboardingWorkspaceInvite({shouldUseNativeStyles}: BaseOnboardingWo
                 shouldDisplayHelpButton={false}
             />
             <View style={[onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5, onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb3]}>
-                <Text style={styles.textHeadlineH1}>{translate('onboarding.inviteMembers.title')}</Text>
+                <Text
+                    style={styles.textHeadlineH1}
+                    accessibilityRole="header"
+                >
+                    {translate('onboarding.inviteMembers.title')}
+                </Text>
             </View>
             <View style={[onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5, onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb5]}>
                 <Text style={[styles.textNormal, styles.colorMuted]}>{translate('onboarding.inviteMembers.subtitle')}</Text>

src/pages/OnboardingWorkspaceOptional/BaseOnboardingWorkspaceOptional.tsx

@@ -116,7 +116,12 @@ function BaseOnboardingWorkspaceOptional({shouldUseNativeStyles}: BaseOnboarding
             />
             <View style={[styles.flexGrow1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}>
                 <View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb3]}>
-                    <Text style={styles.textHeadlineH1}>{translate('onboarding.workspace.title')}</Text>
+                    <Text
+                        style={styles.textHeadlineH1}
+                        accessibilityRole="header"
+                    >
+                        {translate('onboarding.workspace.title')}
+                    </Text>
                 </View>
                 <View style={styles.mb2}>
                     <Text style={[styles.textNormal, styles.colorMuted]}>{translate('onboarding.workspace.subtitle')}</Text>

src/pages/OnboardingWorkspaces/BaseOnboardingWorkspaces.tsx

@@ -165,7 +165,12 @@ function BaseOnboardingWorkspaces({route, shouldUseNativeStyles}: BaseOnboarding
                 showScrollIndicator
                 customListHeader={
                     <View style={[wrapperPadding, onboardingIsMediumOrLargerScreenWidth && styles.mt5, styles.mb5]}>
-                        <Text style={styles.textHeadlineH1}>{translate('onboarding.joinAWorkspace')}</Text>
+                        <Text
+                            style={styles.textHeadlineH1}
+                            accessibilityRole="header"
+                        >
+                            {translate('onboarding.joinAWorkspace')}
+                        </Text>
                         <Text style={[styles.textSupporting, styles.mt3]}>{translate('onboarding.listOfWorkspaces')}</Text>
                     </View>
                 }

src/pages/Search/AdvancedSearchFilters.tsx

@@ -708,7 +708,12 @@ function AdvancedSearchFilters() {
                                         style={[styles.reportHorizontalRule]}
                                     />
                                 )}
-                                <Text style={[styles.headerText, styles.reportHorizontalRule, index === 0 ? null : styles.mt4, styles.mb2]}>{translate(section.titleTranslationKey)}</Text>
+                                <Text
+                                    style={[styles.headerText, styles.reportHorizontalRule, index === 0 ? null : styles.mt4, styles.mb2]}
+                                    accessibilityRole="header"
+                                >
+                                    {translate(section.titleTranslationKey)}
+                                </Text>
                                 {section.items.map((item) => {
                                     return (
                                         <MenuItemWithTopDescription

src/pages/settings/Subscription/SubscriptionPlan/SubscriptionPlanCard.tsx

@@ -3,7 +3,7 @@
 import type {ValueOf} from 'type-fest';
 import ActivityIndicator from '@components/ActivityIndicator';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import SelectCircle from '@components/SelectCircle';
 import Text from '@components/Text';
 import useHasTeam2025Pricing from '@hooks/useHasTeam2025Pricing';
@@ -120,7 +120,12 @@
                                 />
                             </View>
                         </View>
-                        <Text style={[styles.headerText, styles.mv2, styles.textHeadlineH2]}>{title}</Text>
+                        <Text
+                            style={[styles.headerText, styles.mv2, styles.textHeadlineH2]}
+                            accessibilityRole="header"
+                        >
+                            {title}
+                        </Text>
                         <Text style={styles.labelStrong}>{subtitle}</Text>
                         <Text style={[styles.textLabelSupporting, styles.textSmall]}>{note}</Text>
                         <Text style={[styles.textLabelSupporting, styles.textNormal, styles.mt3, styles.mb1]}>{description}</Text>