Add suggestionsAvailableAlertText to floating picker

change/office-ui-fabric-react-2019-07-25-14-46-34-master.json

@@ -0,0 +1,8 @@
+{
+  "comment": "consume suggestionsAvailableAlertText prop to floating picker, so that the screen readers can announce the apperance of suggestions when the prop is set.",
+  "type": "patch",
+  "packageName": "office-ui-fabric-react",
+  "email": "email not defined",
+  "commit": "98295b29d8f60465f38c8ec2ccc10c554f3dca78",
+  "date": "2019-07-25T21:46:34.091Z"
+}

packages/office-ui-fabric-react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx

@@ -10,6 +10,7 @@ import {
 } from './Suggestions.types';
 import { SuggestionsCore } from './SuggestionsCore';
 import * as stylesImport from './SuggestionsControl.scss';
+import { hiddenContentStyle, mergeStyles } from 'office-ui-fabric-react/lib/Styling';
 
 // tslint:disable-next-line:no-any
 const styles: any = stylesImport;
@@ -91,13 +92,22 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
   }
 
   public render(): JSX.Element {
-    const { className, headerItemsProps, footerItemsProps } = this.props;
+    const { className, headerItemsProps, footerItemsProps, suggestionsAvailableAlertText } = this.props;
+
+    const screenReaderTextStyles = mergeStyles(hiddenContentStyle);
+    const shouldAlertSuggestionsAvailableText =
+      this.state.suggestions && this.state.suggestions.length > 0 && suggestionsAvailableAlertText;
 
     return (
       <div className={css('ms-Suggestions', className ? className : '', styles.root)}>
         {headerItemsProps && this.renderHeaderItems()}
         {this._renderSuggestions()}
         {footerItemsProps && this.renderFooterItems()}
+        {shouldAlertSuggestionsAvailableText ? (
+          <span role="alert" aria-live="polite" className={screenReaderTextStyles}>
+            {suggestionsAvailableAlertText}
+          </span>
+        ) : null}
       </div>
     );
   }