[a11y]: TableToolbarSearch: use <input type=search>

[wkeese]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

1.70

React version

18

Automated testing tool and ruleset

none

Assistive technology

No response

Description

Description

The first rule of ARIA use is:

If you can use a native HTML element [HTML51] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

TableToolbarSearch currently renders:

<input ... class="cds--search-input" role="searchbox" ... type="text" tabindex="0" value="">

As written in https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/searchbox_role, it should be:

<input type="search" />

WCAG 2.1 Violation

No response

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-datatable-toolbar--default

Steps to reproduce

N/A

Suggested Severity

None

Code of Conduct

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

[tay1orjones]

Thanks for opening this @wkeese, I agree we should look at this again. There may have been a historical reason as to why searchbox was chosen over type="search", but we should research and update it if possible.