From 05ff0910bf6e12959c8dcdab21dda31c1cc6af65 Mon Sep 17 00:00:00 2001
From: Rene Pfeuffer <rene.pfeuffer@cloudogu.com>
Date: Tue, 19 Nov 2024 15:59:33 +0100
Subject: [PATCH] Fix accessibility for import modes in import dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pushed-by: Rene Pfeuffer<rene.pfeuffer@cloudogu.com>
Co-authored-by: René Pfeuffer<rene.pfeuffer@cloudogu.com>
---
 .../changelog/accessibility_import_type.yaml  |  2 +
 .../base/forms/radio-button/RadioButton.tsx   |  6 +--
 .../src/repos/components/ImportTypeSelect.tsx | 43 ++++++-------------
 3 files changed, 17 insertions(+), 34 deletions(-)
 create mode 100644 gradle/changelog/accessibility_import_type.yaml

diff --git a/gradle/changelog/accessibility_import_type.yaml b/gradle/changelog/accessibility_import_type.yaml
new file mode 100644
index 0000000000..e1e786e772
--- /dev/null
+++ b/gradle/changelog/accessibility_import_type.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: Accessibility for import modes in import dialog
diff --git a/scm-ui/ui-core/src/base/forms/radio-button/RadioButton.tsx b/scm-ui/ui-core/src/base/forms/radio-button/RadioButton.tsx
index 9c5332df6f..3f584a66c0 100644
--- a/scm-ui/ui-core/src/base/forms/radio-button/RadioButton.tsx
+++ b/scm-ui/ui-core/src/base/forms/radio-button/RadioButton.tsx
@@ -86,7 +86,7 @@ const RadioButton = React.forwardRef<HTMLButtonElement, Props>(
     const labelKey = `${context?.prefix}.radio.${value}`;
 
     return (
-      <label className={classNames("radio is-flex is-align-items-center", labelClassName)} htmlFor={inputId}>
+      <div className={classNames("radio is-flex is-align-items-center", labelClassName)}>
         <StyledRadioButton
           form={context?.formId}
           id={inputId}
@@ -98,9 +98,9 @@ const RadioButton = React.forwardRef<HTMLButtonElement, Props>(
         >
           <StyledIndicator className={indicatorClassName} />
         </StyledRadioButton>
-        {label ?? context?.t(labelKey) ?? value}
+        <label htmlFor={inputId}>{label ?? context?.t(labelKey) ?? value}</label>
         {helpText ? <Help className="ml-3" text={helpText} /> : null}
-      </label>
+      </div>
     );
   }
 );
diff --git a/scm-ui/ui-webapp/src/repos/components/ImportTypeSelect.tsx b/scm-ui/ui-webapp/src/repos/components/ImportTypeSelect.tsx
index d0ab466f38..2a35b1cc6b 100644
--- a/scm-ui/ui-webapp/src/repos/components/ImportTypeSelect.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/ImportTypeSelect.tsx
@@ -16,9 +16,8 @@
 
 import React, { FC } from "react";
 import { Link, RepositoryType } from "@scm-manager/ui-types";
-import { LabelWithHelpIcon, Radio } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
+import { RadioGroup, RadioGroupField } from "@scm-manager/ui-core";
 
 type Props = {
   repositoryType: RepositoryType;
@@ -27,39 +26,21 @@ type Props = {
   disabled?: boolean;
 };
 
-const RadioGroup = styled.div`
-  label {
-    margin-right: 2rem;
-  }
-`;
-
 const ImportTypeSelect: FC<Props> = ({ repositoryType, importType, setImportType, disabled }) => {
   const [t] = useTranslation("repos");
 
-  const changeImportType = (checked: boolean, name?: string) => {
-    if (name && checked) {
-      setImportType(name);
-    }
-  };
-
   return (
-    <>
-      <LabelWithHelpIcon label={t("import.importTypes.label")} key="import.importTypes.label" />
-      <RadioGroup>
-        {(repositoryType._links.import as Link[]).map((type, index) => (
-          <Radio
-            name={type.name}
-            checked={importType === type.name}
-            value={type.name}
-            label={t(`import.importTypes.${type.name}.label`)}
-            helpText={t(`import.importTypes.${type.name}.helpText`)}
-            onChange={changeImportType}
-            key={index}
-            disabled={disabled}
-          />
-        ))}
-      </RadioGroup>
-    </>
+    <RadioGroupField label={t("import.importTypes.label")} onValueChange={setImportType} disabled={disabled}>
+      {(repositoryType._links.import as Link[]).map((type) => (
+        <RadioGroup.Option
+          checked={importType === type.name}
+          value={type.name || ""}
+          label={t(`import.importTypes.${type.name}.label`)}
+          helpText={t(`import.importTypes.${type.name}.helpText`)}
+          key={type.name}
+        />
+      ))}
+    </RadioGroupField>
   );
 };