Bug 1819206

Summary: Input Field Should Have Accessible Label
Product: OpenShift Container Platform Reporter: Jessie <jhuff>
Component: Management ConsoleAssignee: Jakub Hadvig <jhadvig>
Status: CLOSED ERRATA QA Contact: Yadan Pei <yapei>
Severity: medium Docs Contact:
Priority: unspecified    
Version: 4.5CC: aos-bugs, hasha, jokerman, spadgett
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:24:11 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
Input label error none

Description Jessie 2020-03-31 13:35:41 UTC 
Created attachment 1675063 [details]
Input label error

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

This issue became apparent in an axe accessibility test, and the following error showed more than 300 times: 
[
  {
    "data": null,
    "id": "aria-label",
    "impact": "serious",
    "message": "aria-label attribute does not exist or is empty",
    "relatedNodes": [
      {
        "html": "<input autocapitalize="none" class="pf-c-form-control co-text-filter" placeholder="Filter by name or display name..." tabindex="0" type="text" value="">"
      }
    ]
  }
]

The fix is very simple, it just needs `aria-label={placeholder}` in order for assistive technology to recognize it.

Version-Release number of selected component (if applicable):


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 projects page (k8s/cluster/projects)
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 input fields that are inaccessible for screen readers.

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

Additional info:
Comment 3 shahan 2020-04-01 04:41:22 UTC 
install Axe Chrome Extension, analyze the /projects page, there is no errors about "Form elements must have labels"
4.5.0-0.ci-2020-04-01-040845
Comment 6 errata-xmlrpc 2020-07-13 17:24:11 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