Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-12 00:15:44 +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/select/SelectField.tsx
View File

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