allow details element to be toggled inside selection and focus zones (m…

…icrosoft#25324)

* 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.

* 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.

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"
+}

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"
+}

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 === 'SUMMARY'
       ) {
         return false;
       }

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 === 'SUMMARY')
         ) {
           return false;
         } else if (target === itemRoot) {