My appbar contains an image link, a warning indicating the user's current environment, and details about the logged-in user.
While testing accessibility with a screen reader, I noticed that tab focus skips over the user details in favor of a link in the sidebar.
How can I ensure that tab focus lands 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>