Bug 1831741

Created attachment 1685246 [details]
Operator Hub input error

Description of problem:
On the operator hub and catalog 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 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="Filter by keyword..." type="text" class="co-catalog-page__input pf-c-form-control" value="">"
      }
    ]
  }

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. Go to http://localhost:9000/operatorhub or http://localhost:9000/catalog
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:
Input fields that are inaccessible for screen readers.

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