DetailsList: Adding Announced section for examples that have '# of items selected' message in display

change/office-ui-fabric-react-2019-12-18-15-14-21-detailsListSelectedCount.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "DetailsList: Adding Announced section for examples that have '# of items selected' message in display.",
+  "packageName": "office-ui-fabric-react",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "commit": "3843534144011bbca749b526c94964d409adee88",
+  "date": "2019-12-18T23:14:21.839Z"
+}

packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx

@@ -160,6 +160,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
           )}
           farItems={[{ key: 'count', text: `${this.state.selectionCount} selected` }]}
         />
+        <Announced message={`${this.state.selectionCount} selected`} />
 
         {isGrouped ? <TextField label="Group item limit" onChange={this._onItemLimitChanged} /> : null}
 

packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Announced } from 'office-ui-fabric-react/lib/Announced';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { DetailsList, DetailsListLayoutMode, Selection, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
@@ -18,7 +19,7 @@ export interface IDetailsListBasicExampleItem {
 
 export interface IDetailsListBasicExampleState {
   items: IDetailsListBasicExampleItem[];
-  selectionDetails: {};
+  selectionDetails: string;
 }
 
 export class DetailsListBasicExample extends React.Component<{}, IDetailsListBasicExampleState> {
@@ -60,6 +61,7 @@ export class DetailsListBasicExample extends React.Component<{}, IDetailsListBas
     return (
       <Fabric>
         <div className={exampleChildClass}>{selectionDetails}</div>
+        <Announced message={selectionDetails} />
         <TextField
           className={exampleChildClass}
           label="Filter by name:"

packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Announced } from 'office-ui-fabric-react/lib/Announced';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { DetailsList, DetailsListLayoutMode, Selection, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
@@ -59,6 +60,7 @@ export class DetailsListCompactExample extends React.Component<{}, IDetailsListC
     return (
       <Fabric>
         <div className={exampleChildClass}>{selectionDetails}</div>
+        <Announced message={selectionDetails} />
         <TextField
           className={exampleChildClass}
           label="Filter by name:"

packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx

@@ -202,6 +202,7 @@ export class DetailsListDocumentsExample extends React.Component<{}, IDetailsLis
           <TextField label="Filter by name:" onChange={this._onChangeText} styles={controlStyles} />
         </div>
         <div className={classNames.selectionDetails}>{selectionDetails}</div>
+        <Announced message={selectionDetails} />
         {announcedMessage ? <Announced message={announcedMessage} /> : undefined}
         {isModalSelection ? (
           <MarqueeSelection selection={this._selection}>

packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot

@@ -799,6 +799,13 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1
       </div>
     </div>
   </div>
+  <div
+    aria-live="polite"
+    className=
+
+
+    role="status"
+  />
   <div
     className="ms-Viewport"
     style={

packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Basic.Example.tsx.shot

@@ -32,6 +32,13 @@ exports[`Component Examples renders DetailsList.Basic.Example.tsx correctly 1`]
   >
     No items selected
   </div>
+  <div
+    aria-live="polite"
+    className=
+
+
+    role="status"
+  />
   <div
     className=
         ms-TextField

packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Compact.Example.tsx.shot

@@ -32,6 +32,13 @@ exports[`Component Examples renders DetailsList.Compact.Example.tsx correctly 1`
   >
     No items selected
   </div>
+  <div
+    aria-live="polite"
+    className=
+
+
+    role="status"
+  />
   <div
     className=
         ms-TextField

packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Documents.Example.tsx.shot

@@ -557,6 +557,13 @@ exports[`Component Examples renders DetailsList.Documents.Example.tsx correctly
   >
     No items selected
   </div>
+  <div
+    aria-live="polite"
+    className=
+
+
+    role="status"
+  />
   <div
     className="ms-Viewport"
     style={