fix(accessibility): apply accessibility handlers with applyAccessibilityKeyHandlers()

CHANGELOG.md

@@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Add aria posinset and setsize, hide menu indicator from narration @jurokapsiar ([#1066](https://github.com/stardust-ui/react/pull/1066))
+- Fix applying accessibility key handlers @layershifter ([#1072](https://github.com/stardust-ui/react/pull/1072))
 
 ### Features
 - Add `Alert` component @Bugaa92 ([#1063](https://github.com/stardust-ui/react/pull/1063))

packages/react/src/components/Attachment/Attachment.tsx

@@ -8,6 +8,7 @@ import {
   createShorthandFactory,
   commonPropTypes,
   isFromKeyboard,
+  applyAccessibilityKeyHandlers,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Button from '../Button/Button'
@@ -100,8 +101,8 @@ class Attachment extends UIComponent<ReactProps<AttachmentProps>, AttachmentStat
         onClick={this.handleClick}
         onFocus={this.handleFocus}
         {...accessibility.attributes.root}
-        {...accessibility.keyHandlers.root}
         {...unhandledProps}
+        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
       >
         {icon && (
           <div className={classes.icon}>

packages/react/src/components/Chat/Chat.tsx

@@ -8,6 +8,7 @@ import {
   UIComponent,
   commonPropTypes,
   rtlTextContainer,
+  applyAccessibilityKeyHandlers,
 } from '../../lib'
 import ChatItem from './ChatItem'
 import ChatMessage from './ChatMessage'
@@ -61,9 +62,9 @@ class Chat extends UIComponent<ReactProps<ChatProps>, any> {
       <ElementType
         className={classes.root}
         {...accessibility.attributes.root}
-        {...accessibility.keyHandlers.root}
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
+        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
       >
         {childrenExist(children) ? children : _.map(items, item => ChatItem.create(item))}
       </ElementType>

packages/react/src/components/Chat/ChatMessage.tsx

@@ -15,6 +15,7 @@ import {
   commonPropTypes,
   isFromKeyboard,
   rtlTextContainer,
+  applyAccessibilityKeyHandlers,
 } from '../../lib'
 import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../types'
 import { chatMessageBehavior, toolbarBehavior } from '../../lib/accessibility'
@@ -190,13 +191,13 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
 
     return (
       <ElementType
-        {...accessibility.attributes.root}
-        {...accessibility.keyHandlers.root}
-        {...rtlTextContainer.getAttributes({ forElements: [children] })}
-        {...unhandledProps}
         onBlur={this.handleBlur}
         onFocus={this.handleFocus}
         className={className}
+        {...accessibility.attributes.root}
+        {...unhandledProps}
+        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
       >
         {childrenPropExists ? (
           children

packages/react/src/components/Dialog/Dialog.tsx

@@ -10,6 +10,7 @@ import {
   ContentComponentProps,
   AutoControlledComponent,
   doesNodeContainClick,
+  applyAccessibilityKeyHandlers,
 } from '../../lib'
 import { dialogBehavior } from '../../lib/accessibility'
 import { FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
@@ -191,8 +192,8 @@ class Dialog extends AutoControlledComponent<ReactProps<DialogProps>, DialogStat
         <ElementType
           className={classes.root}
           {...accessibility.attributes.popup}
-          {...accessibility.keyHandlers.popup}
           {...unhandledProps}
+          {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.popup, unhandledProps)}
         >
           {Header.create(header, {
             defaultProps: {

packages/react/src/components/List/List.tsx

@@ -11,6 +11,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   rtlTextContainer,
+  applyAccessibilityKeyHandlers,
 } from '../../lib'
 import ListItem, { ListItemProps } from './ListItem'
 import { listBehavior } from '../../lib/accessibility'
@@ -166,9 +167,9 @@ class List extends AutoControlledComponent<ReactProps<ListProps>, ListState> {
     return (
       <ElementType
         {...accessibility.attributes.root}
-        {...accessibility.keyHandlers.root}
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
+        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
         className={classes.root}
       >
         {childrenExist(children) ? children : this.renderItems()}

packages/react/src/components/List/ListItem.tsx

@@ -8,6 +8,7 @@ import {
   commonPropTypes,
   ContentComponentProps,
   isFromKeyboard,
+  applyAccessibilityKeyHandlers,
 } from '../../lib'
 import Flex from '../Flex/Flex'
 import { listItemBehavior } from '../../lib/accessibility'
@@ -184,8 +185,8 @@ class ListItem extends UIComponent<ReactProps<ListItemProps>, ListItemState> {
         onClick={this.handleClick}
         onFocus={this.handleFocus}
         {...accessibility.attributes.root}
-        {...accessibility.keyHandlers.root}
         {...unhandledProps}
+        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
       >
         {mediaElement}
         <Flex.Item grow>

packages/react/src/components/Menu/MenuItem.tsx

@@ -16,6 +16,7 @@ import {
   isFromKeyboard,
   EventStack,
   rtlTextContainer,
+  applyAccessibilityKeyHandlers,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Menu from './Menu'
@@ -218,9 +219,9 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
           onBlur={this.handleBlur}
           onFocus={this.handleFocus}
           {...accessibility.attributes.root}
-          {...accessibility.keyHandlers.root}
           {...unhandledProps}
           {...!wrapper && { onClick: this.handleClick }}
+          {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
         >
           {icon &&
             Icon.create(this.props.icon, {
@@ -259,7 +260,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
         defaultProps: {
           className: cx(MenuItem.slotClassNames.wrapper, classes.wrapper),
           ...accessibility.attributes.wrapper,
-          ...accessibility.keyHandlers.wrapper,
+          ...applyAccessibilityKeyHandlers(accessibility.keyHandlers.wrapper, wrapper),
         },
         overrideProps: () => ({
           children: (

packages/react/src/components/Popup/Popup.tsx

@@ -6,6 +6,7 @@ import * as _ from 'lodash'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
 import {
+  applyAccessibilityKeyHandlers,
   childrenExist,
   AutoControlledComponent,
   EventStack,
@@ -418,9 +419,9 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
           }}
         >
           {React.cloneElement(triggerElement, {
-            ...triggerProps,
             ...accessibility.attributes.trigger,
-            ...accessibility.keyHandlers.trigger,
+            ...triggerProps,
+            ...applyAccessibilityKeyHandlers(accessibility.keyHandlers.trigger, triggerProps),
           })}
         </Ref>
       )

packages/react/src/components/RadioGroup/RadioGroup.tsx

@@ -12,6 +12,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   rtlTextContainer,
+  applyAccessibilityKeyHandlers,
 } from '../../lib'
 import RadioGroupItem, { RadioGroupItemProps } from './RadioGroupItem'
 import { radioGroupBehavior } from '../../lib/accessibility'
@@ -82,9 +83,9 @@ class RadioGroup extends AutoControlledComponent<ReactProps<RadioGroupProps>, an
     return (
       <ElementType
         {...accessibility.attributes.root}
-        {...accessibility.keyHandlers.root}
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
+        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
         className={classes.root}
       >
         {childrenExist(children) ? children : this.renderItems(vertical)}

packages/react/src/components/RadioGroup/RadioGroupItem.tsx

@@ -10,6 +10,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  applyAccessibilityKeyHandlers,
 } from '../../lib'
 import Box from '../Box/Box'
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
@@ -157,13 +158,13 @@ class RadioGroupItem extends AutoControlledComponent<
     return (
       <Ref innerRef={this.elementRef}>
         <ElementType
-          {...accessibility.attributes.root}
-          {...accessibility.keyHandlers.root}
-          {...unhandledProps}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onClick={this.handleClick}
           className={classes.root}
+          {...accessibility.attributes.root}
+          {...unhandledProps}
+          {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
         >
           {Icon.create(icon || '', {
             defaultProps: {

packages/react/src/lib/applyAccessibilityKeyHandlers.ts

@@ -0,0 +1,31 @@
+import * as _ from 'lodash'
+import * as React from 'react'
+
+import { Props, ShorthandValue } from '../types'
+import { KeyboardHandler, OnKeyDownHandler } from './accessibility/types'
+
+const applyAccessibilityKeyHandlers = (
+  keyHandlers: OnKeyDownHandler,
+  value: Props | ShorthandValue,
+) => {
+  const valIsPropsObject = _.isPlainObject(value)
+  const valIsReactElement = React.isValidElement(value)
+
+  const slotProps =
+    (valIsReactElement && (value as React.ReactElement<Props>).props) ||
+    (valIsPropsObject && (value as Props)) ||
+    {}
+
+  return _.mapValues(
+    keyHandlers,
+    (accessibilityHandler: KeyboardHandler, handleName: string) => (
+      e: KeyboardEvent,
+      ...args: any[]
+    ) => {
+      accessibilityHandler(e)
+      _.invoke(slotProps, handleName, e, ...args)
+    },
+  )
+}
+
+export default applyAccessibilityKeyHandlers

packages/react/src/lib/getKeyDownHandlers.ts

@@ -2,7 +2,6 @@ import * as _ from 'lodash'
 import * as keyboardKey from 'keyboard-key'
 import keyboardHandlerFilter from './keyboardHandlerFilter'
 import { AccessibilityActionHandlers, ActionsKeyHandler, KeyActions } from './accessibility/types'
-import { State, PropsWithVarsAndStyles } from '../themes/types'
 
 const rtlKeyMap = {
   [keyboardKey.ArrowRight]: keyboardKey.ArrowLeft,
@@ -14,13 +13,11 @@ const rtlKeyMap = {
  * and keys mappings defined in Accessibility behavior
  * @param {AccessibilityActionHandlers} componentActionHandlers Actions handlers defined in a component.
  * @param {KeyActions} behaviorKeyActions Mappings of actions and keys defined in Accessibility behavior.
- * @param {State & PropsWithVarsAndStyles} props The props which are used to invoke onKeyDown handler passed from top.
  * @param {boolean} isRtlEnabled Indicates if Left and Right arrow keys should be swapped in RTL mode.
  */
 const getKeyDownHandlers = (
   componentActionHandlers: AccessibilityActionHandlers,
   behaviorKeyActions: KeyActions,
-  props: State & PropsWithVarsAndStyles,
   isRtlEnabled?: boolean,
 ): ActionsKeyHandler => {
   const keyHandlers = {}
@@ -57,8 +54,6 @@ const getKeyDownHandlers = (
 
           eventHandler && eventHandler(event)
         })
-
-        _.invoke(props, 'onKeyDown', event, props)
       },
     }
   }

packages/react/src/lib/index.ts

@@ -5,6 +5,7 @@ import 'mdn-polyfills/String.prototype.includes'
 import * as customPropTypes from './customPropTypes'
 import * as commonPropTypes from './commonPropTypes'
 
+export { default as applyAccessibilityKeyHandlers } from './applyAccessibilityKeyHandlers'
 export { default as AutoControlledComponent } from './AutoControlledComponent'
 export { default as childrenExist } from './childrenExist'
 export * from './colorUtils'

packages/react/src/lib/renderComponent.tsx

@@ -71,12 +71,7 @@ const getAccessibility = (
     defaultAccessibility ||
     defaultBehavior)(props)
 
-  const keyHandlers = getKeyDownHandlers(
-    actionHandlers,
-    accessibility.keyActions,
-    props,
-    isRtlEnabled,
-  )
+  const keyHandlers = getKeyDownHandlers(actionHandlers, accessibility.keyActions, isRtlEnabled)
   return {
     ...accessibility,
     keyHandlers,

packages/react/test/specs/commonTests/isConformant.tsx

@@ -90,6 +90,27 @@ export default (Component, options: Conformant = {}) => {
     return wrapperComponent ? toNextNonTrivialChild(topLevelChildElement) : topLevelChildElement
   }
 
+  const getEventTargetComponent = (wrapper: ReactWrapper, listenerName: string) => {
+    const eventTarget = eventTargets[listenerName]
+      ? wrapper
+          .find(eventTargets[listenerName])
+          .hostNodes()
+          .first()
+      : wrapper
+          .find('[data-simulate-event-here]')
+          .hostNodes()
+          .first()
+
+    // if (eventTarget.length === 0) {
+    //   throw new Error(
+    //     'The event prop was not delegated to the children. You probably ' +
+    //     'forgot to use `getUnhandledProps` util to spread the `unhandledProps` props.',
+    //   )
+    // }
+
+    return eventTarget
+  }
+
   // make sure components are properly exported
   if (componentType !== 'function') {
     throwError(`Components should export a class or function, got: ${componentType}.`)
@@ -344,6 +365,24 @@ export default (Component, options: Conformant = {}) => {
 
       expect(element.prop(IS_FOCUSABLE_ATTRIBUTE)).toBe(false)
     })
+
+    _.forEach(['onKeyDown', 'onKeyPress', 'onKeyUp'], listenerName => {
+      test(`handles ${listenerName} transparently`, () => {
+        // onKeyDown => keyDown
+        const eventName = _.camelCase(listenerName.replace('on', ''))
+        const handler = jest.fn()
+
+        const wrapperProps = {
+          ...requiredProps,
+          'data-simulate-event-here': true,
+          [listenerName]: handler,
+        }
+        const wrapper = mount(<Component {...wrapperProps} />)
+
+        getEventTargetComponent(wrapper, listenerName).simulate(eventName)
+        expect(handler).toBeCalledTimes(1)
+      })
+    })
   }
 
   // ----------------------------------------
@@ -372,23 +411,7 @@ export default (Component, options: Conformant = {}) => {
         }
 
         const component = mount(<Component {...props} />).childAt(0)
-
-        const eventTarget = eventTargets[listenerName]
-          ? component
-              .find(eventTargets[listenerName])
-              .hostNodes()
-              .first()
-          : component
-              .find('[data-simulate-event-here]')
-              .hostNodes()
-              .first()
-
-        if (eventTarget.length === 0) {
-          throw new Error(
-            'The event prop was not delegated to the children. You probably ' +
-              'forgot to use `getUnhandledProps` util to spread the `unhandledProps` props.',
-          )
-        }
+        const eventTarget = getEventTargetComponent(component, listenerName)
         const customHandler: Function = eventTarget.prop(listenerName)
 
         if (customHandler) {

packages/react/test/specs/components/Input/Input-test.tsx

@@ -32,7 +32,12 @@ const setUserInputValue = (inputComp: ReactWrapper, value: string) => {
 describe('Input', () => {
   describe('conformance', () => {
     isConformant(Input, {
-      eventTargets: { onChange: 'input' },
+      eventTargets: {
+        onChange: 'input',
+        onKeyDown: 'input',
+        onKeyPress: 'input',
+        onKeyUp: 'input',
+      },
     })
   })