Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-01-07 16:12:10 +01:00
Code Issues Packages Projects Releases Activity

Fix accessibility for import modes in import dialog

Browse Source 
Pushed-by: Rene Pfeuffer<rene.pfeuffer@cloudogu.com>
Co-authored-by: René Pfeuffer<rene.pfeuffer@cloudogu.com>
This commit is contained in:
Rene Pfeuffer
2024-11-19 15:59:33 +01:00
parent 265ba2151a
commit 05ff0910bf
3 changed files with 17 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gradle/changelog/accessibility_import_type.yaml Normal file
View File

@@ -0,0 +1,2 @@
- type: fixed
description: Accessibility for import modes in import dialog

6
scm-ui/ui-core/src/base/forms/radio-button/RadioButton.tsx
View File

@@ -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>
);
}
);

43
scm-ui/ui-webapp/src/repos/components/ImportTypeSelect.tsx
View File

@@ -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>
);
};