[user_status] Improve user online status modal

[susnux]

• Resolves: [BITV] 9.4.1.2/2.5 - "Online status" Modal Dialog - The status buttons such as "In a meeting" have not been implemented as buttons using HTML button element or ARIA role="button," but rather as focusable div elements. Instead of buttons, one could use radio buttons, for example. (1) #37097

Summary

1. Fix the predefined statuses buttons to implement a role (radio)¹ instead of being just tabable divs
   • Also set role to radiogroup of list container to group the predefined statuses
   • ¹Use native radio buttons
2. Group custom message input elements and assign label to emoji selector
3. Add missing radiogroup role to online status selector

TODO

For 1: I have also created a commit where I use real radio buttons (in the background) for the predefined statuses, so the question is should I push it here too? Do we want native radio buttons instead? What do you think @Pytal @JuliaKirschenheuter ?

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Screenshots before/after for front-end changes no visual changes
• Backports requested where applicable (ex: critical bugfixes)

[Pytal]

Let's go with real radio inputs @susnux as it's the recommended way https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role#sect1 :)

[susnux]

@Pytal OK done (see last commit)

[susnux]

/compile

[nickvergessen]

Can we have before and after screenshots?

[Antreesy]

No visual changes (before => after), except for one:

• when selected 'button' is not in focus, it now keep selected styles

No blocking changes, except for redundant class

[Antreesy]

And please rebuild

[susnux]

/compile

[Antreesy]

🦭

[susnux]

rebased