First pass at making internal chart elements accessible from keyboard

src/base/base-mixin.js

@@ -1,4 +1,4 @@
-import {select} from 'd3-selection';
+import {select, event as d3Event} from 'd3-selection';
 import {dispatch} from 'd3-dispatch';
 import {ascending} from 'd3-array';
 
@@ -73,6 +73,7 @@ export class BaseMixin {
     constructor () {
         this.__dcFlag__ = utils.uniqueId();
         this._svgDescription = this.constructor.name || '';
+        this._keyboardAccessible = false;
 
         this._dimension = undefined;
         this._group = undefined;
@@ -548,6 +549,19 @@ export class BaseMixin {
         return this;
     }
 
+    /**
+     * Whether interactive chart elements will be accessible by keyboard using tabindex.
+     * @param {Boolean} [keyboardAccessible=false]
+     * @returns {Boolean|BarChart}
+     */
+    keyboardAccessible (keyboardAccessible) {
+        if (!arguments.length) {
+            return this._keyboardAccessible;
+        }
+        this._keyboardAccessible = keyboardAccessible;
+        return this;
+    }
+
     /**
      * Set or get the filter printer function. The filter printer function is used to generate human
      * friendly text for filter value(s) associated with the chart instance. The text will get shown
@@ -686,11 +700,34 @@ export class BaseMixin {
             this._legend.render();
         }
 
+        if (this._keyboardAccessible) {
+            this._makeKeyboardAccessible();
+        }
+
         this._activateRenderlets('postRender');
 
         return result;
     }
 
+    _makeKeyboardAccessible () {
+        this._svg.selectAll('.dc-tabbable')
+                .attr('tabindex', 0)
+                .on('keydown', d => {
+
+                    if (d3Event.keyCode === 13) {
+                        console.log('clicked!');
+                        this.onClick(d);
+                    } 
+                    // special case for space key press - prevent scrolling
+                    if (d3Event.keyCode === 32) {
+                        console.log('clicked!');
+                        this.onClick(d);
+                        d3Event.preventDefault();
+                    }
+
+                })
+    }
+
     _activateRenderlets (event) {
         this._listeners.call('pretransition', this, this);
         if (this.transitionDuration() > 0 && this._svg) {
@@ -729,6 +766,10 @@ export class BaseMixin {
             this._legend.render();
         }
 
+        if (this._keyboardAccessible) {
+            this._makeKeyboardAccessible();
+        }
+
         this._activateRenderlets('postRedraw');
 
         return result;

src/charts/bar-chart.js

@@ -176,7 +176,7 @@ export class BarChart extends StackMixin {
 
         const enter = bars.enter()
             .append('rect')
-            .attr('class', 'bar')
+            .attr('class', `bar ${this._keyboardAccessible ? 'dc-tabbable' : ''}`)
             .attr('fill', pluck('data', this.getColor))
             .attr('x', d => this._barXPos(d))
             .attr('y', this.yAxisHeight())

style/dc.scss

@@ -34,7 +34,7 @@ $font_sans_serif: sans-serif;
         &.bar {
             stroke: none;
             cursor: pointer;
-            &:hover {
+            &:hover,&:focus {
                 fill-opacity: .5;
             }
         }
@@ -50,7 +50,7 @@ $font_sans_serif: sans-serif;
         &.external {
             fill: $color_black;
         }
-        :hover, &.highlight {
+        :hover,:focus &.highlight {
             fill-opacity: .8;
         }
     }
@@ -123,7 +123,7 @@ $font_sans_serif: sans-serif;
     g {
         &.state {
             cursor: pointer;
-            :hover {
+            :hover,:focus {
                 fill-opacity: .8;
             }
             path {
@@ -142,7 +142,7 @@ $font_sans_serif: sans-serif;
             rect {
                 fill-opacity: 0.8;
                 cursor: pointer;
-                &:hover {
+                &:hover,&:focus {
                     fill-opacity: 0.6;
                 }
             }
@@ -173,7 +173,7 @@ $font_sans_serif: sans-serif;
     .node {
         font-size: 0.7em;
         cursor: pointer;
-        :hover {
+        :hover,:focus {
             fill-opacity: .8;
         }
     }