[$250][Accessibility][Tracking] Add Header Role

[rushatgabhane]

Overview

This issue tracks visual headings that are not announced as headings by screen readers, affecting page structure and navigation.

Context

Part of the accessibility improvement effort tracked in https://github.com/Expensify/Expensify/issues/575078

Issues to Fix

• Screen Reader: Many Pages: The visual headings are not announced as such #77253 - Visual headings not announced as such
• Screen Reader: Many Pages: Visual headings not announced as such #76945 - Visual headings not announced as such
• Screen Reader: Many Pages: The page has incorrect structure of headings #76943 - Page has incorrect structure of headings

Instructions

Suggested Fix: Add accessibilityRole="header"

Note: Discuss on Slack if you are unsure whether a sub-issue should be fixed or if you are unsure about the right fix / expected result. Ideally, create a single PR that will fix all the issues listed to minimize review time (more PRs only if necessary).

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022009703206237571310
• Upwork Job ID: 2009703206237571310
• Last Price Increase: 2026-01-09

Issue Owner

Current Issue Owner: @abbasifaizan70

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022009703206237571310

[melvin-bot]

Current assignee @mallenexpensify is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @jjcoffee (External)

[melvin-bot]

⚠️ This issue has had its price increased by 4x or more. Please review the issue and ensure the price is correct.

[melvin-bot]

Upwork job price has been updated to $250

[abbasifaizan70]

Proposal

Please restate the problem that we are trying to solve in this issue.

This issue tracks visual headings that are not announced as headings by screen readers, affecting page structure and navigation.

What is the root cause of that problem?

Several components render text with heading styles (e.g., textHeadline, headerText, textHeadlineH1) but do not include the accessibilityRole="header" prop required for screen readers to identify them as headings.

Currently, only ListHeader.tsx has proper heading accessibility.

The following components are missing the accessibility role:

1. Header.tsx
2. Section/index.tsx
3. CollapsibleSection/index.tsx
4. EmptyStateComponent/index.tsx
5. WorkspaceEmptyStateSection.tsx
6. BaseSelectionListWithSections.tsx

What changes do you think we should make in order to solve the problem?

Add accessibilityRole="header" to all visual heading elements across the affected components.

Header.tsx#L77-L82

App/src/components/Header.tsx

Lines 77 to 82 in 8babc8e

	<Text
	numberOfLines={numberOfTitleLines}
	style={[styles.headerText, styles.textLarge, styles.lineHeightXLarge, textStyles]}
	>
	{title}
	</Text>

<Text
    numberOfLines={numberOfTitleLines}
    style={[styles.headerText, styles.textLarge, styles.lineHeightXLarge, textStyles]}
    accessibilityRole="header"
>
    {title}
</Text>

Section/index.tsx#L189

App/src/components/Section/index.tsx

Line 189 in 8babc8e

{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>}

CollapsibleSection/index.tsx#L56-L61

App/src/components/CollapsibleSection/index.tsx

Lines 56 to 61 in 8babc8e

	<Text
	style={textStyle ?? [styles.flex1, styles.textStrong, styles.userSelectNone, titleStyle]}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
	>
	{title}
	</Text>

<Text
    style={textStyle ?? [styles.flex1, styles.textStrong, styles.userSelectNone, titleStyle]}
    dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
    accessibilityRole="header"
>
    {title}
</Text>

EmptyStateComponent/index.tsx#L106

App/src/components/EmptyStateComponent/index.tsx

Line 106 in 8babc8e

<Text style={[styles.textAlignCenter, styles.textHeadlineH1, styles.mb2, titleStyles]}>{title}</Text>

<Text style={[styles.textAlignCenter, styles.textHeadlineH1, styles.mb2, titleStyles]} accessibilityRole="header">{title}</Text>

WorkspaceEmptyStateSection.tsx#L53

App/src/components/WorkspaceEmptyStateSection.tsx

Line 53 in 8babc8e

<Text style={[styles.textHeadline, styles.emptyCardSectionTitle]}>{title}</Text>

<Text style={[styles.textHeadline, styles.emptyCardSectionTitle]} accessibilityRole="header">{title}</Text>

BaseSelectionListWithSections.tsx#L605-L607

App/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

Lines 605 to 607 in 8babc8e

	<View style={[styles.optionsListSectionHeader, styles.justifyContentCenter, sectionTitleStyles]}>
	<Text style={[styles.ph5, styles.textLabelSupporting]}>{section.title}</Text>
	</View>

<View style={[styles.optionsListSectionHeader, styles.justifyContentCenter, sectionTitleStyles]} accessibilityRole="header">
    <Text style={[styles.ph5, styles.textLabelSupporting]}>{section.title}</Text>
</View>