fix: Color: Onboarding: The status of the progress bar relies only on the use of color

src/components/HeaderWithBackButton/index.tsx

@@ -103,15 +103,25 @@ function HeaderWithBackButton({
 
     const middleContent = useMemo(() => {
         if (progressBarPercentage) {
+            const progressBarLabel = stepCounter ? `${translate('common.progressBarLabel')}, ${translate('stepCounter', stepCounter)}` : undefined;
             return (
                 <>
                     {/* Reserves as much space for the middleContent as possible */}
                     <View style={styles.flexGrow1} />
                     {/* Uses absolute positioning so that it's always centered instead of being affected by the
                     presence or absence of back/close buttons to the left/right of it */}
                     <View style={styles.headerProgressBarContainer}>
-                        <View style={styles.headerProgressBar}>
-                            <View style={[{width: `${progressBarPercentage}%`}, styles.headerProgressBarFill]} />
+                        <View
+                            style={styles.headerProgressBar}
+                            accessible={!!progressBarLabel}
+                            accessibilityLabel={progressBarLabel}
+                            role={CONST.ROLE.PROGRESSBAR}
+                            aria-valuetext={progressBarLabel}
+                        >
+                            <View
+                                aria-hidden
+                                style={[{width: `${progressBarPercentage}%`}, styles.headerProgressBarFill]}
+                            />
                         </View>
                     </View>
                 </>

src/hooks/useOnboardingStepCounter.ts

@@ -0,0 +1,20 @@
+import {getOnboardingStepCounter} from '@libs/getOnboardingStepCounter';
+import type {OnboardingScreen, OnboardingStepResult} from '@libs/getOnboardingStepCounter';
+import ONYXKEYS from '@src/ONYXKEYS';
+import useOnyx from './useOnyx';
+
+function useOnboardingStepCounter(page: OnboardingScreen): OnboardingStepResult | undefined {
+    const [onboarding] = useOnyx(ONYXKEYS.NVP_ONBOARDING);
+    const [purposeSelected] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED);
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+
+    return getOnboardingStepCounter(page, {
+        signupQualifier: onboarding?.signupQualifier,
+        isFromPublicDomain: account?.isFromPublicDomain,
+        hasAccessibleDomainPolicies: account?.hasAccessibleDomainPolicies,
+        purposeSelected: purposeSelected ?? undefined,
+        isMergeAccountStepSkipped: onboarding?.isMergeAccountStepSkipped,
+    });
+}
+
+export default useOnboardingStepCounter;

src/languages/de.ts

@@ -260,6 +260,7 @@ const translations: TranslationDeepObject<typeof en> = {
         conjunctionTo: 'bis',
         genericErrorMessage: 'Ups ... etwas ist schiefgelaufen und Ihre Anfrage konnte nicht abgeschlossen werden. Bitte versuchen Sie es später noch einmal.',
         percentage: 'Prozentsatz',
+        progressBarLabel: 'Onboarding-Fortschritt',
         converted: 'Umgewandelt',
         error: {
             invalidAmount: 'Ungültiger Betrag',

src/languages/en.ts

@@ -263,6 +263,7 @@ const translations = {
         conjunctionTo: 'to',
         genericErrorMessage: 'Oops... something went wrong and your request could not be completed. Please try again later.',
         percentage: 'Percentage',
+        progressBarLabel: 'Onboarding progress',
         converted: 'Converted',
         error: {
             invalidAmount: 'Invalid amount',

src/languages/es.ts

@@ -166,6 +166,7 @@ const translations: TranslationDeepObject<typeof en> = {
         conjunctionTo: 'a',
         genericErrorMessage: 'Ups... algo no ha ido bien y la acción no se ha podido completar. Por favor, inténtalo más tarde.',
         percentage: 'Porcentaje',
+        progressBarLabel: 'Progreso de incorporación',
         converted: 'Convertido',
         error: {
             invalidAmount: 'Importe no válido',

src/languages/fr.ts

@@ -260,6 +260,7 @@ const translations: TranslationDeepObject<typeof en> = {
         conjunctionTo: 'à',
         genericErrorMessage: 'Oups... une erreur s’est produite et votre requête n’a pas pu être effectuée. Veuillez réessayer plus tard.',
         percentage: 'Pourcentage',
+        progressBarLabel: "Progression de l'intégration",
         converted: 'Converti',
         error: {
             invalidAmount: 'Montant invalide',

src/languages/it.ts

@@ -260,6 +260,7 @@ const translations: TranslationDeepObject<typeof en> = {
         conjunctionTo: 'a',
         genericErrorMessage: 'Ops... qualcosa è andato storto e la tua richiesta non può essere completata. Riprova più tardi.',
         percentage: 'Percentuale',
+        progressBarLabel: 'Progresso onboarding',
         converted: 'Convertito',
         error: {
             invalidAmount: 'Importo non valido',

src/languages/ja.ts

@@ -260,6 +260,7 @@ const translations: TranslationDeepObject<typeof en> = {
         conjunctionTo: '宛先',
         genericErrorMessage: 'おっと…問題が発生したため、リクエストを完了できませんでした。時間をおいてもう一度お試しください。',
         percentage: 'パーセンテージ',
+        progressBarLabel: 'オンボーディング進捗',
         converted: '変換済み',
         error: {
             invalidAmount: '金額が無効です',

src/languages/nl.ts

@@ -260,6 +260,7 @@ const translations: TranslationDeepObject<typeof en> = {
         conjunctionTo: 'naar',
         genericErrorMessage: 'Oeps... er is iets misgegaan en je verzoek kon niet worden voltooid. Probeer het later opnieuw.',
         percentage: 'Percentage',
+        progressBarLabel: 'Voortgang onboarding',
         converted: 'Geconverteerd',
         error: {
             invalidAmount: 'Ongeldig bedrag',

src/languages/pl.ts

@@ -260,6 +260,7 @@ const translations: TranslationDeepObject<typeof en> = {
         conjunctionTo: 'do',
         genericErrorMessage: 'Ups... coś poszło nie tak i Twoje żądanie nie mogło zostać zrealizowane. Spróbuj ponownie później.',
         percentage: 'Procent',
+        progressBarLabel: 'Postęp wdrożenia',
         converted: 'Przekonwertowano',
         error: {
             invalidAmount: 'Nieprawidłowa kwota',

src/languages/pt-BR.ts

@@ -260,6 +260,7 @@ const translations: TranslationDeepObject<typeof en> = {
         conjunctionTo: 'para',
         genericErrorMessage: 'Ops... algo deu errado e sua solicitação não pôde ser concluída. Tente novamente mais tarde.',
         percentage: 'Porcentagem',
+        progressBarLabel: 'Progresso da integração',
         converted: 'Convertido',
         error: {
             invalidAmount: 'Valor inválido',

src/languages/zh-hans.ts

@@ -260,6 +260,7 @@ const translations: TranslationDeepObject<typeof en> = {
         conjunctionTo: '至',
         genericErrorMessage: '哎呀……出现问题，无法完成您的请求。请稍后重试。',
         percentage: '百分比',
+        progressBarLabel: '入门进度',
         converted: '已转换',
         error: {
             invalidAmount: '金额无效',

src/libs/getOnboardingStepCounter.ts

@@ -0,0 +1,136 @@
+import type {ValueOf} from 'type-fest';
+import CONST from '@src/CONST';
+import type {StepCounterParams} from '@src/languages/params';
+import SCREENS from '@src/SCREENS';
+
+type OnboardingScreen = ValueOf<typeof SCREENS.ONBOARDING>;
+
+type OnboardingFlowContext = {
+    signupQualifier?: ValueOf<typeof CONST.ONBOARDING_SIGNUP_QUALIFIERS>;
+    isFromPublicDomain?: boolean;
+    hasAccessibleDomainPolicies?: boolean;
+    purposeSelected?: ValueOf<typeof CONST.ONBOARDING_CHOICES>;
+    isMergeAccountStepSkipped?: boolean;
+};
+
+type OnboardingStepResult = {
+    stepCounter: StepCounterParams;
+    progressBarPercentage: number;
+};
+
+const {ONBOARDING} = SCREENS;
+const {ONBOARDING_CHOICES, ONBOARDING_SIGNUP_QUALIFIERS} = CONST;
+
+const screenResolution: Record<OnboardingScreen, OnboardingScreen> = {
+    [ONBOARDING.WORK_EMAIL]: ONBOARDING.WORK_EMAIL,
+    [ONBOARDING.WORK_EMAIL_VALIDATION]: ONBOARDING.WORK_EMAIL_VALIDATION,
+    [ONBOARDING.PRIVATE_DOMAIN]: ONBOARDING.PRIVATE_DOMAIN,
+    [ONBOARDING.PERSONAL_DETAILS]: ONBOARDING.PERSONAL_DETAILS,
+    [ONBOARDING.WORKSPACES]: ONBOARDING.WORKSPACES,
+    [ONBOARDING.PURPOSE]: ONBOARDING.PURPOSE,
+    [ONBOARDING.EMPLOYEES]: ONBOARDING.EMPLOYEES,
+    [ONBOARDING.ACCOUNTING]: ONBOARDING.ACCOUNTING,
+    [ONBOARDING.INTERESTED_FEATURES]: ONBOARDING.INTERESTED_FEATURES,
+    [ONBOARDING.WORKSPACE_OPTIONAL]: ONBOARDING.WORKSPACE_OPTIONAL,
+    [ONBOARDING.WORKSPACE_CONFIRMATION]: ONBOARDING.WORKSPACE_OPTIONAL,
+    [ONBOARDING.WORKSPACE_CURRENCY]: ONBOARDING.WORKSPACE_OPTIONAL,
+    [ONBOARDING.WORKSPACE_INVITE]: ONBOARDING.WORKSPACE_OPTIONAL,
+};
+
+// Screens that follow PURPOSE. For private domain users, PERSONAL_DETAILS is filtered out.
+const purposeSuffixes = {
+    [ONBOARDING_CHOICES.MANAGE_TEAM]: [ONBOARDING.EMPLOYEES, ONBOARDING.ACCOUNTING, ONBOARDING.INTERESTED_FEATURES],
+    [ONBOARDING_CHOICES.PERSONAL_SPEND]: [ONBOARDING.PERSONAL_DETAILS, ONBOARDING.WORKSPACE_OPTIONAL],
+    [ONBOARDING_CHOICES.TRACK_WORKSPACE]: [ONBOARDING.PERSONAL_DETAILS, ONBOARDING.WORKSPACE_OPTIONAL],
+    [ONBOARDING_CHOICES.EMPLOYER]: [ONBOARDING.PERSONAL_DETAILS],
+    [ONBOARDING_CHOICES.CHAT_SPLIT]: [ONBOARDING.PERSONAL_DETAILS],
+    [ONBOARDING_CHOICES.LOOKING_AROUND]: [ONBOARDING.PERSONAL_DETAILS],
+    [ONBOARDING_CHOICES.ADMIN]: [ONBOARDING.PERSONAL_DETAILS],
+    [ONBOARDING_CHOICES.SUBMIT]: [ONBOARDING.PERSONAL_DETAILS],
+    [ONBOARDING_CHOICES.TEST_DRIVE_RECEIVER]: [ONBOARDING.PERSONAL_DETAILS],
+} satisfies Record<ValueOf<typeof ONBOARDING_CHOICES>, OnboardingScreen[]>;
+
+// VSB/SMB have fixed suffixes; individual (null) is handled via purposeSuffixes.
+const qualifierSuffixes = {
+    [ONBOARDING_SIGNUP_QUALIFIERS.VSB]: [ONBOARDING.ACCOUNTING, ONBOARDING.INTERESTED_FEATURES],
+    [ONBOARDING_SIGNUP_QUALIFIERS.SMB]: [ONBOARDING.EMPLOYEES, ONBOARDING.ACCOUNTING, ONBOARDING.INTERESTED_FEATURES],
+    [ONBOARDING_SIGNUP_QUALIFIERS.INDIVIDUAL]: null,
+} satisfies Record<ValueOf<typeof ONBOARDING_SIGNUP_QUALIFIERS>, OnboardingScreen[] | null>;
+
+const maxSuffixLength = Math.max(...Object.values(purposeSuffixes).map((s) => s.length));
+const maxPrivateSuffixLength = Math.max(...Object.values(purposeSuffixes).map((s) => s.filter((p) => p !== ONBOARDING.PERSONAL_DETAILS).length));
+
+function getResolvedPage(page: OnboardingScreen, context: OnboardingFlowContext): OnboardingScreen {
+    // In public domain flows, PRIVATE_DOMAIN is used as a variant of WORK_EMAIL_VALIDATION
+    if (page === ONBOARDING.PRIVATE_DOMAIN && context.isFromPublicDomain) {
+        return ONBOARDING.WORK_EMAIL_VALIDATION;
+    }
+    return screenResolution[page];
+}
+
+function getDomainPrefix(context: OnboardingFlowContext): OnboardingScreen[] {
+    if (context.isFromPublicDomain) {
+        if (context.isMergeAccountStepSkipped === false) {
+            return [ONBOARDING.WORK_EMAIL, ONBOARDING.WORK_EMAIL_VALIDATION, ONBOARDING.WORKSPACES];
+        }
+        // User skipped the work email step — they never see WORK_EMAIL_VALIDATION
+        if (context.isMergeAccountStepSkipped === true) {
+            return [ONBOARDING.WORK_EMAIL];
+        }
+        return [ONBOARDING.WORK_EMAIL, ONBOARDING.WORK_EMAIL_VALIDATION];
+    }
+    if (context.hasAccessibleDomainPolicies) {
+        return [ONBOARDING.PERSONAL_DETAILS, ONBOARDING.PRIVATE_DOMAIN, ONBOARDING.WORKSPACES];
+    }
+    return [];
+}
+
+function getOnboardingFlow(context: OnboardingFlowContext): OnboardingScreen[] | undefined {
+    const prefix = getDomainPrefix(context);
+    const isPrivateDomain = !context.isFromPublicDomain && !!context.hasAccessibleDomainPolicies;
+
+    const qualifierSuffix = context.signupQualifier ? qualifierSuffixes[context.signupQualifier] : null;
+    if (qualifierSuffix) {
+        return [...prefix, ...qualifierSuffix];
+    }
+
+    if (!context.purposeSelected) {
+        return undefined;
+    }
+
+    const suffix = purposeSuffixes[context.purposeSelected];
+    const adjustedSuffix = isPrivateDomain ? suffix.filter((s) => s !== ONBOARDING.PERSONAL_DETAILS) : suffix;
+    return [...prefix, ONBOARDING.PURPOSE, ...adjustedSuffix];
+}
+
+function getOnboardingStepCounter(page: OnboardingScreen, context: OnboardingFlowContext): OnboardingStepResult | undefined {
+    const resolvedPage = getResolvedPage(page, context);
+    const flow = getOnboardingFlow(context);
+
+    if (!flow) {
+        const prefix = getDomainPrefix(context);
+        const knownScreens = [...prefix, ONBOARDING.PURPOSE];
+        const index = knownScreens.indexOf(resolvedPage);
+        if (index === -1) {
+            return undefined;
+        }
+        const isPrivateDomain = !context.isFromPublicDomain && !!context.hasAccessibleDomainPolicies;
+        const maxFlowLength = prefix.length + 1 + (isPrivateDomain ? maxPrivateSuffixLength : maxSuffixLength);
+        return {
+            stepCounter: {step: index + 1},
+            progressBarPercentage: Math.round(((index + 1) / maxFlowLength) * 100),
+        };
+    }
+
+    const index = flow.indexOf(resolvedPage);
+    if (index === -1) {
+        return undefined;
+    }
+    return {
+        stepCounter: {step: index + 1, total: flow.length},
+        progressBarPercentage: Math.round(((index + 1) / flow.length) * 100),
+    };
+}
+
+export {getOnboardingFlow, getOnboardingStepCounter};
+export type {OnboardingFlowContext, OnboardingScreen, OnboardingStepResult};

src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

@@ -13,6 +13,7 @@ import type {ListItem} from '@components/SelectionListWithSections/types';
 import Text from '@components/Text';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
+import useOnboardingStepCounter from '@hooks/useOnboardingStepCounter';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -27,6 +28,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
 import type IconAsset from '@src/types/utils/IconAsset';
 import type {BaseOnboardingAccountingProps} from './types';
 
@@ -107,6 +109,7 @@ function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboarding
     const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const [onboardingUserReportedIntegration] = useOnyx(ONYXKEYS.ONBOARDING_USER_REPORTED_INTEGRATION);
+    const onboardingStep = useOnboardingStepCounter(SCREENS.ONBOARDING.ACCOUNTING);
 
     const [userReportedIntegration, setUserReportedIntegration] = useState<OnboardingAccounting | undefined>(onboardingUserReportedIntegration ?? undefined);
     const [error, setError] = useState('');
@@ -243,7 +246,8 @@ function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboarding
         >
             <HeaderWithBackButton
                 shouldShowBackButton={!isVsb}
-                progressBarPercentage={80}
+                stepCounter={onboardingStep?.stepCounter}
+                progressBarPercentage={onboardingStep?.progressBarPercentage}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.ONBOARDING_EMPLOYEES.getRoute())}
                 shouldDisplayHelpButton={false}
             />

src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx

@@ -8,6 +8,7 @@ import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import type {ListItem} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useOnboardingStepCounter from '@hooks/useOnboardingStepCounter';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -17,6 +18,7 @@ import {setOnboardingCompanySize} from '@userActions/Welcome';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
 import type {BaseOnboardingEmployeesProps} from './types';
 
 type OnboardingListItem = ListItem & {
@@ -26,9 +28,9 @@ function BaseOnboardingEmployees({shouldUseNativeStyles, route}: BaseOnboardingE
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [onboardingCompanySize] = useOnyx(ONYXKEYS.ONBOARDING_COMPANY_SIZE);
-    const [onboardingPurposeSelected] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED);
 
     const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
+    const onboardingStep = useOnboardingStepCounter(SCREENS.ONBOARDING.EMPLOYEES);
     const [selectedCompanySize, setSelectedCompanySize] = useState<OnboardingCompanySize | null | undefined>(onboardingCompanySize);
     const [error, setError] = useState('');
 
@@ -80,7 +82,8 @@ function BaseOnboardingEmployees({shouldUseNativeStyles, route}: BaseOnboardingE
         >
             <HeaderWithBackButton
                 shouldShowBackButton
-                progressBarPercentage={onboardingPurposeSelected === CONST.ONBOARDING_CHOICES.MANAGE_TEAM ? 80 : 90}
+                stepCounter={onboardingStep?.stepCounter}
+                progressBarPercentage={onboardingStep?.progressBarPercentage}
                 onBackButtonPress={() => {
                     Navigation.goBack(ROUTES.ONBOARDING_PURPOSE.getRoute());
                 }}

src/pages/OnboardingInterestedFeatures/BaseOnboardingInterestedFeatures.tsx

@@ -18,6 +18,7 @@ import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnboardingMessages from '@hooks/useOnboardingMessages';
+import useOnboardingStepCounter from '@hooks/useOnboardingStepCounter';
 import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -33,6 +34,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
 import type {OnboardingRHPVariant} from '@src/types/onyx';
 import type {BaseOnboardingInterestedFeaturesProps, Feature, SectionObject} from './types';
 
@@ -46,6 +48,7 @@ function BaseOnboardingInterestedFeatures({shouldUseNativeStyles}: BaseOnboardin
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth} = useResponsiveLayout();
     const [onboardingPurposeSelected] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED);
+    const onboardingStep = useOnboardingStepCounter(SCREENS.ONBOARDING.INTERESTED_FEATURES);
     const [onboardingPolicyID] = useOnyx(ONYXKEYS.ONBOARDING_POLICY_ID);
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
@@ -385,7 +388,8 @@ function BaseOnboardingInterestedFeatures({shouldUseNativeStyles}: BaseOnboardin
         >
             <HeaderWithBackButton
                 shouldShowBackButton
-                progressBarPercentage={90}
+                stepCounter={onboardingStep?.stepCounter}
+                progressBarPercentage={onboardingStep?.progressBarPercentage}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.ONBOARDING_ACCOUNTING.getRoute())}
                 shouldDisplayHelpButton={false}
             />