Some form elements are missing a label.

XMLWordPrintable

    • 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

      Source

      			<Form.Label>Number</Form.Label>
      			<input
      				className="form-control"
      				placeholder="Enter a value"
      				type="text"
      				value={value || ''}
      				onChange={onHandleChange}
      			/>

      Source

      		<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. 

            Assignee:
            Unassigned
            Reporter:
            hocu
            Votes:
            1 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:

                Version Package