[Bug]: TableToobarSearch rendering aria-label based on placeholder value, but i think should be based on labelText

[David-Yuen]

Package

@carbon/react

Browser

No response

Package version

1.72.0

React version

18.3.1

Description

I created a DataTable with TableToolbar components, including the Search component.
When configuring the TableToolbarSearch component, generally there are these 2 fields:

<TableToolbarSearch
  labelText="my label"
  placeholder="placeholder"
/>

And when it renders on the page, it generates something like this:

<div role="search" aria-label="..." ...>
  <label id="search-label-id" ..>
  <input ..>
  <button ..>
</div>

The problem is i see is, for the parent div with role="search" attribute, it creates an aria-label value based on the placeholder prop.. But instead, i think it should be based on labelText value. Doesn't that make more sense?
The alternative is, the div could have aria-labelledby and reference the id value from the <label> element.. (example: aria-labelledby="search-label-id")

When i render this component, generally labelText isnt really visible in this view (pretty much hidden). But the labelText seems like it should provide context of what this field is for.. so if aria-label was set to the same value as labelText, then in accessibility cases, the labelText value would be used appropriately.
Compared to placeholder value, placeholder sometimes is a sample value like 1234 (example: Having an input field for port value, and the placeholder could be "1234").

Reproduction/example

https://stackblitz.com/edit/github-nhj83gmf?file=src%2FApp.jsx

Steps to reproduce

Generally, if you set placeholder value in the TableToolbarSearch component, it will get set as the aria-label value in the parent div. You will need to open the dev console and inspect the page elements to see.

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems