我有一个带有图片链接的应用程序栏，一个向用户显示他们所处环境的警告，以及一些显示当前登录用户详细信息的文本。
我正在用屏幕阅读器测试可访问性，但是跳过了用户详细信息的标签焦点，而选择了侧边栏中的链接。
我怎样才能使tab焦点正确地显示在用户详细信息上？

<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>