From 64830187fd66aef9605847db2626300a9adc5341 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Thu, 20 Oct 2022 11:14:22 -0700
Subject: [PATCH 1/2] allow details element to be toggled inside selection and
 focus zones

Added an exception for <details> the same as we have for buttons, inputs,
and other interactive elements.
---
 ...luentui-react-7161ec44-2213-4a2c-8b26-aacc793b05d0.json | 7 +++++++
 ...i-react-focus-e075be55-1aa4-43b0-aeb5-ffdb377f6070.json | 7 +++++++
 .../react-focus/src/components/FocusZone/FocusZone.tsx     | 3 ++-
 packages/react/src/utilities/selection/SelectionZone.tsx   | 5 ++++-
 4 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-7161ec44-2213-4a2c-8b26-aacc793b05d0.json
 create mode 100644 change/@fluentui-react-focus-e075be55-1aa4-43b0-aeb5-ffdb377f6070.json

diff --git a/change/@fluentui-react-7161ec44-2213-4a2c-8b26-aacc793b05d0.json b/change/@fluentui-react-7161ec44-2213-4a2c-8b26-aacc793b05d0.json
new file mode 100644
index 00000000000000..90c696ed1f2540
--- /dev/null
+++ b/change/@fluentui-react-7161ec44-2213-4a2c-8b26-aacc793b05d0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add support for HTML defails element",
+  "packageName": "@fluentui/react",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-focus-e075be55-1aa4-43b0-aeb5-ffdb377f6070.json b/change/@fluentui-react-focus-e075be55-1aa4-43b0-aeb5-ffdb377f6070.json
new file mode 100644
index 00000000000000..cd0862fa900283
--- /dev/null
+++ b/change/@fluentui-react-focus-e075be55-1aa4-43b0-aeb5-ffdb377f6070.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add support for HTML details element",
+  "packageName": "@fluentui/react-focus",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-focus/src/components/FocusZone/FocusZone.tsx b/packages/react-focus/src/components/FocusZone/FocusZone.tsx
index db393f1f9b1551..8682ffbf2289ab 100644
--- a/packages/react-focus/src/components/FocusZone/FocusZone.tsx
+++ b/packages/react-focus/src/components/FocusZone/FocusZone.tsx
@@ -849,7 +849,8 @@ export class FocusZone extends React.Component<IFocusZoneProps> implements IFocu
         target.tagName === 'BUTTON' ||
         target.tagName === 'A' ||
         target.tagName === 'INPUT' ||
-        target.tagName === 'TEXTAREA'
+        target.tagName === 'TEXTAREA' ||
+        target.tagName === 'DETAILS'
       ) {
         return false;
       }
diff --git a/packages/react/src/utilities/selection/SelectionZone.tsx b/packages/react/src/utilities/selection/SelectionZone.tsx
index a1d83b91188a83..61e1d3fdefd09d 100644
--- a/packages/react/src/utilities/selection/SelectionZone.tsx
+++ b/packages/react/src/utilities/selection/SelectionZone.tsx
@@ -575,7 +575,10 @@ export class SelectionZone extends React.Component<ISelectionZoneProps, ISelecti
         } else if (
           // eslint-disable-next-line deprecation/deprecation
           (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) &&
-          (target.tagName === 'BUTTON' || target.tagName === 'A' || target.tagName === 'INPUT')
+          (target.tagName === 'BUTTON' ||
+            target.tagName === 'A' ||
+            target.tagName === 'INPUT' ||
+            target.tagName === 'DETAILS')
         ) {
           return false;
         } else if (target === itemRoot) {

From 3c9ee5a00069e91b5455240b595f53e985fc5d2f Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 25 Oct 2022 09:21:00 -0700
Subject: [PATCH 2/2] update detailslist details focus/toggle

Change the exception from the `details` tag to the `summary` tag as the
latter is what actually receives focus events.
---
 packages/react-focus/src/components/FocusZone/FocusZone.tsx | 2 +-
 packages/react/src/utilities/selection/SelectionZone.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-focus/src/components/FocusZone/FocusZone.tsx b/packages/react-focus/src/components/FocusZone/FocusZone.tsx
index 8682ffbf2289ab..f3f910d0054357 100644
--- a/packages/react-focus/src/components/FocusZone/FocusZone.tsx
+++ b/packages/react-focus/src/components/FocusZone/FocusZone.tsx
@@ -850,7 +850,7 @@ export class FocusZone extends React.Component<IFocusZoneProps> implements IFocu
         target.tagName === 'A' ||
         target.tagName === 'INPUT' ||
         target.tagName === 'TEXTAREA' ||
-        target.tagName === 'DETAILS'
+        target.tagName === 'SUMMARY'
       ) {
         return false;
       }
diff --git a/packages/react/src/utilities/selection/SelectionZone.tsx b/packages/react/src/utilities/selection/SelectionZone.tsx
index 61e1d3fdefd09d..01fafadb6f6e70 100644
--- a/packages/react/src/utilities/selection/SelectionZone.tsx
+++ b/packages/react/src/utilities/selection/SelectionZone.tsx
@@ -578,7 +578,7 @@ export class SelectionZone extends React.Component<ISelectionZoneProps, ISelecti
           (target.tagName === 'BUTTON' ||
             target.tagName === 'A' ||
             target.tagName === 'INPUT' ||
-            target.tagName === 'DETAILS')
+            target.tagName === 'SUMMARY')
         ) {
           return false;
         } else if (target === itemRoot) {