Fix too low contrast in subtitles for selected RadioGroup.Radios

[acelaya]

This PR fixes an accessibility issue in RadioGroup component, where the contrast between the text color used in subtitles and the background color used in selected radios, is too low.

In order to fix it, we now set a darker shade of grey in the subtitles when the radio is hovered or selected.

See before and after:

Additionally, selected and hover radio background color is now set with an opacity lower than 100%. This ensures there's always a different color for those, even if the container's background color is the same as the color used for selected radios.

See how they look when the container has the former background color:

Before:

radio-no-alpha-2024-09-03_12.13.11.mp4

After:

radio-alpha-2024-09-03_12.13.44.mp4

[acelaya]

axe-core catched the accessibility issue in other project, but we were missing a test with selected radios.

These tests fail in main.

[robertknight]

On macOS the thinner font looks like:

An alternative would be to make the text one shade darker when the radio is selected or hovered:

On my system I think I find this a little easier to read.

[acelaya]

An alternative would be to make the text one shade darker when the radio is selected or hovered

I actually thought about this, but forgot to test it! Let me try that.

[acelaya]

On macOS the thinner font looks like:

An alternative would be to make the text one shade darker when the radio is selected or hovered: On my system I think I find this a little easier to read.

Yeah, I think this is a better solution. I have changed it.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (6b219d8) to head (9d2a378).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1695   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           66        66           
  Lines         1114      1115    +1     
  Branches       434       435    +1     
=========================================
+ Hits          1114      1115    +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[robertknight]

LGTM