We currently use a button as the primary element for toggle. This is generally correct, but it's not universal and convenient.

We need to use input type="checkbox" along with a label as the base element.

It has a cleaner separation of concerns, better component layout, is more scalable, works without JS, is native to forms (get toggle data from formData), and allows us to do more with CSS (incl. :has(input:checked))

It is important to keep focus behavior and update a11y tests