swap SVG arrows for header columns. aria-labels for pagination

gregnb · Jan 1, 2018 · 128d4b3 · 128d4b3
1 parent baceb9f
commit 128d4b3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -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",

diff --git a/src/MUIDataTableHead.js b/src/MUIDataTableHead.js
@@ -28,6 +28,9 @@ const arrowIcon = {
       fillOpacity: 0.35,
     },
   },
+  "&:focus": {
+    outline: "none",
+  },
 };
 
 const defaultHeadCellStyles = {
@@ -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": {

diff --git a/src/MUIDataTableHeadCell.js b/src/MUIDataTableHeadCell.js
@@ -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
@@ -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>

diff --git a/src/MUIDataTablePagination.js b/src/MUIDataTablePagination.js
@@ -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}