fix(Popup): Adding toggle functionality if trigger element is not button (#758)

* adding toggle functionality if trigger element is not button

* adding tests for toggle popover with enter/space key

* adressing comment from PR

* adding open popup

* reverting downshift version package

* first refactor of the test

* refactoring tests 2

* -revert yarn.lock changes

* -improved test namings and typings

* -update changelog

* -fixed type name

Author: kolaps33

CHANGELOG.md

@@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `create` shorthand factory to `Header` component @layershifter ([#809](https://github.com/stardust-ui/react/pull/809))
 - Add `keyframeParams` prop in the `Animation` component and the `animation` prop @mnajdova ([#794](https://github.com/stardust-ui/react/pull/794))
 - Add `Dialog` component @layershifter ([#790](https://github.com/stardust-ui/react/pull/790))
+- Add toggle functionality in the `Popoup` even if the `trigger` is not button @kolaps33 ([#758](https://github.com/stardust-ui/react/pull/758))
 
 ### Fixes
 - Handle `onClick` and `onFocus` on ListItems correctly @layershifter ([#779](https://github.com/stardust-ui/react/pull/779))

src/components/Popup/Popup.tsx

@@ -176,6 +176,14 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
       e.stopPropagation()
     },
     close: e => this.close(e),
+    toggle: e => {
+      e.preventDefault()
+      this.trySetOpen(!this.state.open, e)
+    },
+    open: e => {
+      e.preventDefault()
+      this.setPopupOpen(true, e)
+    },
   }
 
   public componentDidMount() {

src/lib/accessibility/Behaviors/Popup/popupBehavior.ts

@@ -10,6 +10,7 @@ import * as _ from 'lodash'
  * Adds attribute 'aria-disabled=true' to 'trigger' component's part if 'disabled' property is true. Does not set the attribute otherwise.
  */
 const popupBehavior: Accessibility = (props: any) => {
+  const onAsArray = _.isArray(props.on) ? props.on : [props.on]
   return {
     attributes: {
       trigger: {
@@ -31,6 +32,18 @@ const popupBehavior: Accessibility = (props: any) => {
         close: {
           keyCombinations: [{ keyCode: keyboardKey.Escape }],
         },
+        toggle: {
+          keyCombinations: _.includes(onAsArray, 'click') && [
+            { keyCode: keyboardKey.Enter },
+            { keyCode: keyboardKey.Spacebar },
+          ],
+        },
+        open: {
+          keyCombinations: _.includes(onAsArray, 'hover') && [
+            { keyCode: keyboardKey.Enter },
+            { keyCode: keyboardKey.Spacebar },
+          ],
+        },
       },
     },
   }

test/specs/components/Popup/Popup-test.tsx

@@ -7,8 +7,10 @@ import {
   Position,
   Alignment,
 } from 'src/components/Popup/positioningHelper'
-import Popup from 'src/components/Popup/Popup'
+import Popup, { PopupEvents } from 'src/components/Popup/Popup'
 import { mountWithProvider } from '../../../utils'
+import * as keyboardKey from 'keyboard-key'
+import { ReactWrapper } from 'enzyme'
 
 type PositionTestInput = {
   align: Alignment
@@ -18,6 +20,8 @@ type PositionTestInput = {
 }
 
 describe('Popup', () => {
+  const triggerId = 'triggerElement'
+  const contentId = 'contentId'
   const testPopupPosition = ({
     align,
     position,
@@ -36,6 +40,36 @@ describe('Popup', () => {
   }: PositionTestInput & { rtl?: never }) =>
     testPopupPosition({ align, position, expectedPlacement, rtl: true })
 
+  const getPopupContent = (popup: ReactWrapper) => {
+    return popup.find(`#${contentId}`)
+  }
+
+  type ExpectPopupToOpenAndCloseParams = {
+    onProp: PopupEvents
+    keyboardKeyToOpen: keyboardKey
+    keyboardKeyToClose: keyboardKey
+  }
+
+  const expectPopupToOpenAndClose = ({
+    onProp,
+    keyboardKeyToOpen,
+    keyboardKeyToClose,
+  }: ExpectPopupToOpenAndCloseParams) => {
+    const popup = mountWithProvider(
+      <Popup
+        trigger={<span id={triggerId}> text to trigger popup </span>}
+        content={<span id={contentId} />}
+        on={onProp}
+      />,
+    )
+    const popupTriggerElement = popup.find(`#${triggerId}`)
+    popupTriggerElement.simulate('keydown', { keyCode: keyboardKeyToOpen })
+    expect(getPopupContent(popup).length).toBe(1)
+
+    popupTriggerElement.simulate('keydown', { keyCode: keyboardKeyToClose })
+    expect(getPopupContent(popup).length).toBe(0)
+  }
+
   describe('handles Popup position correctly in ltr', () => {
     testPopupPosition({ position: 'above', align: 'start', expectedPlacement: 'top-start' })
     testPopupPosition({ position: 'above', align: 'center', expectedPlacement: 'top' })
@@ -131,4 +165,35 @@ describe('Popup', () => {
       expect(spy.mock.calls[0][1]).toMatchObject({ open: true })
     })
   })
+
+  describe('open/close popup by keyboard', () => {
+    test(`toggle popup with Enter key`, () => {
+      expectPopupToOpenAndClose({
+        onProp: 'click',
+        keyboardKeyToOpen: keyboardKey.Enter,
+        keyboardKeyToClose: keyboardKey.Enter,
+      })
+    })
+    test(`toggle popup with Space key`, () => {
+      expectPopupToOpenAndClose({
+        onProp: 'click',
+        keyboardKeyToOpen: keyboardKey.Spacebar,
+        keyboardKeyToClose: keyboardKey.Spacebar,
+      })
+    })
+    test(`open popup with Enter key and close it with escape key`, () => {
+      expectPopupToOpenAndClose({
+        onProp: 'hover',
+        keyboardKeyToOpen: keyboardKey.Enter,
+        keyboardKeyToClose: keyboardKey.Escape,
+      })
+    })
+    test(`open popup with Space key and close it with escape key`, () => {
+      expectPopupToOpenAndClose({
+        onProp: 'hover',
+        keyboardKeyToOpen: keyboardKey.Spacebar,
+        keyboardKeyToClose: keyboardKey.Escape,
+      })
+    })
+  })
 })