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.
microsoft · Oct 20, 2022 · d851827 · d851827
1 parent 1646df5
commit d851827
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/change/@fluentui-react-7161ec44-2213-4a2c-8b26-aacc793b05d0.json 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
@@ -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
@@ -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
@@ -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) {