Bug 1831087

Created attachment 1684882 [details]
Persistent volume claim form error

Description of problem:
On the persistent volume claims form, the size inputs need proper labeling and association. The "Size" label has `for="request-size-input"` but there isn't an element with `id="request-size-input". In VO's rotor menu, neither the input or the dropdown have a clear description. The input field currently reads: "required invalid data stepper" and dropdown reads: "GiB collapsed popup menu". These are unclear for an assistive technology user to understand what these elements do.

The current implementation also shows the following axe error:
{
    "data": null,
    "id": "aria-label",
    "impact": "serious",
    "message": "aria-label attribute does not exist or is empty",
    "relatedNodes": [
      {
        "html": "<input class="pf-c-form-control" type="number" step="any" aria-describedby="request-size-help" name="requestSizeValue" required="" value="">"
      }
    ]
  }

The input field should be associated with the above label by adding the correct id (which will make the axe error go away since it will allow screen readers to see the connection between the label and the input) and an aria-label should be added to the dropdown so it's more descriptive.


How reproducible:
You can see this error by using the Axe Chrome Extension.

Steps to Reproduce:
1. Go to the Create Persistent Volume Claim form under Storage: http://localhost:9000/k8s/ns/default/persistentvolumeclaims/~new/form
2. Open developer tools, go to the axe tab, press analyze
3. Click on the issue "Form elements must have labels" for details.

Actual results:
Unclear readout of the size input field and dropdown and incorrect label/input association.

Expected results:
Clear description of what elements do for assistive technology.

Additional info: