8000 Don't set role=button on non-sortable table headers · leetcode/reactable@515087c · GitHub
[go: up one dir, main page]
Skip to content

Commit 515087c

Browse files
glittersharkglittershark
committed
Don't set role=button on non-sortable table headers
Fixes glittershark#278
1 parent c437d93 commit 515087c

File tree

4 files changed

+14
-4
lines changed

4 files changed

+14
-4
lines changed

‎build/reactable.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -675,9 +675,11 @@ window.ReactDOM["default"] = window.ReactDOM;
675675
var column = this.props.columns[index];
676676
var thClass = 'reactable-th-' + column.key.replace(/\s+/g, '-').toLowerCase();
677677
var sortClass = '';
678+
var thRole = null;
678679

679680
if (this.props.sortableColumns[column.key]) {
680681
sortClass += 'reactable-header-sortable ';
682+
thRole = 'button';
681683
}
682684

683685
if (this.props.sort.column === column.key) {
@@ -704,7 +706,7 @@ window.ReactDOM["default"] = window.ReactDOM;
704706
key: index,
705707
onClick: this.handleClickTh.bind(this, column),
706708
onKeyDown: this.handleKeyDownTh.bind(this, column),
707-
role: 'button',
709+
role: thRole,
708710
tabIndex: '0' }),
709711
column.label
710712
));

‎lib/reactable/thead.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,11 @@ var Thead = (function (_React$Component) {
5656
var column = this.props.columns[index];
5757
var thClass = 'reactable-th-' + column.key.replace(/\s+/g, '-').toLowerCase();
5858
var sortClass = '';
59+
var thRole = null;
5960

6061
if (this.props.sortableColumns[column.key]) {
6162
sortClass += 'reactable-header-sortable ';
63+
thRole = 'button';
6264
}
6365

6466
if (this.props.sort.column === column.key) {
@@ -85,7 +87,7 @@ var Thead = (function (_React$Component) {
8587
key: index,
8688
onClick: this.handleClickTh.bind(this, column),
8789
onKeyDown: this.handleKeyDownTh.bind(this, column),
88-
role: 'button',
90+
role: thRole,
8991
tabIndex: '0' }),
9092
column.label
9193
));

‎src/reactable/thead.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,11 @@ export class Thead extends React.Component {
5858
var column = this.props.columns[index];
5959
var thClass = `reactable-th-${column.key.replace(/\s+/g, '-').toLowerCase()}`;
6060
var sortClass = '';
61+
var thRole = null;
6162

6263
if (this.props.sortableColumns[column.key]) {
6364
sortClass += 'reactable-header-sortable ';
65+
thRole = 'button';
6466
}
6567

6668
if (this.props.sort.column === column.key) {
@@ -90,7 +92,7 @@ export class Thead extends React.Component {
9092
key={index}
9193
onClick={this.handleClickTh.bind(this, column)}
9294
onKeyDown={this.handleKeyDownTh.bind(this, column)}
93-
role="button"
95+
role={thRole}
9496
tabIndex="0">
9597
{column.label}
9698
</Th>

‎tests/reactable_test.jsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1444,7 +1444,6 @@ describe('Reactable', function() {
14441444
});
14451445
});
14461446

1447-
14481447
describe('unsortable column', function(){
14491448
before(function() {
14501449
ReactDOM.render(
@@ -1471,6 +1470,11 @@ describe('Reactable', function() {
14711470
ReactableTestUtils.expectRowText(1, ['Griffin Smith', '18', 'Engineer']);
14721471
ReactableTestUtils.expectRowText(2, ['Ian Zhang', '28', 'Developer']);
14731472
});
1473+
1474+
it("doesn't give non-sortable headers a role=button", function() {
1475+
var nameHeader = $('#table thead tr.reactable-column-header th:first');
1476+
expect($(nameHeader)).to.not.have.attr('role', 'button');
1477+
})
14741478
});
14751479

14761480
[Reactable.Sort.Numeric, Reactable.Sort.NumericInteger].forEach(function(method) {

0 commit comments

Comments
 (0)
0