Bug 1831087 - Storage persistent volume claim form inputs need proper labels
Summary: Storage persistent volume claim form inputs need proper labels
Alias: None
Product: OpenShift Container Platform
Classification: Red Hat
Component: Management Console
Version: 4.5
Hardware: Unspecified
OS: Unspecified
Target Milestone: ---
: 4.5.0
Assignee: Jessie
QA Contact: Yadan Pei
Depends On:
TreeView+ depends on / blocked
Reported: 2020-05-04 15:52 UTC by Jessie
Modified: 2020-07-13 17:35 UTC (History)
6 users (show)

Fixed In Version:
Doc Type: If docs needed, set a value
Doc Text:
Clone Of:
Last Closed: 2020-07-13 17:34:48 UTC
Target Upstream Version:

Attachments (Terms of Use)
Persistent volume claim form error (188.53 KB, image/png)
2020-05-04 15:52 UTC, Jessie
no flags Details
pvcform-error (132.87 KB, image/png)
2020-05-11 08:56 UTC, Yanping Zhang
no flags Details

System ID Private Priority Status Summary Last Updated
Github openshift console pull 5286 0 None closed Bug 1831087: Storage persistent volume claim form inputs need proper labels 2020-06-24 01:34:59 UTC
Red Hat Product Errata RHBA-2020:2409 0 None None None 2020-07-13 17:35:11 UTC

Description Jessie 2020-05-04 15:52:11 UTC
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:

Comment 3 Yanping Zhang 2020-05-11 08:55:26 UTC
Checked on ocp 4.5 cluster with payload 4.5.0-0.nightly-2020-05-10-231314.
On create pvc form, using axe to analyze, there is still "Form elements must have labels" error, and no new label is added for input node. Pls refer to the attachment.

Comment 4 Yanping Zhang 2020-05-11 08:56:11 UTC
Created attachment 1687204 [details]

Comment 5 bpeterse 2020-05-26 13:23:11 UTC
Devs cannot reproduce, can we do one more QE pass?

Comment 6 shahan 2020-05-27 08:38:50 UTC
On create pvc form, using axe to analyze, there is no “Form elements must have labels” error

Comment 7 errata-xmlrpc 2020-07-13 17:34:48 UTC
Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.

For information on the advisory, and where to find the updated
files, follow the link below.

If the solution does not work for you, open a new bug report.


Note You need to log in before you can comment on or make changes to this bug.