️ (Bitverse UI: Portal Button Accessibility) Add aria-description, change labels, accomodate disabled ASCII art.

Adds aria-description and corrects labels to be more clear about the results of
pressing buttons.
This commit is contained in:
ChrissiQ 2022-02-20 18:34:43 -07:00
parent cf0c4510c4
commit 3cfbf0708b

@ -86,17 +86,19 @@ function BitNodePortal(props: IPortalProps): React.ReactElement {
}
>
{Settings.DisableASCIIArt ? (
<>
<Button onClick={() => setPortalOpen(true)} sx={{ m: 2 }} aria-label={`enter-bitnode-${bitNode.number.toString()}`}>
<Typography>Enter Bitnode {bitNode.number.toString()}</Typography>
<Button
onClick={() => setPortalOpen(true)}
sx={{ m: 2 }}
aria-description={bitNode.desc}
>
<Typography>BitNode-{bitNode.number.toString()}: {bitNode.name}</Typography>
</Button>
<br/>
</>
) : (
<IconButton
onClick={() => setPortalOpen(true)}
className={cssClass}
aria-label={`enter bitnode ${bitNode.number.toString()}`}
aria-label={`BitNode-${bitNode.number.toString()}: ${bitNode.name}`}
aria-description={bitNode.desc}
>
O
</IconButton>
@ -111,6 +113,10 @@ function BitNodePortal(props: IPortalProps): React.ReactElement {
destroyedBitNode={props.destroyedBitNode}
flume={props.flume}
/>
{Settings.DisableASCIIArt && (
<br/>
)}
</>
);
}