hi @EUdoh-WMF

From my understanding, the Firefox and Chrome are actually correct and the safari one is wrong.

When you click on a radio button, the input is actually "focused" so it will show the focus/selected state. If you click away from the radio then this will show the default selected that safari is currently showing.

Impact:

• Is this impacting anyone who is using Codex currently?
  • Potentially Growth is using this? Not sure. @DAbad to follow-up

• What components, if any, are impacted?
  • TAHS is NOT impacted

• Is this blocking something?

@Sarai-WMDE @bmartinezcalvo Any chance you can clarify if my comment above is correct please and what do you expect to be the behaviour when the radio is clicked.

I have investigated this further and can confirm that the issue raised here is expected on Safari and it is a duplicate of the this story: https://phabricator.wikimedia.org/T310394

Summary: Safary does NOT emit Focus event on input fields. I have investigated and can confirm that this is also happening for <inout type="radio" />

In T309949#8010355, @SimoneThisDot wrote:

@Sarai-WMDE @bmartinezcalvo Any chance you can clarify if my comment above is correct please and what do you expect to be the behaviour when the radio is clicked.

@SimoneThisDot right, our current implementation in Codex in all our components is that when you click in some component this component shows the focus state. We can find this behavior in all our clickable components, such as buttons or checkbox:

I think this is the right and logical behavior for our radio buttons too.

Problem

The problem with our radio buttons is that the selected state paints the entire radio bg in blue and as the focus is blue too, we need to paint the focus-selected inside the circle border instead of around the border (as we do in the focus-default state).

Solution

I think the solution here would be to redesign our radio selected states painting the circle inside the radio instead of the entire radio bg. With this solution we could have the same focus with 2px border in both focus-selected and focus-default states.

I would do the following:

1. Implement the Codex demo with the default-selected showing the focus-selected state
2. Create a new task to update our selected radios with this new solution explained above

What do you think?

@SimoneThisDot @EUdoh-WMF apart from the default selected state, I've detected that the active state is wrong implemented in Codex since it doesn't match our Figma spec sheet so I've created this new task T311209 to fix it.