microsoft · dzearing · Feb 20, 2019 · Jan 25, 2019 · Jan 25, 2019 · Jan 25, 2019
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ChoiceGroup: fixing issue when nested in FocusZones.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "dzearing@microsoft.com"
+}
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ChoiceGroup: now works again in FocusZone, but this also reverts a bug fix which allowed FocusTrapZones to behave better with ChoiceGroups in them. We will fix this issue separately. Popup: no longer has `tabindex=\"-1\"` specified, which is causing all sorts of regressions wrt FocusTrapZone usage.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "dzearing@microsoft.com"
+}
@@ -58,7 +58,6 @@ exports[`Callout renders Callout correctly 1`] = `
           "overflowY": undefined,
         }
       }
-      tabIndex={-1}
     >
       Content
     </div>

@@ -81,11 +81,6 @@ export class ChoiceGroupBase extends BaseComponent<IChoiceGroupProps, IChoiceGro
       ? this._id + '-label'
       : (this.props as any)['aria-labelledby'];
 
-    // In cases where no option is checked, set focusable to first enabled option so that ChoiceGroup remains focusable.
-    // If no options are enabled, ChoiceGroup is not focusable. If any option is checked, do not set keyDefaultFocusable.
-    const firstEnabledOption = disabled || options === undefined ? undefined : find(options, option => !option.disabled);
-    const keyDefaultFocusable = keyChecked === undefined && firstEnabledOption ? firstEnabledOption.key : undefined;
-
     return (
       <div role={role} className={classNames.applicationRole}>
         <div className={classNames.root} role="radiogroup" {...ariaLabelledBy && { 'aria-labelledby': ariaLabelledBy }}>
@@ -100,7 +95,6 @@ export class ChoiceGroupBase extends BaseComponent<IChoiceGroupProps, IChoiceGro
                 ...option,
                 focused: option.key === keyFocused,
                 checked: option.key === keyChecked,
-                'data-is-focusable': option.key === keyChecked || option.key === keyDefaultFocusable ? true : false,
                 disabled: option.disabled || disabled,
                 id: `${this._id}-${option.key}`,
                 labelId: `${this._labelId}-${option.key}`,
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,7 +58,6 @@ exports[`Callout renders Callout correctly 1`] = ` @@
               "overflowY": undefined,
             }
           }
-          tabIndex={-1}
         >
           Content
         </div>
@@ Expand Down @@