fix: dynamically set label to match id (#1195)

Author: anusha-c18

src/components/CustomSelect/CustomSelectDropdown/__snapshots__/CustomSelectDropdown.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`CustomSelectDropdown renders 1`] = `
       >
         <label
           class="u-off-screen"
-          for="search"
+          for="select-search-test-dropdown"
         >
           Search
         </label>

src/components/SearchBox/SearchBox.tsx

@@ -68,6 +68,8 @@ export type Props = PropsWithSpread<
 const SearchBox = React.forwardRef<HTMLInputElement, Props>(
   (
     {
+      name = "search",
+      id = "search",
       autocomplete = "on",
       className,
       disabled,
@@ -108,15 +110,15 @@ const SearchBox = React.forwardRef<HTMLInputElement, Props>(
 
     return (
       <div className={classNames("p-search-box", className)}>
-        <label className="u-off-screen" htmlFor="search">
+        <label className="u-off-screen" htmlFor={id}>
           {placeholder || "Search"}
         </label>
         <input
           autoComplete={autocomplete}
           className="p-search-box__input"
           disabled={disabled}
-          id="search"
-          name="search"
+          id={id}
+          name={name}
           onChange={(evt) => onChange?.(evt.target.value)}
           onKeyDown={onKeyDown}
           placeholder={placeholder}