Fix radio buttons screenreader output

Refs: #7223
public-ui · Feb 27, 2025 · e4e1268 · e4e1268
1 parent 2ac88b7
commit e4e1268
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git 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
@@ -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>
 	);
 });