Bug 1830378

Summary: Query input needs accessible label on metrics page
Product: OpenShift Container Platform Reporter: Jessie <jhuff>
Component: Management ConsoleAssignee: Jessie <jhuff>
Status: CLOSED ERRATA QA Contact: Yadan Pei <yapei>
Severity: medium Docs Contact:
Priority: unspecified    
Version: 4.5CC: aos-bugs, jokerman, spadgett, yapei
Target Milestone: ---   
Target Release: 4.5.0   
Hardware: Unspecified   
OS: Unspecified   
Whiteboard:
Fixed In Version: Doc Type: If docs needed, set a value
Doc Text:
Story Points: ---
Clone Of: Environment:
Last Closed: 2020-07-13 17:34:13 UTC Type: Bug
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: --- RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: --- Target Upstream Version:
Embargoed:
Attachments:
Description Flags
Metrics query input field
none
no errors in axe tab none

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.

https://access.redhat.com/errata/RHBA-2020:2409