¿Puede ajustar elementos de formulario como <label> y <input> en la etiqueta HTML <button>?

Estoy creando un componente que requiere ocultar la entrada agregando una propiedad css de opacidad a 0. Pero el aspecto de este componente es un botón. La razón para ocultar la entrada es para fines de selección. El elemento de entrada admite el tipo de radio.

Pregunta1: ¿Cuáles son las implicaciones de ajustar un botón alrededor de los elementos del formulario? ¿Hay algún problema de accesibilidad? Pregunta2: En lugar de una etiqueta <button>, ¿es mejor usar quizás una <fieldset>?

A continuación se muestra la plantilla Vue para el componente?

<template>
    <button :class="[$style['button-group-item'], sizeClass, classObject, variationClass]">
        <label class='button-group-item__label'>
            <input class="button-group-item__input" type="radio" :checked="checked" @change="$emit('change', $event.target.checked)"/>
            <span>
                {{ text }}
            </span>
        </label>
    </button>
</template>