fix: activate <summary> per [Enter] and [Space]

src/event/behavior/keypress.ts

@@ -1,4 +1,9 @@
-import {isContentEditable, isEditable, isElementType} from '../../utils'
+import {
+  isContentEditable,
+  isEditable,
+  isElementType,
+  isSummaryForParentDetails,
+} from '../../utils'
 import {input} from '../input'
 import {behavior} from './registry'
 
@@ -8,7 +13,8 @@ behavior.keypress = (event, target, instance) => {
       isElementType(target, 'button') ||
       (isElementType(target, 'input') &&
         ClickInputOnEnter.includes(target.type)) ||
-        (isElementType(target, 'a') && Boolean(target.href))
+        (isElementType(target, 'a') && Boolean(target.href)) ||
+        isSummaryForParentDetails(target)
     ) {
       return () => {
         instance.dispatchUIEvent(target, 'click')

src/event/behavior/keyup.ts

@@ -1,4 +1,4 @@
-import {isClickableInput} from '../../utils'
+import {isClickableInput, isSummaryForParentDetails} from '../../utils'
 import {BehaviorPlugin} from '.'
 import {behavior} from './registry'
 
@@ -10,7 +10,7 @@ const keyupBehavior: {
   [key: string]: BehaviorPlugin<'keyup'> | undefined
 } = {
   ' ': (event, target, instance) => {
-    if (isClickableInput(target)) {
+    if (isClickableInput(target) || isSummaryForParentDetails(target)) {
       return () => instance.dispatchUIEvent(target, 'click')
     }
   },

src/utils/click/isSummaryForParentDetails.ts

@@ -0,0 +1,18 @@
+import {isElementType} from '../misc/isElementType'
+
+/**
+ * Check if the element is the summary for its parent `<details>` element,
+ * i.e. the first `<summary>` child of a `<details>` element.
+ * Only this `<summary>` is activated per keyboard.
+ */
+export function isSummaryForParentDetails(element: Element) {
+  const parent = element.parentElement
+  return (
+    isElementType(element, 'summary') &&
+    !!parent &&
+    isElementType(parent, 'details') &&
+    Array.from(parent.children).find(child =>
+      isElementType(child, 'summary'),
+    ) === element
+  )
+}

src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './click/isClickableInput'
+export * from './click/isSummaryForParentDetails'
 
 export * from './dataTransfer/Blob'
 export * from './dataTransfer/DataTransfer'

tests/event/behavior/keypress.ts

@@ -125,6 +125,37 @@ cases(
   },
 )
 
+cases(
+  'trigger click on <summary> for [Enter]',
+  ({html, target = 'details/summary', hasClick = true}) => {
+    const {eventWasFired, getEvents, xpathNode} = render(html)
+
+    setupInstance().dispatchUIEvent(xpathNode(target), 'keypress', {
+      key: 'Enter',
+    })
+
+    expect(eventWasFired('click')).toBe(hasClick)
+    if (hasClick) {
+      expect(getEvents('click')[0]).toHaveProperty('detail', 0)
+    }
+  },
+  {
+    'on summary of details': {
+      html: `<details><summary>foo</summary></details>`,
+    },
+    'omit on summary outside of details': {
+      html: `<div><summary>foo</summary></div>`,
+      target: 'div/summary',
+      hasClick: false,
+    },
+    'omit on second summary of details': {
+      html: `<details><summary>foo</summary><summary>bar</summary></details>`,
+      target: 'details/summary[2]',
+      hasClick: false,
+    },
+  },
+)
+
 cases(
   'submit form on [Enter]',
   async ({html, click, submit}) => {

tests/event/behavior/keyup.ts

@@ -38,3 +38,32 @@ cases(
     },
   },
 )
+
+cases(
+  'trigger click on <summary> for [Space]',
+  ({html, target = 'details/summary', hasClick = true}) => {
+    const {eventWasFired, getEvents, xpathNode} = render(html)
+
+    setupInstance().dispatchUIEvent(xpathNode(target), 'keyup', {key: ' '})
+
+    expect(eventWasFired('click')).toBe(hasClick)
+    if (hasClick) {
+      expect(getEvents('click')[0]).toHaveProperty('detail', 0)
+    }
+  },
+  {
+    'on summary of details': {
+      html: `<details><summary>foo</summary></details>`,
+    },
+    'omit on summary outside of details': {
+      html: `<div><summary>foo</summary></div>`,
+      target: 'div/summary',
+      hasClick: false,
+    },
+    'omit on second summary of details': {
+      html: `<details><summary>foo</summary><summary>bar</summary></details>`,
+      target: 'details/summary[2]',
+      hasClick: false,
+    },
+  },
+)

tests/keyboard/index.ts

@@ -213,3 +213,16 @@ test('typing on focused element with iframe', async () => {
 
   iframe.remove()
 })
+
+test('toggle <details> per [Enter] and [Space] on <summary>', async () => {
+  const {element, xpathNode, user} = setup<HTMLDetailsElement>(
+    `<details><summary>foo</summary><p>bar</p></details>`,
+  )
+  expect(xpathNode('details/summary')).toHaveFocus()
+
+  await user.keyboard('[Enter]')
+  expect(element.open).toBe(true)
+
+  await user.keyboard('[Space]')
+  expect(element.open).toBe(false)
+})