Add keyboard accessibility

src/DateTime.js

@@ -6,6 +6,7 @@ import MonthsView from './views/MonthsView';
 import YearsView from './views/YearsView';
 import TimeView from './views/TimeView';
 import onClickOutside from 'react-onclickoutside';
+import { callHandler } from './utils';
 
 const viewModes = {
 	YEARS: 'years',
@@ -89,7 +90,7 @@ export default class Datetime extends React.Component {
 		return (
 			<ClickableWrapper className={ this.getClassName() } onClickOut={ this._handleClickOutside }>
 				{ this.renderInput() }
-				<div className="rdtPicker">
+				<div className="rdtPicker" onKeyDown={this._onPickerKeyDown}>
 					{ this.renderView() }
 				</div>
 			</ClickableWrapper>
@@ -586,9 +587,13 @@ export default class Datetime extends React.Component {
 	_onInputKeyDown = e => {
 		if ( !this.callHandler( this.props.inputProps.onKeyDown, e ) ) return;
 
-		if ( e.which === 9 && this.props.closeOnTab ) {
+		if ( (e.which === 9 && this.props.closeOnTab) || e.key === 'Escape' ) {
 			this._closeCalendar();
 		}
+
+		if ( !this.isOpen() && e.key === 'ArrowDown' ) {
+			this._openCalendar();
+		}
 	}
 
 	_onInputClick = e => {
@@ -599,10 +604,13 @@ export default class Datetime extends React.Component {
 		this._openCalendar();
 	}
 
-	callHandler( method, e ) {
-		if ( !method ) return true;
-		return method(e) !== false;
+	_onPickerKeyDown = (e) => {
+		if (this.props.input && e.key === 'Escape') {
+			this._closeCalendar();
+		}
 	}
+
+	callHandler = callHandler
 }
 
 function log( message, method ) {

src/parts/ViewNavigation.js

@@ -1,15 +1,16 @@
 import React from 'react';
+import { getKeyboardProps } from '../utils';
 
 export default function ViewNavigation( { onClickPrev, onClickSwitch, onClickNext, switchContent, switchColSpan, switchProps } ) {
 	return (
 		<tr>
-			<th className="rdtPrev" onClick={ onClickPrev }>
+			<th className="rdtPrev" onClick={onClickPrev} {...getKeyboardProps(onClickPrev)}>
 				<span>‹</span>
 			</th>
-			<th className="rdtSwitch" colSpan={ switchColSpan } onClick={ onClickSwitch } {...switchProps}>
+			<th className="rdtSwitch" colSpan={switchColSpan} onClick={onClickSwitch} {...getKeyboardProps(onClickSwitch)} {...switchProps}>
 				{ switchContent }
 			</th>
-			<th className="rdtNext" onClick={ onClickNext }>
+			<th className="rdtNext" onClick={onClickNext} {...getKeyboardProps(onClickNext)}>
 				<span>›</span>
 			</th>
 		</tr>

src/utils.js

@@ -0,0 +1,9 @@
+export const callHandler = (method, e) => {
+	if (!method) return true;
+	return method(e) !== false;
+};
+
+export const getKeyboardProps = (onClickHandler) => ({
+	tabIndex: 0,
+	onKeyDown: (e) => e.key !== 'Enter' || callHandler(onClickHandler, e),
+});

src/views/DaysView.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ViewNavigation from '../parts/ViewNavigation';
+import { getKeyboardProps } from '../utils';
 
 export default class DaysView extends React.Component {
 	static defaultProps = {
@@ -104,6 +105,7 @@ export default class DaysView extends React.Component {
 
 		if ( this.props.isValidDate(date) ) {
 			dayProps.onClick = this._setDate;
+			dayProps = { ...getKeyboardProps(dayProps.onClick), ...dayProps };
 		}
 		else {
 			className += ' rdtDisabled';
@@ -123,7 +125,9 @@ export default class DaysView extends React.Component {
 		return (
 			<tfoot>
 				<tr>
-					<td onClick={ () => this.props.showView('time') }
+					<td
+						{...getKeyboardProps(this._onFooterClick)}
+						onClick={this._onFooterClick}
 						colSpan={7}
 						className="rdtTimeToggle">
 						{ date.format( this.props.timeFormat ) }
@@ -133,6 +137,10 @@ export default class DaysView extends React.Component {
 		);
 	}
 
+	_onFooterClick = () => {
+		this.props.showView('time');
+	}
+
 	_setDate = e => {
 		this.props.updateDate( e );
 	}

src/views/MonthsView.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ViewNavigation from '../parts/ViewNavigation';
+import { getKeyboardProps } from '../utils';
 
 export default class MonthsView extends React.Component {
 	render() {
@@ -52,19 +53,27 @@ export default class MonthsView extends React.Component {
 		const selectedDate = this.props.selectedDate;
 		let className = 'rdtMonth';
 		let onClick;
+		let keyboardProps = {};
 
 		if ( this.isDisabledMonth( month ) ) {
 			className += ' rdtDisabled';
 		}
 		else {
 			onClick = this._updateSelectedMonth;
+			keyboardProps = getKeyboardProps(onClick);
 		}
 
 		if ( selectedDate && selectedDate.year() === this.props.viewDate.year() && selectedDate.month() === month ) {
 			className += ' rdtActive';
 		}
 
-		let props = {key: month, className, 'data-value': month, onClick };
+		let props = {
+			...keyboardProps,
+			key: month,
+			className,
+			'data-value': month,
+			onClick
+		};
 
 		if ( this.props.renderMonth ) {
 			return this.props.renderMonth(

src/views/TimeView.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { getKeyboardProps } from '../utils';
 
 const timeConstraints = {
 	hours: {
@@ -95,11 +96,19 @@ export default class TimeView extends React.Component {
 			}
 		}
 
+		const increaseCounter = (e) => {
+			this.onStartClicking(e, 'increase', type);
+		};
+
+		const decreaseCounter = (e) => {
+			this.onStartClicking(e, 'decrease', type);
+		};
+
 		return (
 			<div key={ type } className="rdtCounter">
-				<span className="rdtBtn" onMouseDown={ e => this.onStartClicking( e, 'increase', type)}>▲</span>
+				<span className="rdtBtn" onMouseDown={increaseCounter} {...getKeyboardProps(increaseCounter)}>▲</span>
 				<div className="rdtCount">{ value }</div>
-				<span className="rdtBtn" onMouseDown={ e => this.onStartClicking( e, 'decrease', type)}>▼</span>
+				<span className="rdtBtn" onMouseDown={decreaseCounter} {...getKeyboardProps(decreaseCounter)}>▼</span>
 			</div>
 		);
 	}
@@ -112,27 +121,39 @@ export default class TimeView extends React.Component {
 		return (
 			<thead>
 				<tr>
-					<td className="rdtSwitch" colSpan="4" onClick={ () => this.props.showView('days') }>
+					<td
+						{...getKeyboardProps(this._onHeaderClick)}
+						className="rdtSwitch"
+						colSpan="4"
+						onClick={this._onHeaderClick}
+					>
 						{ date.format( this.props.dateFormat ) }
 					</td>
 				</tr>
 			</thead>
 		);
 	}
 
+	_onHeaderClick = () => {
+		this.props.showView('days');
+	}
+
 	onStartClicking( e, action, type ) {
 		if ( e && e.button && e.button !== 0 ) {
 			// Only left clicks, thanks
 			return;
 		}
 
 		if ( type === 'ampm' ) return this.toggleDayPart();
-
+		
 		let update = {};
 		let body = document.body;
 		update[ type ] = this[ action ]( type );
 		this.setState( update );
 
+		// keydown event auto repeats
+		if (e.type === 'keydown') return;
+
 		this.timer = setTimeout( () => {
 			this.increaseTimer = setInterval( () => {
 				update[ type ] = this[ action ]( type );

src/views/YearsView.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ViewNavigation from '../parts/ViewNavigation';
+import { getKeyboardProps } from '../utils';
 
 export default class YearsView extends React.Component {
 	static defaultProps = {
@@ -56,19 +57,27 @@ export default class YearsView extends React.Component {
 		const selectedYear = this.getSelectedYear();
 		let className = 'rdtYear';
 		let onClick;
+		let keyboardProps = {};
 
 		if ( this.isDisabledYear( year ) ) {
 			className += ' rdtDisabled';
 		}
 		else {
 			onClick = this._updateSelectedYear;
+			keyboardProps = getKeyboardProps(onClick);
 		}
 
 		if ( selectedYear === year ) {
 			className += ' rdtActive';
 		}
 
-		let props = {key: year, className, 'data-value': year, onClick };
+		let props = {
+			...keyboardProps,
+			key: year,
+			className,
+			'data-value': year,
+			onClick
+		};
 
 		return this.props.renderYear(
 			props,