a11y: Filter search field missing label

[sirrah-tam]

Describe the issue

The search filter that is used on multiple pages has a text input field that does not have a valid label. Screen reader users will not know the purpose of this input field.

To reproduce

Open Chrome Inspector tools and locate the input field. Once highlighted, locate the Accessibility panel and its Computed Properties. The elements accessible name will appear under "Name" and it will show where the content is provided.

Expected behavior

All form fields need a valid label.
Reference: 3.3.2 Labels or Instructions

Recommendation

The easiest way to ensure an input field has a valid label is to use the <label> tag with its for attribute referencing the ID of the input field. Developers can also use aria-labelledby or aria-label to add an accessible name.
For examples: Labeling Controls

Screenshots

Version and browser

Version: 6.0.0-beta.2
Browser and version: If applicable give us your browser specs

Bug report checklist

• I have filled out as much information as I can
• I have detailed how the issue can be reproduced
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[kaidesu]

@thekanbo hold off on this one, I plan on refactoring a large portion of the datatable component in Proton that will be removing this interface.

[sirrah-tam]

@kaidesu that reminds me, I need to poke around Proton again and see if there might be any weird issues that come up like this one.