️ (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

View File

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