Fix predefined status buttons

[JuliaKirschenheuter]

• Resolves: [BITV] Increase contrast on focus state of "Status Message"  #39926

Summary

• Add logic for predefined status to be visible.
• Add styles for radio buttons to be visible in checked, active and focus-visible state.
• Styles are same as for online status radio buttons Set double outline on checked state for radio buttons #39332

Before	After

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[jancborchardt]

@marcoambrosini what do you think of the style?

[marcoambrosini]

I think that the border is fine, but I think we should put the radio button symbol too @JuliaKirschenheuter
I'm afraid that we're confusing people a lot with these radio buttons that don't look like radios.

[JuliaKirschenheuter]

I'm afraid that we're confusing people a lot with these radio buttons that don't look like radios.

yes, i'm agree that this buttons are not really radio buttons. But let them be radio buttons for now. We had only an issue that they are not really recognizable.

I think that the border is fine, but I think we should put the radio button symbol too

I think then it will be lots of "flashing elements". A11y-wise it is not required.

If border is ok - could we leave it like this for now? All improvements we can do afterwards

[marcoambrosini]

@JuliaKirschenheuter let's add a normal border radius and get this in, going forward I think we should add the radio button (which is now .hidden-visually) to all radio buttons

[JuliaKirschenheuter]

@JuliaKirschenheuter let's add a normal border radius and get this in

do you mean the same border radius like in "online status"?

[marcoambrosini]

do you mean the same border radius like in "online status"?

Yes @JuliaKirschenheuter var(--border-radius-large)