Sticky: Always render narrator readable content in place (#11483)

#### Pull request checklist

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

#### Description of changes

Scrollable pane was moving sticky content out of flow. This change ensures that there is already readable text in the sticky area. 

#### Focus areas to test

This solution assumes that the nonStickyContent is not rendered in place. Will this break users who aren't using scrollable pane?

change/office-ui-fabric-react-2019-12-16-12-37-45-sticky-narrator-fix.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Sticky: Always render narrator readable content in place",
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]",
+  "commit": "b719af739bcf3ec0cb98ae10d1ee5e250db0a8a1",
+  "date": "2019-12-16T20:37:45.775Z"
+}

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

@@ -177,8 +177,13 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, IScr
         <div ref={this._contentContainer} className={classNames.contentContainer} data-is-scrollable={true}>
           <ScrollablePaneContext.Provider value={this._getScrollablePaneContext()}>{this.props.children}</ScrollablePaneContext.Provider>
         </div>
-        <div ref={this._stickyAboveRef} className={classNames.stickyAbove} style={this._getStickyContainerStyle(stickyTopHeight, true)} />
-        <div className={classNames.stickyBelow} style={this._getStickyContainerStyle(stickyBottomHeight, false)}>
+        <div
+          aria-hidden="true"
+          ref={this._stickyAboveRef}
+          className={classNames.stickyAbove}
+          style={this._getStickyContainerStyle(stickyTopHeight, true)}
+        />
+        <div aria-hidden="true" className={classNames.stickyBelow} style={this._getStickyContainerStyle(stickyBottomHeight, false)}>
           <div ref={this._stickyBelowRef} className={classNames.stickyBelowItems} />
         </div>
       </div>

packages/office-ui-fabric-react/src/components/ScrollablePane/__snapshots__/ScrollablePane.test.tsx.snap

@@ -33,6 +33,7 @@ exports[`ScrollablePane renders correctly 1`] = `
     data-is-scrollable={true}
   />
   <div
+    aria-hidden="true"
     className=
 
         {
@@ -53,6 +54,7 @@ exports[`ScrollablePane renders correctly 1`] = `
     }
   />
   <div
+    aria-hidden="true"
     className=
 
         {

packages/office-ui-fabric-react/src/components/Sticky/Sticky.tsx

@@ -1,6 +1,7 @@
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import { BaseComponent } from '../../Utilities';
+import { hiddenContentStyle } from '../../Styling';
 import { IScrollablePaneContext, ScrollablePaneContext } from '../ScrollablePane/ScrollablePane.types';
 import { IStickyProps, StickyPositionType } from './Sticky.types';
 
@@ -161,7 +162,9 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
           </div>
         )}
         <div style={this._getNonStickyPlaceholderHeightAndWidth()} ref={this._placeHolder}>
+          {(isStickyTop || isStickyBottom) && <span style={hiddenContentStyle as any}>{children}</span>}
           <div
+            aria-hidden={isStickyTop || isStickyBottom}
             ref={this._nonStickyContent}
             className={isStickyTop || isStickyBottom ? stickyClassName : undefined}
             style={this._getContentStyles(isStickyTop || isStickyBottom)}