-
Type:
Bug
-
Resolution: Unresolved
-
Priority:
Normal
-
None
-
Affects Version/s: None
-
Component/s: Site Interface
-
None
Labelling the form inputs is a crucial prerequisite of accessible forms, please see Text labels and names on MDN. However, some of the form elements are missing relevant labels, or the added labels were not associated with the relevant input.
Some examples
<Form.Label>Number</Form.Label> <input className="form-control" placeholder="Enter a value" type="text" value={value || ''} onChange={onHandleChange} />
<Col lg={2}>
<input
className="form-control"
placeholder="Enter value..."
type="text"
value={_.find(value.attributes, {attributeType: 2})?.value.textValue || ''}
onChange={handleNumberAttributeChange.bind(this, value.rowID)}
/>
</Col>
Possible solutions
FormGroup component could be used to associate an ID with the label and the inputs.
htmllFor prop could be used for the labels where a FormGroup component is not used.
If the label needs to be invisible, a visuallyHidden prop could be added to the label.