Add aria label prop for clear button in Searchbox

common/changes/office-ui-fabric-react/searchBoxClearButton_2018-02-08-23-08.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Add aria label prop for clear button in searchbox",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

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

@@ -89,7 +89,12 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
         />
         { value!.length > 0 &&
           <div className={ classNames.clearButton }>
-            <IconButton styles={ { root: { height: 'auto' }, icon: { fontSize: '12px' } } } onClick={ this._onClearClick } iconProps={ { iconName: 'Clear' } } />
+            <IconButton
+              styles={ { root: { height: 'auto' }, icon: { fontSize: '12px' } } }
+              onClick={ this._onClearClick }
+              iconProps={ { iconName: 'Clear' } }
+              ariaLabel={ this.props.clearButtonAriaLabel }
+            />
           </div>
         }
       </div>

packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts

@@ -64,6 +64,11 @@ export interface ISearchBoxProps extends React.InputHTMLAttributes<HTMLInputElem
    */
   ariaLabel?: string;
 
+  /**
+  * The aria label of the clear button for the benefit of screen readers.
+  */
+  clearButtonAriaLabel?: string;
+
   /**
    * Whether or not the SearchBox is underlined.
    * @default false

packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx

@@ -10,6 +10,7 @@ export class SearchBoxSmallExample extends React.Component<any, any> {
     return (
       <div className='ms-SearchBoxSmallExample'>
         <SearchBox
+          clearButtonAriaLabel='Clear Searchbox'
           onEscape={ (ev) => {
             console.log('Custom onEscape Called');
           } }