[Due for payment 2026-01-29] [$250] Enable Sidebar-Based Page Scrolling for Accessibility

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.2.92-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @PedroEspinoza1999
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Problem

Some users experience physical discomfort or difficulty using traditional scrolling methods such as:
Mouse wheel, Trackpad gestures, Keyboard scrolling.
This is especially true for users with repetitive strain injuries (RSI), including carpal tunnel syndrome. In Expensify Classic, users could scroll page content by interacting with the sidebar, which provided a more ergonomic alternative.
In New Expensify, this interaction is no longer available.

Why is this feature needed?

Adding sidebar-based scrolling would:
Improve accessibility for users with motor or repetitive strain limitations
Offer an alternative navigation method for long pages and reports
Reduce reliance on fine motor movements required for wheels or trackpads
Align New Expensify with inclusive design and accessibility best practices
Restore a useful and well-loved Classic interaction

Action Performed:

Precondition: User has many reports (enough to require vertical scrolling)

1. Navigate to reports
2. Observe the scrolling behavior in NewDot and Classic

Expected Result:

Users can scroll page content up and down by interacting with the sidebar, similar to Expensify Classic

Actual Result:

Sidebar interaction does not scroll page content in New Expensify,
Users must rely solely on mouse wheel, trackpad, or keyboard scrolling

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Recording.2149.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022009339559778119977
• Upwork Job ID: 2009339559778119977
• Last Price Increase: 2026-01-08

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[dmkt9]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Sidebar interaction does not scroll page content in New Expensify

What is the root cause of that problem?

We disabled the scrollbar by default.

App/src/components/Search/SearchList/BaseSearchList/index.tsx

Line 113 in f7265ef

showsVerticalScrollIndicator={false}

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

We should enable it by default, or introduce a prop that allows it to be turned off when needed.

App/src/components/Search/SearchList/BaseSearchList/index.tsx

Line 113 in f7265ef

showsVerticalScrollIndicator={false}

showsVerticalScrollIndicator

We also need to check other similar list components.

What alternative solutions did you explore? (Optional)

N/A

[TaduJR]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Users with repetitive strain injuries (RSI), including carpal tunnel syndrome, cannot scroll page content by interacting with the browser's native scrollbar in New Expensify. In Expensify Classic, users could click on the scrollbar track to scroll pages, but this functionality is absent in New Expensify.

What is the root cause of that problem?

Scrollbars are explicitly hidden across key scrollable components via showsVerticalScrollIndicator={false}. This prevents the browser from rendering native scrollbars that users can interact with.

Root Cause Flow Analysis

1. LHNOptionsList (Sidebar) - FlashList has scrollbar hidden:

App/src/components/LHNOptionsList/LHNOptionsList.tsx

Line 445 in f7265ef

showsVerticalScrollIndicator={false}

<FlashList
    // ...
    showsVerticalScrollIndicator={false}  // <-- Scrollbar hidden
    // ...
/>

2. SearchTypeMenu - ScrollView has scrollbar hidden:

App/src/pages/Search/SearchTypeMenu.tsx

Line 230 in f7265ef

showsVerticalScrollIndicator={false}

3. InitialSettingsPage - ScrollView has scrollbar hidden:

App/src/pages/settings/InitialSettingsPage.tsx

Line 525 in f7265ef

showsVerticalScrollIndicator={false}

4. SearchList - FlashList has scrollbar hidden:

App/src/components/Search/SearchList/index.tsx

Line 489 in f7265ef

showsVerticalScrollIndicator={false}

5. BaseSearchList (Web) - FlashList has scrollbar hidden:

App/src/components/Search/SearchList/BaseSearchList/index.tsx

Line 113 in f7265ef

showsVerticalScrollIndicator={false}

6. EmptySearchView - ScrollView has scrollbar hidden:

App/src/pages/Search/EmptySearchView.tsx

Line 518 in f7265ef

showsVerticalScrollIndicator={false}

On web, when showsVerticalScrollIndicator={false} is set, React Native Web does not render the browser's native scrollbar, making it impossible for users to click on the scrollbar track to scroll.

Note: Setting showsVerticalScrollIndicator={true} does not force scrollbars to always appear. It enables native browser scrollbar behavior where scrollbars only render when content overflows (i.e., when there are enough reports to require scrolling). The browser handles this condition automatically.

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

Enable showsVerticalScrollIndicator on web/desktop platforms for key scrollable containers. This allows the browser to render native scrollbars that users can interact with for accessibility.

Solution

1. Create a platform-specific utility to determine scrollbar visibility:

Create a new file src/styles/utils/getShowScrollIndicator/index.ts (web):

const getShowScrollIndicator = (): boolean => true;

export default getShowScrollIndicator;

Create src/styles/utils/getShowScrollIndicator/index.native.ts (native):

