From 5bc4da8ea58713f1e003e49c273a0d69a09f9870 Mon Sep 17 00:00:00 2001
From: JamalAlabdullah <jamal.mustafa.alabdullah@digdir.no>
Date: Mon, 4 May 2026 12:34:26 +0200
Subject: [PATCH] fix: fix radio buttons alignemnt in row and column mode
 (#4146)

* fix: fix radio buttons alignemnt in row and column mode

* refactor

* removed cn
---
 src/layout/RadioButtons/ControlledRadioGroup.tsx    | 13 +++++++------
 src/layout/RepeatingGroup/RepeatingGroup.module.css |  2 +-
 .../RepeatingGroup/Table/RepeatingGroupTableRow.tsx |  7 +------
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index 481598acef..5f82c115d4 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -77,6 +77,8 @@ export const ControlledRadioGroup = (props: PropsFromGenericComponent<'RadioButt
   );
 
   const hideLabel = overrideDisplay?.renderedInTable === true && calculatedOptions.length === 1 && !showLabelsInTable;
+  const renderLegend = overrideDisplay?.renderLegend !== false;
+  const fieldsetAriaLabel = !renderLegend ? langAsString(textResourceBindings?.title) : undefined;
   const shouldDisplayHorizontally = shouldUseRowLayout({
     layout,
     optionsCount: calculatedOptions.length,
@@ -93,12 +95,11 @@ export const ControlledRadioGroup = (props: PropsFromGenericComponent<'RadioButt
   return (
     <ComponentStructureWrapper baseComponentId={baseComponentId}>
       <div id={id}>
-        <Fieldset role='radiogroup'>
-          <Fieldset.Legend
-            className={cn(classes.legend, { [utilClasses.visuallyHidden]: overrideDisplay?.renderLegend === false })}
-          >
-            {labelText}
-          </Fieldset.Legend>
+        <Fieldset
+          role='radiogroup'
+          aria-label={fieldsetAriaLabel}
+        >
+          {renderLegend && <Fieldset.Legend className={classes.legend}>{labelText}</Fieldset.Legend>}
           {textResourceBindings?.description && (
             <Fieldset.Description
               className={cn({ [utilClasses.visuallyHidden]: overrideDisplay?.renderLegend === false })}
diff --git a/src/layout/RepeatingGroup/RepeatingGroup.module.css b/src/layout/RepeatingGroup/RepeatingGroup.module.css
index 70e8a54612..ae254d5ff5 100644
--- a/src/layout/RepeatingGroup/RepeatingGroup.module.css
+++ b/src/layout/RepeatingGroup/RepeatingGroup.module.css
@@ -49,7 +49,7 @@ Altinn, and making sure they are consistent. */
   border-bottom-color: #dde3e5;
   padding-top: 12px;
   padding-bottom: 12px;
-  vertical-align: top;
+  vertical-align: -webkit-baseline-middle;
 }
 /* ==== */
 
diff --git a/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx b/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
index 8e914c5d54..5ffb37e6c5 100644
--- a/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
+++ b/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
@@ -124,12 +124,7 @@ export function RepeatingGroupTableRow({
 
   return (
     <Table.Row
-      className={cn(
-        {
-          [classes.tableRowError]: rowHasErrors,
-        },
-        className,
-      )}
+      className={cn({ [classes.tableRowError]: rowHasErrors }, className)}
       data-row-num={index}
       data-row-uuid={uuid}
     >