Change the checkbox to radio on the profile chooser box

[nloureiro]

We got a suggestion from "RomoPuma" (if you have a Github profile, please add it) on discord (https://discord.com/channels/714888181740339261/951053072258453574/999409307953143932)to change The checkboxes on the personas box to radio-style buttons.

Here are some screenshots of the change.

[gatsby-cloud[bot]]

Gatsby Cloud Build Report

ethereum-org-website-dev

:tada: Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

:clock1: Build time: 12m

[filtelescu]

RomoPuma here (also updated my 'about me' on Discord as a verification) -- Looks great!

I noticed there's a slight fade animation on the radio button between states on the deploy (when selecting 'New to crypto' or going from one profile filter to another), not sure if that's supposed to be there or not considering on live the transition is instant.

Super dope :)

[nloureiro]

yes. actually was on purpose. I think it improves awareness of the "different" radio button. I think the only downside of this change is awareness. You were right, this is a radio button behavior but in a different look/style/appearance. The check mark would try to make it more obvious. with the animation, I'm trying to gain a bit of the sense that something happen without removing the focus or usability.

I can reduce the time, it's a 1,5s transition.

[filtelescu]

Understandable, you're definitely right that the check mark makes the selection more obvious. I do think reducing the time slightly could help keep it consistent with the snappiness of the rest of the interface while still acting as a clear indicator.

The best of both worlds 😎

[corwintines]

I'm going to do some playing around to include an input radio button as well @nloureiro.

[corwintines]

@minimalsm I think this should fix up the regression in screen reader functionality. @nloureiro @filtelescu any feedback welcome as well.

[minimalsm]

For context, this was some discussion behind the scenes:

• Not blocking this PR but wanted to highlight we’re doing something unusual with radio buttons here
  • A radio button typically can only be selected, and after one radio button has been selected, another must be selected to unselect the previous (the default state of none selected cannot be re-achieved)
  • In the current implementation, only one option can be chosen, but we also deselect it (so it essentially behaves kinda like a checkbox, kinda like a radio button)
  • This might be a headache if we decide to implement Chakra’s Checkbox component