Skip to content

Commit

Permalink
swap SVG arrows for header columns. aria-labels for pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
gregnb committed Jan 1, 2018
1 parent baceb9f commit 128d4b3
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 4 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"coverage:html": "cross-env NODE_ENV=test nyc check-coverage --lines 55 --reporter=html --reporter=text mocha --require babel-register test/*.js && nyc report --reporter=html",
"prettier": "find src/ test/ -name \"*.js\" | xargs prettier --write",
"lint": "eslint src",
"build": "cross-env NODE_ENV=production npm run prettier && rollup -c"
"build": "cross-env NODE_ENV=production npm run prettier && rollup -c",
"prepublish": "npm run test && npm run build && npm version patch && conventional-changelog -i CHANGELOG.md -s"
},
"repository": {
"type": "git",
Expand Down
9 changes: 8 additions & 1 deletion src/MUIDataTableHead.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ const arrowIcon = {
fillOpacity: 0.35,
},
},
"&:focus": {
outline: "none",
},
};

const defaultHeadCellStyles = {
Expand All @@ -43,17 +46,21 @@ const defaultHeadCellStyles = {
cursor: "pointer",
paddingLeft: "4px",
paddingTop: "2px",
height: "10px",
},
arrowUp: {
...arrowIcon,
},
arrowDown: {
...arrowIcon,
transform: "rotate(180deg)",
},
arrowHidden: {
display: "none",
},
toolButton: {
height: "10px",
outline: "none",
},
arrowActive: {
"& svg": {
"& path": {
Expand Down
4 changes: 2 additions & 2 deletions src/MUIDataTableHeadCell.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ class MUIDataTableHeadCell extends React.Component {
className={classes.tooltip}
enterDelay={300}
onClick={this.handleSortClick}>
<span role="button" tabIndex={0}>
<span role="button" className={classes.toolButton} tabIndex={0}>
<div className={classes.data}>{children}</div>
<div className={classes.sortAction}>
<span
Expand All @@ -58,7 +58,7 @@ class MUIDataTableHeadCell extends React.Component {
})}>
<svg>
<path
d="m7.54878,4.12621q0,0.20139 -0.13005,0.34856t-0.30802,0.14717l-6.13296,0q-0.17796,0 -0.30802,-0.14717t-0.13005,-0.34856t0.13005,-0.34856l3.06648,-3.47017q0.13005,-0.14717 0.30802,-0.14717t0.30802,0.14717l3.06648,3.47017q0.13005,0.14717 0.13005,0.34856l0,0l0,0z"
d="m 0.53968,0.65604 q 0,-0.20139 0.13005,-0.34856 0.13005,-0.14717 0.30802,-0.14717 l 6.13296,0 q 0.17796,0 0.30802,0.14717 0.13006,0.14717 0.13005,0.34856 -10e-6,0.20139 -0.13005,0.34856 L 4.35225,4.47477 Q 4.2222,4.62194 4.04423,4.62194 q -0.17797,0 -0.30802,-0.14717 L 0.66973,1.0046 Q 0.53968,0.85743 0.53968,0.65604 v 0 z"
fill="black"
/>
</svg>
Expand Down
6 changes: 6 additions & 0 deletions src/MUIDataTablePagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,12 @@ class MUIDataTablePagination extends React.Component {
count={count}
rowsPerPage={rowsPerPage}
page={page}
backIconButtonProps={{
"aria-label": "Previous Page",
}}
nextIconButtonProps={{
"aria-label": "Next Page",
}}
rowsPerPageOptions={options.rowsPerPageOptions}
onChangePage={this.handlePageChange}
onChangeRowsPerPage={this.handleRowChange}
Expand Down

0 comments on commit 128d4b3

Please sign in to comment.