Bug 1830378 - Query input needs accessible label on metrics page
Summary: Query input needs accessible label on metrics page
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-01 19:23 UTC by Jessie
Modified: 2020-07-13 17:34 UTC (History)
4 users (show)

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

Attachments (Terms of Use)
Metrics query input field (537.00 KB, image/png)
2020-05-01 19:23 UTC, Jessie
no flags Details
no errors in axe tab (552.78 KB, image/png)
2020-05-07 10:07 UTC, Yadan Pei
no flags Details

System ID Private Priority Status Summary Last Updated
Github openshift console pull 5266 0 None closed Bug 1830378: Query input needs accessible label on metrics page 2020-06-24 01:33:22 UTC
Red Hat Product Errata RHBA-2020:2409 0 None None None 2020-07-13 17:34:45 UTC

Description Jessie 2020-05-01 19:23:57 UTC
Created attachment 1683794 [details]
Metrics query input field

Description of problem:
The input field on the metrics page does not have an aria-label which can create issues for screen readers. While placeholder text provides valuable guidance for many users, placeholder text is not a replacement for labels. Assistive technologies, such as screen readers, do not treat placeholder text as labels. Placeholder text is also not broadly supported across assistive technologies. 

    "data": null,
    "id": "aria-label",
    "impact": "serious",
    "message": "aria-label attribute does not exist or is empty",
    "relatedNodes": [
        "html": "<textarea class="pf-c-form-control query-browser__query-input" placeholder="Expression (press Shift+Enter for newlines)" rows="2" spellcheck="false"></textarea>"

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

Steps to Reproduce:
1. Go to the metrics page under Monitoring: http://localhost:9000/monitoring/query-browser?query0=
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:
The input field on the metrics page does not have an accessible label.

Expected results:
Input fields that are properly labeled for assistive technology.

Additional info:

Comment 3 Yadan Pei 2020-05-07 10:07:58 UTC
Created attachment 1686126 [details]
no errors in axe tab

Comment 4 Yadan Pei 2020-05-07 10:10:08 UTC
<div class="query-browser__query pf-c-dropdown">
<textarea aria-label="Expression (press Shift+Enter for newlines)" class="pf-c-form-control query-browser__query-input" placeholder="Expression (press Shift+Enter for newlines)" rows="2" spellcheck="false"></textarea>
<button aria-label="Clear Query" class="pf-c-button pf-m-plain query-browser__clear-icon" type="button"><svg fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" transform=""></path></svg></button></div>

Now query input has aria-label added, in axe tab we didn't see 'Form elements must have labels' error

Verified on 4.5.0-0.nightly-2020-05-06-003431

Comment 5 errata-xmlrpc 2020-07-13 17:34:13 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.