incorrect tab order for TearsheetNarrow

[Khoi-Dinh]

I have created a Tearsheet, where the description property contains a ContentSwitcher component. When I open my Tearsheet, it is focused on the Close button (X). Then when I press tab, it skips the ContentSwitcher and goes to the next element. If I refocus on the Close button and press shift+tab, it will focus on the ContentSwitcher, which is also wrong. How can we make it so that when we are focused on Close button and press tab, it will focus on the ContentSwitcher?

<TearsheetNarrow
                portalTarget={parentRef}
                selectorPrimaryFocus=".cds--modal-close"
                className={`${BLOCK_CLASS}__tearsheet`}
                open={modalOpen}
                description={headerElement}
                closeIconDescription={t('buttons:CLOSE')}
                hasCloseIcon
                onClose={() => setModalOpen(false)}

 const headerElement = (
        <div role="document" aria-label={t('CREATE_OR_CHOOSE_POLICY')}>
            <ContentSwitcher
                light
                tabIndex={0}
                selectedIndex={createOption === 'template' ? 0 : createOption === 'custom' ? 1 : 2}
                // @ts-ignore
                role={'document'}
                data-walkme={'policy-builder-switcher'}
                onChange={({ index }) => {
                    setCreateOption(index === 0 ? 'template' : index == 1 ? 'custom' : 'copy');
                    index === 0
                        ? trackUI(POLICY_EVENTS.DIALOG.CREATE_CUSTOM)
                        : trackUI(POLICY_EVENTS.DIALOG.USE_TEMPLATE);
                    setCreateOption(index === 0 ? 'template' : index == 1 ? 'custom' : 'copy');
                    resetPolicy();
                }}>
                <Switch name="template" text={t('POLICY_DIALOG_USE_TEMPLATE')} />
                <Switch name="custom" text={t('POLICY_DIALOG_CREATE_CUSTOM')} />
                <Switch name="copy" text={t('POLICY_DIALOG_COPY_EXISTING')} />
            </ContentSwitcher>
        </div>
    );

Screen.Recording.2024-12-02.at.5.47.01.PM.mov

[makafsal]

@Khoi-Dinh TearsheetNarrow uses the default browser behavior for tab order. This is an issue caused by the ComposedModal header component children hierarchy, so I've raised an issue #18262 to enhance this behavior. Therefore, we can wait until the team addresses it.