TableToolbarSearch does not add aria-label for accessibility

[aniruddhj]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

The TableToobarSearch within the DataTable does not add/provide with an aria label. This is causing accessbility violations in our accessbility tool. Currently the work around is add an aria label attribute once the DataTable component is mounted and there doesn't seem to be any other way.

Steps to reproduce the issue

1. Inspect the Search bar element
2. Under the <div class='bx--toolbar-action..> no aria-labels are displayed

Please create a reduced test case in CodeSandbox

• React:
  https://codesandbox.io/embed/affectionate-elbakyan-f0rsj?fontsize=14

Additional information

• Screenshots or code
  

• Current work around by setting the attributes inside ComponentDidMount
  

[abbeyhrt]

Hi @aniruddhj 👋 Thanks for making this issue! The search magnifying glass is purely decorative and should not have an aria-label. I am not getting any violations with DAP for the TableToolbarSearch. What accessibility tool are you using? I believe that the prop labelText is labelling the search input and therefore TableToolBarSearch wouldn't need an aria-label but I could definitely be mistaken.

[aniruddhj]

@abbeyhrt I am using DAP for checking all the violations and I agree the magnifying glass is for decorative purpose. But the issue mentioned here #5289 (comment) is some what the same error I get in my DAP tool. I do see the label Filter Table but that doesn't seem to help with the violation I get and I am confused why you were not able to see the same violation.

[abbeyhrt]

@aniruddhj thank you for your input! I just made a PR that will adjust the TableToolbarSearch component so that it is labeled by the labelText prop so that should resolve the DAP violations you are experiencing!