ScrollablePane: Fixing tabbing navigation with Sticky headers (#11510)

#### Pull request checklist

- [x] Addresses an existing issue: Fixes second bug in #11325
- [x] Include a change request file using `$ yarn change`

#### Description of changes

Tab order in `ScrollablePanes` with `Sticky` headers was incorrect because the headers were being rendered after the content in the DOM. This PR fixes the issue by rendering the header before the content.

__Before:__
![Before](https://user-images.githubusercontent.com/7798177/71127465-045e6300-21a0-11ea-97a2-4d20e4684dbc.gif)

__After:__
![After](https://user-images.githubusercontent.com/7798177/71127473-06c0bd00-21a0-11ea-8320-9b279251ca80.gif)

#### Focus areas to test

(optional)

change/office-ui-fabric-react-2019-12-18-14-03-38-stickyTop.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "ScrollablePane: Fixing tabbing navigation with Sticky headers.",
+  "packageName": "office-ui-fabric-react",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "commit": "c98780c3071c6804444fb1b019a9d6d213268967",
+  "date": "2019-12-18T22:03:38.843Z"
+}

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

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

packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts

@@ -37,6 +37,7 @@ export const getStyles = (props: IScrollablePaneStyleProps): IScrollablePaneStyl
     stickyAbove: [
       {
         top: 0,
+        zIndex: 1,
         selectors: {
           [HighContrastSelector]: {
             borderBottom: '1px solid WindowText'

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

@@ -18,20 +18,6 @@ exports[`ScrollablePane renders correctly 1`] = `
         top: 0px;
       }
 >
-  <div
-    className=
-        ms-ScrollablePane--contentContainer
-        {
-          -webkit-overflow-scrolling: touch;
-          bottom: 0px;
-          left: 0px;
-          overflow-y: auto;
-          position: absolute;
-          right: 0px;
-          top: 0px;
-        }
-    data-is-scrollable={true}
-  />
   <div
     aria-hidden="true"
     className=
@@ -40,6 +26,7 @@ exports[`ScrollablePane renders correctly 1`] = `
           pointer-events: auto;
           position: absolute;
           top: 0px;
+          z-index: 1;
         }
         @media screen and (-ms-high-contrast: active){& {
           border-bottom: 1px solid WindowText;
@@ -53,6 +40,20 @@ exports[`ScrollablePane renders correctly 1`] = `
       }
     }
   />
+  <div
+    className=
+        ms-ScrollablePane--contentContainer
+        {
+          -webkit-overflow-scrolling: touch;
+          bottom: 0px;
+          left: 0px;
+          overflow-y: auto;
+          position: absolute;
+          right: 0px;
+          top: 0px;
+        }
+    data-is-scrollable={true}
+  />
   <div
     aria-hidden="true"
     className=