ToggleButton: refactor to use correct semantic elements to enhance screen reader UX

[tujoworker]

Our ToggleButtons can be used in various variants. And the screen reader support is fine as well.

• Its read out as a toggle button by e.g. VO (by using aria-pressed).
• Also the "state" is read out correctly (by using aria-checked).
• And they are accessible with the tab key. Which is debatable if that is wanted or not.

But there are some issues that can be solved with a refactor:

• Semantically, we can't use e.g. aria-required, which is only allowed on type="input" elements. So axe tests do fail. Even e.g. VO does read them out correctly.
• When only one ToggleButton can be selected at a time type="radio", maybe, it should also behave like a radio button group? So a arrow key would be used to change the value, instead focus and enter/space.

I think, the last point is highly debatable, because, we should probably not change the user input behavior for when the component "looks" the same.

Also, it looks more like a button, so I would argue, that a user wants to use the tab key to access these buttons, instead of a arrow key.

A quick solution, to make aria-required be acceptable, is to change:

• aria-pressed to aria-checked
• and add these three attributes to the button component:

<Button
  role="checkbox"
  type="checkbox"
  element="span"
  ...
/>

This makes aria-required to be accepted by axe. But now VO reads the "toggle button" out as a checkbox. Which is in my opinion not a good move. But again, debatable.