MUI: Tab focus is skipping some important text, impacting accessibility-CodePudding

I have an appbar with an image link, a warning to show the user which environment they are on, and some text which shows details on the current logged in user.

I am testing accessibility with a screen reader, but tab focus on the user details is skipped in favor of a link in my sidebar.

How can I get tab focus on the user details correctly?

<AppBar position="fixed" className={classes.appBar}>
    <Toolbar>
        <div>
            <Box style={{ display: "flex", alignItems: "center" }}>
                <a aria-label="Logo Link to home page" className={classes.prodLink} href="/home">
                    <SVGLOGO className="logo_stack" />
                    <SVGLOGOHORI className="logo" />
                </a>
                <Typography aria-label="environment warning" className={classes.envFlag} hidden={hidden}>
                    You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
                    <a
                        aria-label="Link to production environment"
                        className={classes.prodLink}
                        href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
                        rel="noreferrer"
                    >
                        here
                    </a>{" "}
                    to go to production.
                </Typography>
            </Box>
// The user details are here.  Focus on this information is being skipped
            <Box
                id="user-info-box"
                aria-label="Logged in user details"
            >
                <i icon }}></i>
                <Box style={{ marginLeft: "10px" }}>
                    <Typography className={classes.userInfo} aria-label="User name and role">
                        {loggedUser} {userRole}
                    </Typography>
                    <Typography className={classes.userInfo} aria-label="User's experience">
                        {userExperience}
                    </Typography>
                </Box>
            </Box>
        </div>
    </Toolbar>
</AppBar>

CodePudding user response：

Use tabindex to make the user details focusable. See this answer for more details: Influence tab order of Material UI controls

Maybe this link could also be helpful: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex?retiredLocale=de