From 34b54ffc5a85ad55d9d4615ad7b3a216126bcf48 Mon Sep 17 00:00:00 2001
From: ChrissiQ <1127719+ChrissiQ@users.noreply.github.com>
Date: Thu, 17 Feb 2022 23:32:00 -0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20=20(Bitverse=20UI:=20Porta?=
 =?UTF-8?q?l=20Button=20Accessibility)=20Makes=20clickable=20element=20int?=
 =?UTF-8?q?o=20button.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/BitNode/ui/BitverseRoot.tsx | 35 +++++++++++++++++----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

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