const getShowScrollIndicator = (): boolean => false;

export default getShowScrollIndicator;

Create src/styles/utils/getShowScrollIndicator/types.ts:

type GetShowScrollIndicator = () => boolean;

export default GetShowScrollIndicator;

2. Update affected components to use the utility:

Modify src/components/LHNOptionsList/LHNOptionsList.tsx:

App/src/components/LHNOptionsList/LHNOptionsList.tsx

Line 445 in f7265ef

showsVerticalScrollIndicator={false}

+ import getShowScrollIndicator from '@styles/utils/getShowScrollIndicator';

  <FlashList
      // ...
-     showsVerticalScrollIndicator={false}
+     showsVerticalScrollIndicator={getShowScrollIndicator()}
      // ...
  />

Modify src/pages/Search/SearchTypeMenu.tsx:

App/src/pages/Search/SearchTypeMenu.tsx

Line 230 in f7265ef

showsVerticalScrollIndicator={false}

+ import getShowScrollIndicator from '@styles/utils/getShowScrollIndicator';

  <ScrollView
-     showsVerticalScrollIndicator={false}
+     showsVerticalScrollIndicator={getShowScrollIndicator()}
  >

Modify src/pages/settings/InitialSettingsPage.tsx:

App/src/pages/settings/InitialSettingsPage.tsx

Line 525 in f7265ef

showsVerticalScrollIndicator={false}

+ import getShowScrollIndicator from '@styles/utils/getShowScrollIndicator';

  <ScrollView
-     showsVerticalScrollIndicator={false}
+     showsVerticalScrollIndicator={getShowScrollIndicator()}
  >

Modify src/components/Search/SearchList/index.tsx:

App/src/components/Search/SearchList/index.tsx

Line 489 in f7265ef

showsVerticalScrollIndicator={false}

+ import getShowScrollIndicator from '@styles/utils/getShowScrollIndicator';

  <BaseSearchList
-     showsVerticalScrollIndicator={false}
+     showsVerticalScrollIndicator={getShowScrollIndicator()}
  />

Modify src/components/Search/SearchList/BaseSearchList/index.tsx:

App/src/components/Search/SearchList/BaseSearchList/index.tsx

Line 113 in f7265ef

showsVerticalScrollIndicator={false}

+ import getShowScrollIndicator from '@styles/utils/getShowScrollIndicator';

  <FlashList
-     showsVerticalScrollIndicator={false}
+     showsVerticalScrollIndicator={getShowScrollIndicator()}
  />

Modify src/pages/Search/EmptySearchView.tsx:

App/src/pages/Search/EmptySearchView.tsx

Line 518 in f7265ef

showsVerticalScrollIndicator={false}

+ import getShowScrollIndicator from '@styles/utils/getShowScrollIndicator';

  <ScrollView
-     showsVerticalScrollIndicator={false}
+     showsVerticalScrollIndicator={getShowScrollIndicator()}
  >

PS: We can identify and remove not needed ones to preserve their original behaviour

[MobileMage]

Please re-state the problem that we are trying to solve in this issue.

Users with repetitive strain injuries (RSI) cannot scroll page content by clicking on the browser's native scrollbar track in New Expensify. This accessibility feature was available in Expensify Classic.

What is the root cause of that problem?

Scrollbars are hidden via showsVerticalScrollIndicator={false} across key scrollable components. On web, this prevents the browser from rendering native scrollbars that users can interact with.

Key affected files:

• src/components/Search/SearchList/BaseSearchList/index.tsx:113
• src/components/Search/SearchList/BaseSearchList/index.native.tsx:35
• src/components/LHNOptionsList/LHNOptionsList.tsx:445
• src/pages/Search/SearchTypeMenu.tsx:230
• src/pages/settings/InitialSettingsPage.tsx:525

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

Enable scrollbar visibility on web/desktop only, keeping mobile behavior unchanged (native apps conventionally hide scrollbars).

1. For BaseSearchList - Already has platform-specific files

Change only the web version:

// src/components/Search/SearchList/BaseSearchList/index.tsx
- showsVerticalScrollIndicator={false}
+ showsVerticalScrollIndicator

Native file (index.native.tsx) remains unchanged.

2. For components without platform splits

Use inline Platform check:

+ import {Platform} from 'react-native';

- showsVerticalScrollIndicator={false}
+ showsVerticalScrollIndicator={Platform.OS === 'web'}

Apply to:

• src/components/LHNOptionsList/LHNOptionsList.tsx
• src/pages/Search/SearchTypeMenu.tsx
• src/pages/settings/InitialSettingsPage.tsx
• src/pages/Search/EmptySearchView.tsx

What alternative solutions did you explore?

...

[melvin-bot]

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

[melvin-bot]

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