feat(list): enter and spacebar keyboard handling for List and Listitem

.github/add-a-feature.md

@@ -8,7 +8,6 @@ Add a feature
 - [Propose feature](#propose-feature)
 - [Prototype](#prototype)
 - [Spec out the API](#spec-out-the-api)
-- [Component anatomy](#component-anatomy)
 - [Create a component](#create-a-component)
   - [How to create a component](#how-to-create-a-component)
   - [Good practice](#good-practice)

CHANGELOG.md

@@ -33,6 +33,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Close `Popup` on outside click @kuzhelov ([#410](https://github.com/stardust-ui/react/pull/410))
 - Set default `chatBehavior` which uses Enter/Esc keys @sophieH29 ([#443](https://github.com/stardust-ui/react/pull/443))
 - Add `iconPosition` property to `Input` component @mnajdova ([#442](https://github.com/stardust-ui/react/pull/442)) 
+- Handle `Enter` and `Spacebar` keys for selectable `ListItem` @jurokapsiar ([#279](https://github.com/stardust-ui/react/pull/279)) 
 
 ### Documentation
 - Add all missing component descriptions and improve those existing @levithomason ([#400](https://github.com/stardust-ui/react/pull/400))

src/components/List/ListItem.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
-
 import * as PropTypes from 'prop-types'
+import * as _ from 'lodash'
 import { createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 import ItemLayout from '../ItemLayout/ItemLayout'
 import { listItemBehavior } from '../../lib/accessibility'
-import { Accessibility } from '../../lib/accessibility/types'
+import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
 import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types'
-import { Extendable } from '../../../types/utils'
+import { Extendable, ComponentEventHandler } from '../../../types/utils'
 
 export interface ListItemProps {
   accessibility?: Accessibility
@@ -20,6 +20,7 @@ export interface ListItemProps {
   headerMedia?: any
   important?: boolean
   media?: any
+  onClick?: ComponentEventHandler<ListItemProps>
   selection?: boolean
   truncateContent?: boolean
   truncateHeader?: boolean
@@ -63,6 +64,14 @@ class ListItem extends UIComponent<Extendable<ListItemProps>, ListItemState> {
     important: PropTypes.bool,
     media: PropTypes.any,
 
+    /**
+     * Called on click.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
+    onClick: PropTypes.func,
+
     /** A list item can indicate that it can be selected. */
     selection: PropTypes.bool,
     truncateContent: PropTypes.bool,
@@ -94,6 +103,14 @@ class ListItem extends UIComponent<Extendable<ListItemProps>, ListItemState> {
 
   private itemRef = React.createRef<HTMLElement>()
 
+  protected actionHandlers: AccessibilityActionHandlers = {
+    performClick: event => this.handleClick(event),
+  }
+
+  handleClick = e => {
+    _.invoke(this.props, 'onClick', e, this.props)
+  }
+
   renderComponent({ ElementType, classes, accessibility, rest, styles }) {
     const {
       as,
@@ -127,7 +144,9 @@ class ListItem extends UIComponent<Extendable<ListItemProps>, ListItemState> {
         headerMediaCSS={styles.headerMedia}
         contentCSS={styles.content}
         ref={this.itemRef}
+        onClick={this.handleClick}
         {...accessibility.attributes.root}
+        {...accessibility.keyHandlers.root}
         {...rest}
       />
     )

src/lib/accessibility/Behaviors/List/selectableListBehavior.ts

@@ -6,7 +6,6 @@ import { Accessibility } from '../../types'
  * Adds role='listbox'.
  * The listbox role is used to identify an element that creates a list from which a user may select one or more items.
  */
-
 const selectableListBehavior: Accessibility = (props: any) => ({
   attributes: {
     root: {

src/lib/accessibility/Behaviors/List/selectableListItemBehavior.ts

@@ -1,9 +1,11 @@
+import * as keyboardKey from 'keyboard-key'
 import { Accessibility } from '../../types'
 
 /**
  * @description
  * Adds role='option'. This role is used for a selectable item in a list.
  * Adds attribute 'aria-selected=true' based on the property 'active'. Based on this screen readers will recognize the selected state of the item.
+ * Performs click action with 'Enter' and 'Spacebar' on 'root'.
  */
 
 const selectableListItemBehavior: Accessibility = (props: any) => ({
@@ -16,6 +18,13 @@ const selectableListItemBehavior: Accessibility = (props: any) => ({
       }),
     },
   },
+  keyActions: {
+    root: {
+      performClick: {
+        keyCombinations: [{ keyCode: keyboardKey.Enter }, { keyCode: keyboardKey.Spacebar }],
+      },
+    },
+  },
 })
 
 export default selectableListItemBehavior

src/lib/accessibility/Behaviors/Menu/menuItemBehavior.ts

@@ -11,6 +11,7 @@ import * as keyboardKey from 'keyboard-key'
  * Adds attribute 'aria-label' based on the property 'aria-label' to 'anchor' component's part.
  * Adds attribute 'aria-labelledby' based on the property 'aria-labelledby' to 'anchor' component's part.
  * Adds attribute 'aria-describedby' based on the property 'aria-describedby' to 'anchor' component's part.
+ * Performs click action with 'Enter' and 'Spacebar' on 'anchor'.
  * The behavior is designed for particular structure of menu item. The item consists of root element and anchor inside the root element.
  */
 

test/specs/components/List/ListItem-test.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { isConformant, handlesAccessibility } from 'test/specs/commonTests'
+import { mountWithProvider } from 'test/utils'
+
+import ListItem from 'src/components/List/ListItem'
+import { selectableListItemBehavior } from 'src/lib/accessibility'
+
+describe('ListItem', () => {
+  isConformant(ListItem)
+  handlesAccessibility(ListItem, { defaultRootRole: 'listitem' })
+
+  describe('selectable list handleClick', () => {
+    test('is executed when Enter is pressed', () => {
+      const onClick = jest.fn()
+      const listItem = mountWithProvider(
+        <ListItem accessibility={selectableListItemBehavior} onClick={onClick} />,
+      ).find('ListItem')
+      listItem.simulate('keydown', { keyCode: 13 })
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    test('is executed when Spacebar is pressed', () => {
+      const onClick = jest.fn()
+      const listItem = mountWithProvider(
+        <ListItem accessibility={selectableListItemBehavior} onClick={onClick} />,
+      ).find('ListItem')
+      listItem.simulate('keydown', { keyCode: 32 })
+      expect(onClick).toHaveBeenCalled()
+    })
+  })
+})