Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-10 09:43:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

♿️ (Bitverse UI: Portal Button Accessibility) Makes clickable element into button.

Browse Source 
Clickable elements in a page which are not hyperlinks to other pages should be buttons for accessibility. This changes the clickable area into a button to more closely align with best practices.
This commit is contained in:
ChrissiQ 2022-02-17 23:32:00 -07:00
parent 9ddb1c4379
commit 34b54ffc5a
1 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/BitNode/ui/BitverseRoot.tsx
View File

@ -8,38 +8,34 @@ import { CinematicText } from "../../ui/React/CinematicText";
import { use } from "../../ui/Context"; import { use } from "../../ui/Context";
import makeStyles from "@mui/styles/makeStyles"; import makeStyles from "@mui/styles/makeStyles";
import createStyles from "@mui/styles/createStyles"; import createStyles from "@mui/styles/createStyles";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
const useStyles = makeStyles(() => const useStyles = makeStyles(() =>
createStyles({ createStyles({
level0: { portal: {
color: "red",
cursor: "pointer", cursor: "pointer",
fontFamily: "inherit",
fontSize: "1rem",
fontWeight: "bold",
lineHeight: 1,
padding: 0,
"&:hover": { "&:hover": {
color: "#fff", color: "#fff",
}, },
}, },
level0: {
color: "red",
},
level1: { level1: {
color: "yellow", color: "yellow",
cursor: "pointer",
"&:hover": {
color: "#fff",
},
}, },
level2: { level2: {
color: "#48d1cc", color: "#48d1cc",
cursor: "pointer",
"&:hover": {
color: "#fff",
},
}, },
level3: { level3: {
color: "blue", color: "blue",
cursor: "pointer",
"&:hover": {
color: "#fff",
},
}, },
}), }),
); );
@ -71,6 +67,7 @@ function BitNodePortal(props: IPortalProps): React.ReactElement {
if (props.level === 2) { if (props.level === 2) {
cssClass = classes.level2; cssClass = classes.level2;
} }
cssClass = `${classes.portal} ${cssClass}`
return ( return (
<> <>
@ -85,9 +82,13 @@ function BitNodePortal(props: IPortalProps): React.ReactElement {
</Typography> </Typography>
} }
> >
<span onClick={() => setPortalOpen(true)} className={cssClass} aria-label={`enter-bitnode-${bitNode.number.toString()}`}> <IconButton
<b>O</b> onClick={() => setPortalOpen(true)}
</span> className={cssClass}
aria-label={`enter bitnode ${bitNode.number.toString()}`}
>
O
</IconButton>
</Tooltip> </Tooltip>
<PortalModal <PortalModal
open={portalOpen} open={portalOpen}