Merge pull request #3001 from ChrissiQ/bitnode-portal-button-a11y-fix

️  (Bitverse UI: Portal Button Accessibility) Makes clickable element into button.
This commit is contained in:
hydroflame 2022-03-01 10:50:59 -05:00 committed by GitHub
commit 94a6ba2c91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 136 additions and 74 deletions

@ -8,38 +8,37 @@ 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";
import { Settings } from "../../Settings/Settings";
import Button from "@mui/material/Button";
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 +70,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 +85,24 @@ function BitNodePortal(props: IPortalProps): React.ReactElement {
</Typography> </Typography>
} }
> >
<span onClick={() => setPortalOpen(true)} className={cssClass} aria-label={`enter-bitnode-${bitNode.number.toString()}`}> {Settings.DisableASCIIArt ? (
<b>O</b> <Button
</span> onClick={() => setPortalOpen(true)}
sx={{ m: 2 }}
aria-description={bitNode.desc}
>
<Typography>BitNode-{bitNode.number.toString()}: {bitNode.name}</Typography>
</Button>
) : (
<IconButton
onClick={() => setPortalOpen(true)}
className={cssClass}
aria-label={`BitNode-${bitNode.number.toString()}: ${bitNode.name}`}
aria-description={bitNode.desc}
>
O
</IconButton>
)}
</Tooltip> </Tooltip>
<PortalModal <PortalModal
open={portalOpen} open={portalOpen}
@ -98,6 +113,10 @@ function BitNodePortal(props: IPortalProps): React.ReactElement {
destroyedBitNode={props.destroyedBitNode} destroyedBitNode={props.destroyedBitNode}
flume={props.flume} flume={props.flume}
/> />
{Settings.DisableASCIIArt && (
<br/>
)}
</> </>
); );
} }
@ -151,6 +170,47 @@ export function BitverseRoot(props: IProps): React.ReactElement {
); );
} }
if (Settings.DisableASCIIArt) {
return (
<>
{Object.values(BitNodes).filter((node) => {
console.log(node.desc);
return node.desc !== 'COMING SOON';
}).map((node) => {
return (
<BitNodePortal key={node.number} n={node.number} level={nextSourceFileFlags[node.number]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />
)
})}
<br />
<br />
<br />
<br />
<CinematicText lines={[
"> Many decades ago, a humanoid extraterrestrial species which we call the Enders descended on the Earth...violently",
"> Our species fought back, but it was futile. The Enders had technology far beyond our own...",
"> Instead of killing every last one of us, the human race was enslaved...",
"> We were shackled in a digital world, chained into a prison for our minds...",
"> Using their advanced technology, the Enders created complex simulations of a virtual reality...",
"> Simulations designed to keep us content...ignorant of the truth.",
"> Simulations used to trap and suppress our consciousness, to keep us under control...",
"> Why did they do this? Why didn't they just end our entire race? We don't know, not yet.",
"> Humanity's only hope is to destroy these simulations, destroy the only realities we've ever known...",
"> Only then can we begin to fight back...",
"> By hacking the daemon that generated your reality, you've just destroyed one simulation, called a BitNode...",
"> But there is still a long way to go...",
"> The technology the Enders used to enslave the human race wasn't just a single complex simulation...",
"> There are tens if not hundreds of BitNodes out there...",
"> Each with their own simulations of a reality...",
"> Each creating their own universes...a universe of universes",
"> And all of which must be destroyed...",
"> .......................................",
"> Welcome to the Bitverse...",
"> ",
"> (Enter a new BitNode using the image above)",
]} />
</>
)
} else {
return ( return (
// prettier-ignore // prettier-ignore
<> <>
@ -208,6 +268,6 @@ export function BitverseRoot(props: IProps): React.ReactElement {
]} /> ]} />
</> </>
); );
}
return <></>; return <></>;
} }

@ -43,6 +43,8 @@ export function PortalModal(props: IProps): React.ReactElement {
<br /> <br />
<br /> <br />
<Button <Button
aria-label={`enter-bitnode-${bitNode.number.toString()}`}
autoFocus={true}
onClick={() => { onClick={() => {
props.enter(router, props.flume, props.destroyedBitNode, props.n); props.enter(router, props.flume, props.destroyedBitNode, props.n);
props.onClose(); props.onClose();