Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(tables): remove role=button for unsortable headers
- [fixes #135428543]
Signed-off-by: Jean de Klerk <jadekler@pivotal.io>
  • Loading branch information
rdy authored and weymanf committed Dec 5, 2016
1 parent cd1768b commit 7f1a2d6
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 7 deletions.
1 change: 1 addition & 0 deletions library/spec/pivotal-ui-react/table/table_spec.js
Expand Up @@ -570,6 +570,7 @@ describe('Table', function() {

expect('th').not.toHaveClass('sorted-asc');
expect('th').not.toHaveClass('sorted-desc');
expect('th').not.toHaveAttr('role', 'button');
});
});
});
Expand Down
20 changes: 13 additions & 7 deletions library/src/pivotal-ui-react/table/table.js
Expand Up @@ -36,7 +36,12 @@ export class TableHeader extends React.Component {
const {onSortableTableHeaderClick, sortable, ...others} = this.props;
const props = mergeProps(others, {className: {'sortable': sortable}});

return <th {...props} onClick={this.handleActivate} onKeyDown={this.handleKeyDown} tabIndex="0" role="button" disabled={ !sortable }/>;
const thProps = {...props, tabIndex: 0, disabled: !sortable};
if (sortable) {
return <th {...thProps} onClick={this.handleActivate} onKeyDown={this.handleKeyDown} role="button"/>;
} else {
return <th {...thProps}/>;
}
}
}

Expand Down Expand Up @@ -81,7 +86,7 @@ export class Table extends React.Component {
}

updateSort(sortColumn, isSortColumn) {
if(isSortColumn) {
if (isSortColumn) {
return this.setState({sortOrder: ++this.state.sortOrder % Object.keys(SORT_ORDER).length});
}

Expand All @@ -96,7 +101,7 @@ export class Table extends React.Component {
return rankFunction(datum[sortColumn.attribute]);
});

if(sortOrder === SORT_ORDER.desc) sortedData.reverse();
if (sortOrder === SORT_ORDER.desc) sortedData.reverse();

return this.rows(sortedData);
}
Expand All @@ -123,12 +128,13 @@ export class Table extends React.Component {
let className, icon;
if (isSortColumn) {
className = ['sorted-asc', 'sorted-desc', ''][sortOrder];
icon = [<Icon src="arrow_drop_up"/>,<Icon src="arrow_drop_down"/>,null][sortOrder];
icon = [<Icon src="arrow_drop_up"/>, <Icon src="arrow_drop_down"/>, null][sortOrder];
}

className = classnames(className, headerProps.className);

headerProps = {...headerProps,
headerProps = {
...headerProps,
className,
sortable,
key: index,
Expand All @@ -149,10 +155,10 @@ export class Table extends React.Component {
return (
<table {...props}>
<thead>
<tr>{this.renderHeaders()}</tr>
<tr>{this.renderHeaders()}</tr>
</thead>
<tbody>
{rows}
{rows}
</tbody>
</table>
);
Expand Down

0 comments on commit 7f1a2d6

Please sign in to comment.