fix(Search): use native input type="search" (#20415)

* fix(search): use native input type=search instead of text with role

* fix(search): remove default browser decoration

* fix(Search): update stories to use type=search and remove role prop

* refactor(Search): deprecate role prop and remove type from stories

* chore(search): clean up redundant comment

* chore(search): use deprecate util for role prop

* chore: update snapshots

Author: heloiselui

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -3421,9 +3421,7 @@ Map {
         ],
         "type": "oneOfType",
       },
-      "role": {
-        "type": "string",
-      },
+      "role": [Function],
       "size": {
         "args": [
           [
@@ -7299,9 +7297,7 @@ Map {
         ],
         "type": "oneOfType",
       },
-      "role": {
-        "type": "string",
-      },
+      "role": [Function],
       "size": {
         "args": [
           [

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DataTable behaves as expected selection -- radio buttons should not have select-all checkbox 1`] = `
 <div>
@@ -532,9 +532,8 @@ exports[`DataTable behaves as expected selection should render and match snapsho
             class="cds--search-input"
             id="custom-id"
             placeholder="Filter table"
-            role="searchbox"
             tabindex="0"
-            type="text"
+            type="search"
             value=""
           />
           <button
@@ -965,9 +964,8 @@ exports[`DataTable renders as expected - Component API should render and match s
             class="cds--search-input"
             id="custom-id"
             placeholder="Filter table"
-            role="searchbox"
             tabindex="0"
-            type="text"
+            type="search"
             value=""
           />
           <button

packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TableToolbarSearch renders as expected - Component API should render 1`] = `
 <div>
@@ -39,9 +39,8 @@ exports[`TableToolbarSearch renders as expected - Component API should render 1`
       class="cds--search-input"
       id="custom-id"
       placeholder="Filter table"
-      role="searchbox"
       tabindex="0"
-      type="text"
+      type="search"
       value=""
     />
     <button

packages/react/src/components/Search/Search.stories.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -110,9 +110,8 @@ Default.args = {
   disabled: false,
   labelText: 'Label text',
   placeholder: 'Placeholder text',
-  role: 'searchbox',
   size: 'md',
-  type: 'text',
+  type: 'search',
 };
 
 Default.argTypes = {
@@ -157,20 +156,10 @@ Default.argTypes = {
   renderIcon: {
     control: false,
   },
-  role: {
-    control: {
-      type: 'text',
-    },
-  },
   size: {
     options: ['sm', 'md', 'lg'],
     control: {
       type: 'select',
     },
   },
-  type: {
-    control: {
-      type: 'text',
-    },
-  },
 };

packages/react/src/components/Search/Search.tsx

@@ -102,7 +102,9 @@ export interface SearchProps extends InputPropsBase {
   renderIcon?: ComponentType | FunctionComponent;
 
   /**
-   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   * @deprecated Specify the role for the underlying `<input>`.
+   * No longer needed since `<input type="search">` already provides the correct semantics.
+   * This prop will be removed in the next major release of Carbon.
    */
   role?: string;
 
@@ -112,7 +114,7 @@ export interface SearchProps extends InputPropsBase {
   size?: 'sm' | 'md' | 'lg';
 
   /**
-   * Optional prop to specify the type of the `<input>`
+   * Specify the type of the `<input>`
    */
   type?: string;
 
@@ -141,9 +143,9 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
       onExpand,
       placeholder = 'Search',
       renderIcon,
-      role = 'searchbox',
+      role,
       size = 'md',
-      type = 'text',
+      type = 'search',
       value,
       ...rest
     },
@@ -383,16 +385,22 @@ Search.propTypes = {
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
+   * Deprecated, since <input type="search"> already provides correct semantics.
    * Specify the role for the underlying `<input>`, defaults to `searchbox`
    */
-  role: PropTypes.string,
+  role: deprecate(
+    PropTypes.string,
+    'The `role` prop has been deprecated since <input type="search"> already provides correct semantics. ' +
+      'It will be removed in the next major release of Carbon.'
+  ),
 
   /**
    * Specify the size of the Search
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
   /**
-   * Optional prop to specify the type of the `<input>`
+   * Specify the type of the `<input>`
    */
   type: PropTypes.string,
 

packages/styles/scss/components/search/_search.scss

@@ -68,6 +68,15 @@
     &::-ms-clear {
       display: none;
     }
+
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      display: none;
+      -webkit-appearance: none;
+      appearance: none;
+    }
   }
 
   .#{$prefix}--search-input[disabled] {