SafeAnchor a11y - Provide keydown handler for "space"

src/SafeAnchor.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import elementType from 'prop-types-extra/lib/elementType';
+import createChainedFunction from './utils/createChainedFunction';
 
 const propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
+  onKeyDown: PropTypes.func,
   disabled: PropTypes.bool,
   role: PropTypes.string,
   tabIndex: PropTypes.oneOfType([
@@ -36,6 +38,7 @@ class SafeAnchor extends React.Component {
     super(props, context);
 
     this.handleClick = this.handleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
   }
 
   handleClick(event) {
@@ -55,8 +58,18 @@ class SafeAnchor extends React.Component {
     }
   }
 
+  handleKeyDown(event) {
+    event.preventDefault();
+    if (event.key === ' ') {
+      this.handleClick(event);
+    }
+  }
+
   render() {
-    const { componentClass: Component, disabled, ...props } = this.props;
+    const { componentClass: Component, disabled, onKeyDown, ...props } = this.props;
+
+    const handleKeyDown = Component === 'a' ?
+      createChainedFunction(this.handleKeyDown, onKeyDown) : onKeyDown;
 
     if (isTrivialHref(props.href)) {
       props.role = props.role || 'button';
@@ -74,6 +87,7 @@ class SafeAnchor extends React.Component {
       <Component
         {...props}
         onClick={this.handleClick}
+        onKeyDown={handleKeyDown}
       />
     );
   }

test/SafeAnchorSpec.js

@@ -39,6 +39,17 @@ describe('SafeAnchor', () => {
     handleClick.should.have.been.calledOnce;
   });
 
+  it('provides onClick handler as onKeyDown handler for "space"', () => {
+    const handleClick = sinon.spy();
+
+    tsp(<SafeAnchor onClick={handleClick} />)
+      .shallowRender()
+      .find('a')
+      .trigger('keyDown', { key: ' ', preventDefault() {} });
+
+    handleClick.should.have.been.calledOnce;
+  });
+
   it('prevents default when no href is provided', () => {
     const handleClick = sinon.spy();