SearchBox: role=search is removed, but can be optionally defined via role prop.

change/office-ui-fabric-react-2020-10-09-11-54-58-fix-searchbox-role.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "SearchBox: role=search on root div is now opt in; if you want it, you must provide it as a role prop.",
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-09T18:54:58.004Z"
+}

packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx

@@ -76,6 +76,7 @@ export class SearchBoxBase extends React.Component<ISearchBoxProps, ISearchBoxSt
       clearButtonProps,
       disableAnimation,
       iconProps,
+      role,
       id = this._fallbackId,
     } = this.props;
     const { value, hasFocus } = this.state;
@@ -97,10 +98,11 @@ export class SearchBoxBase extends React.Component<ISearchBoxProps, ISearchBoxSt
       'onFocus',
       'onBlur',
       'value',
+      'role',
     ]);
 
     return (
-      <div role="search" ref={this._rootElement} className={classNames.root} onFocusCapture={this._onFocusCapture}>
+      <div role={role} ref={this._rootElement} className={classNames.root} onFocusCapture={this._onFocusCapture}>
         <div className={classNames.iconContainer} onClick={this._onClickFocus} aria-hidden={true}>
           <Icon iconName="Search" {...iconProps} className={classNames.icon} />
         </div>

packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx

@@ -5,11 +5,16 @@ import { SearchBox } from './SearchBox';
 import { KeyCodes } from '../../Utilities';
 import { ISearchBoxProps } from './SearchBox.types';
 import { ISearchBoxState, SearchBoxBase } from './SearchBox.base';
+import { resetIds } from '@uifabric/utilities';
 
 describe('SearchBox', () => {
   let component: renderer.ReactTestRenderer | undefined;
   let wrapper: ReactWrapper<ISearchBoxProps, ISearchBoxState, SearchBoxBase> | undefined;
 
+  beforeEach(() => {
+    resetIds();
+  });
+
   afterEach(() => {
     if (component) {
       component.unmount();
@@ -27,6 +32,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/office-ui-fabric-react/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}
@@ -257,7 +255,7 @@ exports[`SearchBox renders SearchBox without animation correctly 1`] = `
         &::-ms-clear {
           display: none;
         }
-    id="SearchBox5"
+    id="SearchBox0"
     onBlur={[Function]}
     onChange={[Function]}
     onInput={[Function]}

packages/react-examples/src/office-ui-fabric-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/office-ui-fabric-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/office-ui-fabric-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/office-ui-fabric-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/office-ui-fabric-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/office-ui-fabric-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-next/etc/react-next.api.md

@@ -2413,6 +2413,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-next/src/components/SearchBox/SearchBox.types.ts

@@ -108,6 +108,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).
    */