fix(sortable-table): Make sortable table keyboard accessible

Sortable table columns can be tabbed to, and they can be sorted with the enter key. [Finishes #102033528] Signed-off-by: Dominick Reinhold <[email protected]>
pivotal-cf · Aug 26, 2015 · ffdfe3a · ffdfe3a
1 parent c136fd6
commit ffdfe3a
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/spec/pivotal-ui-react/sortable-table/sortable-table_spec.js b/spec/pivotal-ui-react/sortable-table/sortable-table_spec.js
@@ -139,7 +139,7 @@ describe('SortableTable', function() {
 
     it('sorts table rows by that column', function() {
       expect('th:contains("Bar")').toHaveClass('sorted-asc');
-      expect('th:contains("Title")').not.toHaveClass('sorted-asc');
+      expect('th:contains("Instances")').not.toHaveClass('sorted-asc');
 
       expect('tbody tr:nth-of-type(1) > td:eq(0)').toContainText('sup');
       expect('tbody tr:nth-of-type(2) > td:eq(0)').toContainText('yee');
@@ -151,6 +151,36 @@ describe('SortableTable', function() {
     });
   });
 
+  describe('pressing <enter> on a sortable column', function() {
+    beforeEach(function() {
+      $('th:contains("Bar")').simulate('keyPress', {key: 'Enter'});
+    });
+
+    it('sorts table rows by that column', function() {
+      expect('th:contains("Bar")').toHaveClass('sorted-asc');
+      expect('th:contains("Instances")').not.toHaveClass('sorted-asc');
+
+      expect('tbody tr:nth-of-type(1) > td:eq(0)').toContainText('sup');
+      expect('tbody tr:nth-of-type(2) > td:eq(0)').toContainText('yee');
+      expect('tbody tr:nth-of-type(3) > td:eq(0)').toContainText('foo');
+
+      expect('tbody tr:nth-of-type(1) > td:eq(2)').toContainText('7');
+      expect('tbody tr:nth-of-type(2) > td:eq(2)').toContainText('8');
+      expect('tbody tr:nth-of-type(3) > td:eq(2)').toContainText('9');
+    });
+  });
+
+  describe('pressing <space> on a sortable column', function() {
+    beforeEach(function() {
+      $('th:contains("Bar")').simulate('keyPress', {key: ' '});
+    });
+
+    it('does not sort table rows by that column', function() {
+      expect('th:contains("Bar")').not.toHaveClass('sorted-asc');
+      expect('th:contains("Instances")').toHaveClass('sorted-asc');
+    });
+  });
+
   describe('clicking on a non-sortable column', function() {
     beforeEach(function() {
       $('th:contains("Unsortable")').simulate('click');

diff --git a/src/pivotal-ui-react/sortable-table/sortable-table.js b/src/pivotal-ui-react/sortable-table/sortable-table.js
@@ -19,17 +19,23 @@ export const TableHeader = React.createClass({
     sortable: React.PropTypes.bool
   },
 
-  handleClick(...args) {
+  handleActivate(event) {
     var {sortable, onClick, onSortableTableHeaderClick} = this.props;
-    if (sortable) onSortableTableHeaderClick(...args);
-    if (onClick) onClick(...args);
+    if (sortable) onSortableTableHeaderClick(event);
+    if (onClick) onClick(event);
+  },
+
+  handleKeyPress(event) {
+    if (event.key === 'Enter') {
+      this.handleActivate(event);
+    }
   },
 
   render() {
     const {sortable, ...others} = this.props;
     const props = mergeProps(others, {className: {'sortable': sortable}});
 
-    return <th {...props} onClick={this.handleClick} role="columnheader"/>;
+    return <th {...props} onClick={this.handleActivate} onKeyPress={this.handleKeyPress} role="columnheader" tabIndex="0"/>;
   }
 });