Conditionally shown required text input fields broken

When creating a conditionally shown required text input field, it is impossible to finish the order if it is hidden (and empty).

This seems to be because of browser-level validation which is still active for fields that are hidden.

I got it to work with this LLM-assisted code:

export function applyVisibility( fieldEl, visible ) {
	if ( visible ) {
		fieldEl.classList.remove( 'pkset-hidden' );
	} else {
		fieldEl.classList.add( 'pkset-hidden' );
	}

	// Native browser validation runs before the form's submit handler.
	// A required control inside a hidden field can therefore block submission.
	const controls = fieldEl.querySelectorAll(
		'input, select, textarea'
	);

	controls.forEach( ( control ) => {
		// Remember the original required state so it can be restored.
		if (
			! control.hasAttribute( 'data-pkset-original-required' ) &&
			control.required
		) {
			control.setAttribute(
				'data-pkset-original-required',
				'yes'
			);
		}

		if ( ! visible ) {
			control.required = false;
		} else if (
			control.getAttribute( 'data-pkset-original-required' ) ===
			'yes'
		) {
			control.required = true;
		}
	} );
}