Don't set role=button on non-sortable table headers

Fixes glittershark#278

Author: glittershark

build/reactable.js

@@ -675,9 +675,11 @@ window.ReactDOM["default"] = window.ReactDOM;
                     var column = this.props.columns[index];
                     var thClass = 'reactable-th-' + column.key.replace(/\s+/g, '-').toLowerCase();
                     var sortClass = '';
+                    var thRole = null;
 
                     if (this.props.sortableColumns[column.key]) {
                         sortClass += 'reactable-header-sortable ';
+                        thRole = 'button';
                     }
 
                     if (this.props.sort.column === column.key) {
@@ -704,7 +706,7 @@ window.ReactDOM["default"] = window.ReactDOM;
                             key: index,
                             onClick: this.handleClickTh.bind(this, column),
                             onKeyDown: this.handleKeyDownTh.bind(this, column),
-                            role: 'button',
+                            role: thRole,
                             tabIndex: '0' }),
                         column.label
                     ));

lib/reactable/thead.js

@@ -56,9 +56,11 @@ var Thead = (function (_React$Component) {
                 var column = this.props.columns[index];
                 var thClass = 'reactable-th-' + column.key.replace(/\s+/g, '-').toLowerCase();
                 var sortClass = '';
+                var thRole = null;
 
                 if (this.props.sortableColumns[column.key]) {
                     sortClass += 'reactable-header-sortable ';
+                    thRole = 'button';
                 }
 
                 if (this.props.sort.column === column.key) {
@@ -85,7 +87,7 @@ var Thead = (function (_React$Component) {
                         key: index,
                         onClick: this.handleClickTh.bind(this, column),
                         onKeyDown: this.handleKeyDownTh.bind(this, column),
-                        role: 'button',
+                        role: thRole,
                         tabIndex: '0' }),
                     column.label
                 ));

src/reactable/thead.jsx

@@ -58,9 +58,11 @@ export class Thead extends React.Component {
             var column = this.props.columns[index];
             var thClass = `reactable-th-${column.key.replace(/\s+/g, '-').toLowerCase()}`;
             var sortClass = '';
+            var thRole = null;
 
             if (this.props.sortableColumns[column.key]) {
                 sortClass += 'reactable-header-sortable ';
+                thRole = 'button';
             }
 
             if (this.props.sort.column === column.key) {
@@ -90,7 +92,7 @@ export class Thead extends React.Component {
                     key={index}
                     onClick={this.handleClickTh.bind(this, column)}
                     onKeyDown={this.handleKeyDownTh.bind(this, column)}
-                    role="button"
+                    role={thRole}
                     tabIndex="0">
                     {column.label}
                 </Th>

tests/reactable_test.jsx

@@ -1444,7 +1444,6 @@ describe('Reactable', function() {
             });
         });
 
-
         describe('unsortable column', function(){
             before(function() {
                 ReactDOM.render(
@@ -1471,6 +1470,11 @@ describe('Reactable', function() {
                 ReactableTestUtils.expectRowText(1, ['Griffin Smith', '18', 'Engineer']);
                 ReactableTestUtils.expectRowText(2, ['Ian Zhang', '28', 'Developer']);
             });
+
+            it("doesn't give non-sortable headers a role=button", function() {
+                var nameHeader = $('#table thead tr.reactable-column-header th:first');
+                expect($(nameHeader)).to.not.have.attr('role', 'button');
+            })
         });
 
         [Reactable.Sort.Numeric, Reactable.Sort.NumericInteger].forEach(function(method) {