From be4d0d0f8f804c35014dc967627c29cd576b8fdb Mon Sep 17 00:00:00 2001
From: Jason Gore <jagore@microsoft.com>
Date: Mon, 11 Mar 2019 21:46:47 -0700
Subject: [PATCH 1/4] Fix FocusTrapZone with zero tabbable elements by marking
 the bumper divs as visible with data-is-visible. Regression was caused by
 position: fixed, which makes offsetParent null for isElementVisible check.

---
 .../components/FocusTrapZone/FocusTrapZone.tsx  | 17 +++++++++++------
 .../__snapshots__/HoverCard.test.tsx.snap       |  4 ++++
 .../Modal/__snapshots__/Modal.test.tsx.snap     |  4 ++++
 .../Panel/__snapshots__/Panel.test.tsx.snap     |  2 ++
 ...mmandBar.CommandBarButtonAs.Example.tsx.shot |  2 ++
 .../Panel.HiddenOnDismiss.Example.tsx.shot      |  2 ++
 6 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
index cac82d6562c8fc..21f1eb7129ccce 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
@@ -60,10 +60,15 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
     const { className, ariaLabelledBy } = this.props;
     const divProps = getNativeProps(this.props, divProperties);
 
-    const bumperStyle: React.CSSProperties = {
-      pointerEvents: 'none',
-      position: 'fixed' // 'fixed' prevents browsers from scrolling to bumpers when viewport does not contain them
-    };
+    const bumperProps = {
+      style: {
+        pointerEvents: 'none',
+        position: 'fixed' // 'fixed' prevents browsers from scrolling to bumpers when viewport does not contain them
+      },
+      tabIndex: 0,
+      'aria-hidden': true,
+      'data-is-visible': 'true'
+    } as React.HTMLAttributes<HTMLDivElement>;
 
     return (
       <div
@@ -75,9 +80,9 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
         onFocus={this._onRootFocus}
         onBlur={this._onRootBlur}
       >
-        <div ref={this._firstBumper} onFocus={this._onFirstBumperFocus} style={bumperStyle} tabIndex={0} aria-hidden={true} />
+        <div {...bumperProps} ref={this._firstBumper} onFocus={this._onFirstBumperFocus} />
         {this.props.children}
-        <div ref={this._lastBumper} onFocus={this._onLastBumperFocus} style={bumperStyle} tabIndex={0} aria-hidden={true} />
+        <div {...bumperProps} ref={this._lastBumper} onFocus={this._onLastBumperFocus} />
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/__snapshots__/HoverCard.test.tsx.snap b/packages/office-ui-fabric-react/src/components/HoverCard/__snapshots__/HoverCard.test.tsx.snap
index 3dc5ddd8f311c9..12f4544959252a 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/__snapshots__/HoverCard.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/__snapshots__/HoverCard.test.tsx.snap
@@ -143,6 +143,7 @@ exports[`HoverCard renders ExpandingCard correctly 1`] = `
           >
             <div
               aria-hidden={true}
+              data-is-visible="true"
               onFocus={[Function]}
               style={
                 Object {
@@ -170,6 +171,7 @@ exports[`HoverCard renders ExpandingCard correctly 1`] = `
             </div>
             <div
               aria-hidden={true}
+              data-is-visible="true"
               onFocus={[Function]}
               style={
                 Object {
@@ -328,6 +330,7 @@ exports[`HoverCard renders PlainCard correctly 1`] = `
           >
             <div
               aria-hidden={true}
+              data-is-visible="true"
               onFocus={[Function]}
               style={
                 Object {
@@ -353,6 +356,7 @@ exports[`HoverCard renders PlainCard correctly 1`] = `
             </div>
             <div
               aria-hidden={true}
+              data-is-visible="true"
               onFocus={[Function]}
               style={
                 Object {
diff --git a/packages/office-ui-fabric-react/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index a1441c611ad50d..5c85c2b663040d 100644
--- a/packages/office-ui-fabric-react/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -136,6 +136,7 @@ exports[`Modal renders Modal correctly 1`] = `
         >
           <div
             aria-hidden={true}
+            data-is-visible="true"
             onFocus={[Function]}
             style={
               Object {
@@ -158,6 +159,7 @@ exports[`Modal renders Modal correctly 1`] = `
           </div>
           <div
             aria-hidden={true}
+            data-is-visible="true"
             onFocus={[Function]}
             style={
               Object {
@@ -289,6 +291,7 @@ exports[`Modal renders Modeless Modal correctly 1`] = `
         >
           <div
             aria-hidden={true}
+            data-is-visible="true"
             onFocus={[Function]}
             style={
               Object {
@@ -311,6 +314,7 @@ exports[`Modal renders Modeless Modal correctly 1`] = `
           </div>
           <div
             aria-hidden={true}
+            data-is-visible="true"
             onFocus={[Function]}
             style={
               Object {
diff --git a/packages/office-ui-fabric-react/src/components/Panel/__snapshots__/Panel.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Panel/__snapshots__/Panel.test.tsx.snap
index 4ba33cbed2ba2c..3d6f642f98a9be 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/__snapshots__/Panel.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Panel/__snapshots__/Panel.test.tsx.snap
@@ -160,6 +160,7 @@ exports[`Panel renders Panel correctly 1`] = `
         >
           <div
             aria-hidden={true}
+            data-is-visible="true"
             onFocus={[Function]}
             style={
               Object {
@@ -408,6 +409,7 @@ exports[`Panel renders Panel correctly 1`] = `
           </div>
           <div
             aria-hidden={true}
+            data-is-visible="true"
             onFocus={[Function]}
             style={
               Object {
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot
index dce8903db68fd2..b353c99145ce5a 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot
@@ -2114,6 +2114,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co
                               >
                                 <div
                                   aria-hidden={true}
+                                  data-is-visible="true"
                                   onFocus={[Function]}
                                   style={
                                     Object {
@@ -2350,6 +2351,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co
                                 </div>
                                 <div
                                   aria-hidden={true}
+                                  data-is-visible="true"
                                   onFocus={[Function]}
                                   style={
                                     Object {
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Panel.HiddenOnDismiss.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Panel.HiddenOnDismiss.Example.tsx.shot
index 59e097721a8074..9fa3da2ef93a05 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Panel.HiddenOnDismiss.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Panel.HiddenOnDismiss.Example.tsx.shot
@@ -245,6 +245,7 @@ exports[`Component Examples renders Panel.HiddenOnDismiss.Example.tsx correctly
           >
             <div
               aria-hidden={true}
+              data-is-visible="true"
               onFocus={[Function]}
               style={
                 Object {
@@ -493,6 +494,7 @@ exports[`Component Examples renders Panel.HiddenOnDismiss.Example.tsx correctly
             </div>
             <div
               aria-hidden={true}
+              data-is-visible="true"
               onFocus={[Function]}
               style={
                 Object {

From 323997aeefc13a381c25df568f72160015a020e3 Mon Sep 17 00:00:00 2001
From: Jason Gore <jagore@microsoft.com>
Date: Mon, 11 Mar 2019 21:48:21 -0700
Subject: [PATCH 2/4] Change file.

---
 .../jg-fix-ftz-no-tabbable_2019-03-12-04-48.json      | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/jg-fix-ftz-no-tabbable_2019-03-12-04-48.json

diff --git a/common/changes/office-ui-fabric-react/jg-fix-ftz-no-tabbable_2019-03-12-04-48.json b/common/changes/office-ui-fabric-react/jg-fix-ftz-no-tabbable_2019-03-12-04-48.json
new file mode 100644
index 00000000000000..f5501eb971b4bf
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/jg-fix-ftz-no-tabbable_2019-03-12-04-48.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "FocusTrapZone: Fix for zones that have zero tabbable elements.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jagore@microsoft.com"
+}
\ No newline at end of file

From 4fde56344626d6ce7144d1394d35339d6b91011a Mon Sep 17 00:00:00 2001
From: Jason Gore <jagore@microsoft.com>
Date: Mon, 11 Mar 2019 21:51:53 -0700
Subject: [PATCH 3/4] Minor cleanup.

---
 .../src/components/FocusTrapZone/FocusTrapZone.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
index 21f1eb7129ccce..90dfda30003e62 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
@@ -67,7 +67,7 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
       },
       tabIndex: 0,
       'aria-hidden': true,
-      'data-is-visible': 'true'
+      'data-is-visible': true
     } as React.HTMLAttributes<HTMLDivElement>;
 
     return (

From 58e9200a9eb897f812500b0c44936e7dae2b9f5e Mon Sep 17 00:00:00 2001
From: Jason Gore <jagore@microsoft.com>
Date: Mon, 11 Mar 2019 22:01:17 -0700
Subject: [PATCH 4/4] Somewhat not so minor snapshot updates for minor fix.

---
 .../HoverCard/__snapshots__/HoverCard.test.tsx.snap       | 8 ++++----
 .../components/Modal/__snapshots__/Modal.test.tsx.snap    | 8 ++++----
 .../components/Panel/__snapshots__/Panel.test.tsx.snap    | 4 ++--
 .../CommandBar.CommandBarButtonAs.Example.tsx.shot        | 4 ++--
 .../__snapshots__/Panel.HiddenOnDismiss.Example.tsx.shot  | 4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/__snapshots__/HoverCard.test.tsx.snap b/packages/office-ui-fabric-react/src/components/HoverCard/__snapshots__/HoverCard.test.tsx.snap
index 12f4544959252a..80d068b9800fef 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/__snapshots__/HoverCard.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/__snapshots__/HoverCard.test.tsx.snap
@@ -143,7 +143,7 @@ exports[`HoverCard renders ExpandingCard correctly 1`] = `
           >
             <div
               aria-hidden={true}
-              data-is-visible="true"
+              data-is-visible={true}
               onFocus={[Function]}
               style={
                 Object {
@@ -171,7 +171,7 @@ exports[`HoverCard renders ExpandingCard correctly 1`] = `
             </div>
             <div
               aria-hidden={true}
-              data-is-visible="true"
+              data-is-visible={true}
               onFocus={[Function]}
               style={
                 Object {
@@ -330,7 +330,7 @@ exports[`HoverCard renders PlainCard correctly 1`] = `
           >
             <div
               aria-hidden={true}
-              data-is-visible="true"
+              data-is-visible={true}
               onFocus={[Function]}
               style={
                 Object {
@@ -356,7 +356,7 @@ exports[`HoverCard renders PlainCard correctly 1`] = `
             </div>
             <div
               aria-hidden={true}
-              data-is-visible="true"
+              data-is-visible={true}
               onFocus={[Function]}
               style={
                 Object {
diff --git a/packages/office-ui-fabric-react/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index 5c85c2b663040d..a093462553ef56 100644
--- a/packages/office-ui-fabric-react/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -136,7 +136,7 @@ exports[`Modal renders Modal correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            data-is-visible="true"
+            data-is-visible={true}
             onFocus={[Function]}
             style={
               Object {
@@ -159,7 +159,7 @@ exports[`Modal renders Modal correctly 1`] = `
           </div>
           <div
             aria-hidden={true}
-            data-is-visible="true"
+            data-is-visible={true}
             onFocus={[Function]}
             style={
               Object {
@@ -291,7 +291,7 @@ exports[`Modal renders Modeless Modal correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            data-is-visible="true"
+            data-is-visible={true}
             onFocus={[Function]}
             style={
               Object {
@@ -314,7 +314,7 @@ exports[`Modal renders Modeless Modal correctly 1`] = `
           </div>
           <div
             aria-hidden={true}
-            data-is-visible="true"
+            data-is-visible={true}
             onFocus={[Function]}
             style={
               Object {
diff --git a/packages/office-ui-fabric-react/src/components/Panel/__snapshots__/Panel.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Panel/__snapshots__/Panel.test.tsx.snap
index 3d6f642f98a9be..e7974eef081d19 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/__snapshots__/Panel.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Panel/__snapshots__/Panel.test.tsx.snap
@@ -160,7 +160,7 @@ exports[`Panel renders Panel correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            data-is-visible="true"
+            data-is-visible={true}
             onFocus={[Function]}
             style={
               Object {
@@ -409,7 +409,7 @@ exports[`Panel renders Panel correctly 1`] = `
           </div>
           <div
             aria-hidden={true}
-            data-is-visible="true"
+            data-is-visible={true}
             onFocus={[Function]}
             style={
               Object {
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot
index b353c99145ce5a..81349a6e412935 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot
@@ -2114,7 +2114,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co
                               >
                                 <div
                                   aria-hidden={true}
-                                  data-is-visible="true"
+                                  data-is-visible={true}
                                   onFocus={[Function]}
                                   style={
                                     Object {
@@ -2351,7 +2351,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co
                                 </div>
                                 <div
                                   aria-hidden={true}
-                                  data-is-visible="true"
+                                  data-is-visible={true}
                                   onFocus={[Function]}
                                   style={
                                     Object {
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Panel.HiddenOnDismiss.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Panel.HiddenOnDismiss.Example.tsx.shot
index 9fa3da2ef93a05..cd9c8c34a65187 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Panel.HiddenOnDismiss.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Panel.HiddenOnDismiss.Example.tsx.shot
@@ -245,7 +245,7 @@ exports[`Component Examples renders Panel.HiddenOnDismiss.Example.tsx correctly
           >
             <div
               aria-hidden={true}
-              data-is-visible="true"
+              data-is-visible={true}
               onFocus={[Function]}
               style={
                 Object {
@@ -494,7 +494,7 @@ exports[`Component Examples renders Panel.HiddenOnDismiss.Example.tsx correctly
             </div>
             <div
               aria-hidden={true}
-              data-is-visible="true"
+              data-is-visible={true}
               onFocus={[Function]}
               style={
                 Object {