From c7af22700b52735fde53c8f9aa3864861a135489 Mon Sep 17 00:00:00 2001
From: "Rushat Gabhane (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Tue, 10 Mar 2026 23:55:06 +0000
Subject: [PATCH 1/3] Hide InteractiveStepSubHeader from assistive technology

The step indicator wizard component is decorative/visual-only.
Remove focusable and accessibilityLabel from the container View
and add aria-hidden to hide the entire component tree from screen
readers and keyboard navigation.

Co-authored-by: Rushat Gabhane <rushatgabhane@users.noreply.github.com>
---
 src/components/InteractiveStepSubHeader.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/InteractiveStepSubHeader.tsx b/src/components/InteractiveStepSubHeader.tsx
index bb94b38c370b..ca5d014739be 100644
--- a/src/components/InteractiveStepSubHeader.tsx
+++ b/src/components/InteractiveStepSubHeader.tsx
@@ -3,7 +3,6 @@ import React, {useImperativeHandle, useState} from 'react';
 import type {ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
-import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import colors from '@styles/theme/colors';
 import variables from '@styles/variables';
@@ -42,7 +41,6 @@ const MIN_AMOUNT_OF_STEPS = 2;
 
 function InteractiveStepSubHeader({stepNames, startStepIndex = 0, onStepSelected, ref}: InteractiveStepSubHeaderProps) {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
     const containerWidthStyle: ViewStyle = stepNames.length < MIN_AMOUNT_FOR_EXPANDING ? styles.mnw60 : styles.mnw100;
 
     if (stepNames.length < MIN_AMOUNT_OF_STEPS) {
@@ -72,8 +70,7 @@ function InteractiveStepSubHeader({stepNames, startStepIndex = 0, onStepSelected
     return (
         <View
             style={[styles.interactiveStepHeaderContainer, containerWidthStyle]}
-            focusable
-            accessibilityLabel={translate('stepCounter', {step: currentStep + 1, total: stepNames.length})}
+            aria-hidden
         >
             {stepNames.map((stepName, index) => {
                 const isCompletedStep = currentStep > index;

From 5744cc17accb6df9de127d05d7ab78b066dda1c3 Mon Sep 17 00:00:00 2001
From: "Rushat Gabhane (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Thu, 12 Mar 2026 14:25:57 +0000
Subject: [PATCH 2/3] Replace aria-hidden with accessible={false} on container
 View

Co-authored-by: Rushat Gabhane <rushatgabhane@users.noreply.github.com>
---
 src/components/InteractiveStepSubHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InteractiveStepSubHeader.tsx b/src/components/InteractiveStepSubHeader.tsx
index ca5d014739be..f96c8510861a 100644
--- a/src/components/InteractiveStepSubHeader.tsx
+++ b/src/components/InteractiveStepSubHeader.tsx
@@ -70,7 +70,7 @@ function InteractiveStepSubHeader({stepNames, startStepIndex = 0, onStepSelected
     return (
         <View
             style={[styles.interactiveStepHeaderContainer, containerWidthStyle]}
-            aria-hidden
+            accessible={false}
         >
             {stepNames.map((stepName, index) => {
                 const isCompletedStep = currentStep > index;

From 21c4a1902eeb5b3f49ebde37d187bc4c6dfce6da Mon Sep 17 00:00:00 2001
From: "Rushat Gabhane (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Thu, 12 Mar 2026 18:49:52 +0000
Subject: [PATCH 3/3] Add aria-hidden to container alongside accessible={false}

Co-authored-by: Rushat Gabhane <rushatgabhane@users.noreply.github.com>
---
 src/components/InteractiveStepSubHeader.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/InteractiveStepSubHeader.tsx b/src/components/InteractiveStepSubHeader.tsx
index f96c8510861a..3481aa35427f 100644
--- a/src/components/InteractiveStepSubHeader.tsx
+++ b/src/components/InteractiveStepSubHeader.tsx
@@ -71,6 +71,7 @@ function InteractiveStepSubHeader({stepNames, startStepIndex = 0, onStepSelected
         <View
             style={[styles.interactiveStepHeaderContainer, containerWidthStyle]}
             accessible={false}
+            aria-hidden
         >
             {stepNames.map((stepName, index) => {
                 const isCompletedStep = currentStep > index;