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

Connect labels with their respective inputs for improved accessibility

Browse Source 
Committed-by: Florian Scholdei <florian.scholdei@cloudogu.com>
This commit is contained in:
Konstantin Schaper
2023-03-21 10:14:11 +01:00
committed by SCM-Manager
parent 2198049cbd
commit 1d0baf48e2
5 changed files with 45 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
scm-ui/ui-forms/src/input/InputField.tsx
View File

@@ -29,6 +29,7 @@ import Label from "../base/label/Label";
import FieldMessage from "../base/field-message/FieldMessage";
import Input from "./Input";
import Help from "../base/help/Help";
import { useGeneratedId } from "@scm-manager/ui-components";
type InputFieldProps = {
label: string;
@@ -41,16 +42,17 @@ type InputFieldProps = {
* @see https://bulma.io/documentation/form/input/
*/
const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
({ label, helpText, error, className, ...props }, ref) => {
({ label, helpText, error, className, id, ...props }, ref) => {
const inputId = useGeneratedId(id ?? props.testId);
const variant = error ? "danger" : undefined;
return (
<Field className={className}>
<Label>
<Label htmlFor={inputId}>
{label}
{helpText ? <Help className="ml-1" text={helpText} /> : null}
</Label>
<Control>
<Input variant={variant} ref={ref} {...props}></Input>
<Input variant={variant} ref={ref} id={inputId} {...props}></Input>
</Control>
{error ? <FieldMessage variant={variant}>{error}</FieldMessage> : null}
</Field>