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:
Created attachment 1686126 [details] no errors in axe tab
<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
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