From e4e126882c4dcd04df38cc73d22eb8687e9416c0 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Thu, 27 Feb 2025 14:58:17 +0100
Subject: [PATCH] Fix radio buttons screenreader output

Refs: #7223
---
 .../functional-components/FormField/FormField.tsx  |  6 +-----
 .../components/input-radio/partials/variants.tsx   | 14 ++++++++------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/functional-components/FormField/FormField.tsx b/packages/components/src/functional-components/FormField/FormField.tsx
index 9879594254..fef742a6ef 100644
--- a/packages/components/src/functional-components/FormField/FormField.tsx
+++ b/packages/components/src/functional-components/FormField/FormField.tsx
@@ -124,11 +124,7 @@ const KolFormFieldFc: FC<FormFieldProps> = (props, children) => {
 	}
 
 	return (
-		<Component
-			class={clsx('kol-form-field', stateCssClasses, classNames)}
-			role={`presentation` /* Avoid element being read as 'clickable' in NVDA */}
-			{...other}
-		>
+		<Component class={clsx('kol-form-field', stateCssClasses, classNames)} {...other}>
 			{showLabel && (
 				<KolFormFieldLabelFc
 					{...(formFieldLabelProps || {})}
diff --git a/packages/samples/react/src/components/input-radio/partials/variants.tsx b/packages/samples/react/src/components/input-radio/partials/variants.tsx
index 8542f51704..674ec0bdd2 100644
--- a/packages/samples/react/src/components/input-radio/partials/variants.tsx
+++ b/packages/samples/react/src/components/input-radio/partials/variants.tsx
@@ -4,17 +4,19 @@ import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { KolHeading } from '@public-ui/react';
+
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>Radio</legend>
+			<div className="border border-solid border-dark-100 p-3">
+				<KolHeading _level={2} _label="Radio" className="block mb-2" />
 				<InputRadioCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Radio (hideLabel)</legend>
+			</div>
+			<div className="border border-solid border-dark-100 p-3">
+				<KolHeading _level={2} _label="Radio (hideLabel)" className="block mb-2" />
 				<InputRadioCases ref={ref} {...props} _hideLabel />
-			</fieldset>
+			</div>
 		</SampleColumns>
 	);
 });