SearchBox: Making role on root div opt in (microsoft#15621)

<!--
!!!!!!! IMPORTANT !!!!!!!

Due to work we're currently doing to prepare master branch for our version 8 beta release,
please hold-off submitting the PR until around October 12 if it's not urgent.
If it is urgent, please submit the PR targeting the 7.0 branch.

This change does not apply to react-northstar contributors.

See microsoft#15222 for more details. Sorry for the inconvenience and short notice.
-->

#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [x] Include a change request file using `$ yarn change`

#### Description of changes

_Cherry-pick of microsoft#15450._

_Original PR description:_

## Before:

This JSX:
```
<SearchBox />
```
Renders this HTML: 
```jsx
<div role="search">
  <input ... />
</div>
```

## After:

This JSX:
```
<SearchBox />
<SearchBox role="search" />
```
Renders this HTML: 
```jsx
<div>
  <input ... />
</div>

<div role="search">
  <input ... />
</div>
```

change/@fluentui-react-internal-2020-10-20-13-28-47-searchboxRole.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "SearchBox: Making role on root div opt in.",
+  "packageName": "@fluentui/react-internal",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-20T20:28:47.909Z"
+}

packages/react-examples/src/react/__snapshots__/FloatingPeoplePicker.Basic.Example.tsx.shot

@@ -51,7 +51,6 @@ Array [
             color: #005a9e;
           }
       onFocusCapture={[Function]}
-      role="search"
     >
       <div
         aria-hidden={true}

packages/react-examples/src/react/__snapshots__/SearchBox.CustomIcon.Example.tsx.shot

@@ -43,7 +43,6 @@ exports[`Component Examples renders SearchBox.CustomIcon.Example.tsx correctly 1
         color: #005a9e;
       }
   onFocusCapture={[Function]}
-  role="search"
 >
   <div
     aria-hidden={true}

packages/react-examples/src/react/__snapshots__/SearchBox.Disabled.Example.tsx.shot

@@ -68,7 +68,6 @@ exports[`Component Examples renders SearchBox.Disabled.Example.tsx correctly 1`]
           color: #005a9e;
         }
     onFocusCapture={[Function]}
-    role="search"
   >
     <div
       aria-hidden={true}
@@ -208,7 +207,6 @@ exports[`Component Examples renders SearchBox.Disabled.Example.tsx correctly 1`]
           color: #005a9e;
         }
     onFocusCapture={[Function]}
-    role="search"
   >
     <div
       aria-hidden={true}

packages/react-examples/src/react/__snapshots__/SearchBox.FullSize.Example.tsx.shot

@@ -64,7 +64,6 @@ exports[`Component Examples renders SearchBox.FullSize.Example.tsx correctly 1`]
           color: #005a9e;
         }
     onFocusCapture={[Function]}
-    role="search"
   >
     <div
       aria-hidden={true}
@@ -197,7 +196,6 @@ exports[`Component Examples renders SearchBox.FullSize.Example.tsx correctly 1`]
           color: #005a9e;
         }
     onFocusCapture={[Function]}
-    role="search"
   >
     <div
       aria-hidden={true}

packages/react-examples/src/react/__snapshots__/SearchBox.Small.Example.tsx.shot

@@ -44,7 +44,6 @@ exports[`Component Examples renders SearchBox.Small.Example.tsx correctly 1`] =
         color: #005a9e;
       }
   onFocusCapture={[Function]}
-  role="search"
 >
   <div
     aria-hidden={true}

packages/react-examples/src/react/__snapshots__/SearchBox.Underlined.Example.tsx.shot

@@ -45,7 +45,6 @@ exports[`Component Examples renders SearchBox.Underlined.Example.tsx correctly 1
         color: #005a9e;
       }
   onFocusCapture={[Function]}
-  role="search"
 >
   <div
     aria-hidden={true}

packages/react-internal/etc/react-internal.api.md

@@ -4461,6 +4461,7 @@ export interface ISearchBoxProps extends React.InputHTMLAttributes<HTMLInputElem
     onEscape?: (ev?: any) => void;
     onSearch?: (newValue: any) => void;
     placeholder?: string;
+    role?: string;
     styles?: IStyleFunctionOrObject<ISearchBoxStyleProps, ISearchBoxStyles>;
     theme?: ITheme;
     underlined?: boolean;

packages/react-internal/src/components/SearchBox/SearchBox.base.tsx

@@ -57,6 +57,7 @@ export const SearchBoxBase: React.FunctionComponent<ISearchBoxProps> = React.for
     onEscape,
     onSearch,
     iconProps,
+    role,
   } = props;
 
   const classNames = getClassNames(styles!, {
@@ -75,6 +76,7 @@ export const SearchBoxBase: React.FunctionComponent<ISearchBoxProps> = React.for
     'onFocus',
     'onBlur',
     'value',
+    'role',
   ]);
 
   const onClear = React.useCallback(
@@ -155,7 +157,7 @@ export const SearchBoxBase: React.FunctionComponent<ISearchBoxProps> = React.for
   useComponentRef(props.componentRef, inputElementRef, hasFocus);
 
   return (
-    <div role="search" ref={mergedRootRef} className={classNames.root} onFocusCapture={onFocusCapture}>
+    <div role={role} ref={mergedRootRef} className={classNames.root} onFocusCapture={onFocusCapture}>
       <div className={classNames.iconContainer} onClick={onClickFocus} aria-hidden>
         <Icon iconName="Search" {...iconProps} className={classNames.icon} />
       </div>

packages/react-internal/src/components/SearchBox/SearchBox.test.tsx

@@ -37,6 +37,12 @@ describe('SearchBox', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('renders SearchBox role on the container div', () => {
+    wrapper = mount(<SearchBox role="search" />);
+
+    expect(wrapper.getDOMNode().getAttribute('role')).toEqual('search');
+  });
+
   it('can execute an onClick on clear button', () => {
     let clickExecuted = false;
     wrapper = mount(

packages/react-internal/src/components/SearchBox/SearchBox.types.ts

@@ -104,6 +104,11 @@ export interface ISearchBoxProps
    */
   underlined?: boolean;
 
+  /**
+   * The role assigned to the root DIV element of the SearchBox, useful for defining a landmark role, such as "search".
+   */
+  role?: string;
+
   /**
    * Theme (provided through customization).
    */

packages/react-internal/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap

@@ -43,7 +43,6 @@ exports[`SearchBox renders SearchBox correctly 1`] = `
         color: #005a9e;
       }
   onFocusCapture={[Function]}
-  role="search"
 >
   <div
     aria-hidden={true}
@@ -178,7 +177,6 @@ exports[`SearchBox renders SearchBox without animation correctly 1`] = `
         color: #005a9e;
       }
   onFocusCapture={[Function]}
-  role="search"
 >
   <div
     aria-hidden={true}