Bug 1831758 - Search page inputs need proper label
Summary: Search page inputs need proper label
Keywords:
Status: CLOSED ERRATA
Alias: None
Product: OpenShift Container Platform
Classification: Red Hat
Component: Management Console
Version: 4.5
Hardware: Unspecified
OS: Unspecified
unspecified
medium
Target Milestone: ---
: 4.5.0
Assignee: Jessie
QA Contact: Yadan Pei
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2020-05-05 15:07 UTC by Jessie
Modified: 2020-07-13 17:35 UTC (History)
4 users (show)

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


Attachments (Terms of Use)
Search input error (151.91 KB, image/png)
2020-05-05 15:07 UTC, Jessie
no flags Details


Links
System ID Private Priority Status Summary Last Updated
Github openshift console pull 5369 0 None closed Bug 1831758: Search page inputs need proper label 2020-06-24 01:40:52 UTC
Red Hat Product Errata RHBA-2020:2409 0 None None None 2020-07-13 17:35:20 UTC

Description Jessie 2020-05-05 15:07:57 UTC
Created attachment 1685260 [details]
Search input error

Description of problem:
On multiple pages, the search input field 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. 

It gives the following axe error:
{
    "data": null,
    "id": "aria-label",
    "impact": "serious",
    "message": "aria-label attribute does not exist or is empty",
    "relatedNodes": [
      {
        "html": "<input placeholder="app=frontend" name="search-filter-input" id="search-filter-input" class="pf-c-form-control" type="text" aria-invalid="false" value="">"
      }
    ]
  }

This error appears on the following pages: 
http://localhost:9000/search
http://localhost:9000/search/ns/default?kind=Pod&q=app%3Dnginx
http://localhost:9000/search?kind=StatefulSet&q=app%3Dhello
http://localhost:9000/search?kind=StatefulSet&q=name%3Dhello
http://localhost:9000/search/ns/default?kind=Pod&q=app%3Dhello
http://localhost:9000/search?kind=Service&q=component%3Dapiserver
http://localhost:9000/search?kind=Service&q=provider%3Dkubernetes
http://localhost:9000/search?kind=Namespace&q=istio-injection%3Denabled
http://localhost:9000/search?kind=Namespace&q=serving.knative.dev%2Frelease%3Dv0.13.1
http://localhost:9000/search?kind=Namespace&q=olm.operatorgroup/openshift-monitoring.openshift-cluster-monitoring
http://localhost:9000/search?kind=Namespace&q=openshift.io%2Fcluster-monitoring%3Dtrue
http://localhost:9000/search?kind=Namespace&q=openshift.io%2Frun-level%3D1
http://localhost:9000/search?kind=Namespace&q=openshift.io%2Frun-level%3D0
http://localhost:9000/search?kind=Namespace&q=controller-tools.k8s.io%3D1.0
http://localhost:9000/search?kind=Namespace&q=name%3Dopenshift-cluster-version

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

Steps to Reproduce:
1. Issue occurs on a number of pages, but an example page is on the main search page (http://localhost:9000/search/ns/defaults)
2. Inspect the page and go to the axe tab.
3. Click "Analyze" - this issue is the one that says, "Form elements must have labels"

Actual results:
Multiple search input fields that are inaccessible for screen readers.

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

Comment 1 Jessie 2020-05-08 18:17:35 UTC
Trying to determine the best variation between the options, PR will be opened soon

Comment 4 Yanping Zhang 2020-05-13 03:43:43 UTC
Checked on ocp 4.5 cluster with payload 4.5.0-0.nightly-2020-05-12-191228.
Go to search page search/ns/defaults. Inspect the page and go to the axe tab. Click "Analyze", there is no issue "Form elements must have labels" now.
Check the input box for lable/name, it has new label: aria-labelledby="toggle-id"
The bug is fixed, so move it to Verified.

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


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