Adjust the radio button design to the Drupal Design system

woops apologies @bnjmnm forgot to add that to the initial issue summary. I've just tested with an out of the box core-recommended install of Drupal 9.4 with Claro as the admin theme. I'll update the IS alongside.

I've installed a fresh version of Drupal 9.5 with project_browser 1.0.x-dev@dev. There the changes from #3294763: There is no space between the focus outlines of radio button and label in recommended filters. are already committed and in effect I assume. Since I finally got my local dev environment running on my new computer I was also able to also check the latest Safari version. The results:

Safari 15.6: no focus outlines visible at all
Firefox 102.0.1: still the same result like in the firefox_cropped screenshot
Edge 103.0.1264.62: tested with edge instead of chrome but both are blink based and so the result is indentical. the focus outline is a square like in the chrome_square screenshot.

So it is still an issue. Particular with Safari not showing any focus outline (I was unable to test before because with the old version of Safari I had on High Sierra project browser wasn't working at all - an indefinite loading spinner with no project cards loaded)

I guess it might be actually a square with a border-radius applied to it. I am not a css dev - but it would have been odd if in blink browsers the outline is displayed as a square while in firefox it would be a circle. Based on your thought I've increased the second pixel value from 5 to 15px:

box-shadow: 0 0 0 2px #fff, 0 0 0 15px #26a769;

and there it looks like a confirmation to your suspicion @tinto.

I've initially noticed the issue about the radiobuttons due to the differing display of focus outlines. But the issue should be about the design of the radio buttons in general. Because the radio buttons have a general styling that differs from the Drupal Design System as well. I am updating the issue title as well as the issue summary accordingly.

i've applied MR470 locally. If you take a look at the radio button section first on https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/💧-Drupal-Design-system?type=design&node-id=553-0&mode=design&t=fKFt7DZuX3hQR6Ts-0 and then in gitpod or in your local instance you will notice that there is a divergence. :/

in safari you notice for example that the radio element has only a height of 12x12 , the goal should be 19x19 according to the drupal design system. styling wise it also differs, the center for selected radio buttons are filled in blue then a white ring then another blue one, plus the focus outline is completely missing in safari 17.4.1 on macos 14.4.1.

in edge the element is one pixel "bigger" compared to safari with 13x13. the styling has the same problems like in safari only difference the color is greyish instead of blueish.

and the focus outline is visible in edge, the styling is also not inline with the design system. the outline is a rectangle but it should be a circle according to the figma file:

uhhh took another look after @chrisfromredfin mentioned the issue on slack. i thought it wouldnt be needed after MRs were successfully applied, but somehow none of the changes were in place still. but running yarn install and yarn build did the trick. completely forgot about that :( but all the changes look good now and setting to rtbc