accessibility fixes + live announce area added to handle announcement…

… of sorting columns and other filtering updates in the future
gregnb · Dec 29, 2017 · 8dba3f7 · 8dba3f7
1 parent 0debb9b
commit 8dba3f7
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 22 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -3,9 +3,6 @@ node_js:
   - "node"
 
 script: 
- - npm run -s build
  - npm run -s lint
- - npm run -s test
-
-after_success: 
- - npm run coverage
+ - npm run -s coverage
+ - npm run -s build
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -16,6 +16,20 @@ const defaultTableStyles = {
     display: "block",
     overflowX: "auto",
   },
+  caption: {
+    position: "absolute",
+    left: "-1000px",
+  },
+  liveAnnounce: {
+    border: "0",
+    clip: "rect(0 0 0 0)",
+    height: "1px",
+    margin: "-1px",
+    overflow: "hidden",
+    padding: "0",
+    position: "absolute",
+    width: "1px",
+  },
 };
 
 class MUIDataTable extends React.Component {
@@ -47,6 +61,7 @@ class MUIDataTable extends React.Component {
 
   state = {
     open: false,
+    announceText: null,
     data: [],
     displayData: [],
     page: 0,
@@ -211,8 +226,12 @@ class MUIDataTable extends React.Component {
         }
       }
 
+      const orderLabel = columns[index].sort === "asc" ? "ascending" : "descending";
+      const announceText = `Table now sorted by ${columns[index].name} : ${orderLabel}`;
+
       return {
         columns: columns,
+        announceText: announceText,
         displayData: this.sortTable(displayData, index, order),
       };
     });
@@ -299,7 +318,7 @@ class MUIDataTable extends React.Component {
 
   render() {
     const { className, classes, title } = this.props;
-    const { data, displayData, columns, page, filterData, filterList, searchText } = this.state;
+    const { announceText, data, displayData, columns, page, filterData, filterList, searchText } = this.state;
 
     const rowsPerPage = this.state.rowsPerPage ? this.state.rowsPerPage : this.options.rowsPerPage;
 
@@ -324,7 +343,8 @@ class MUIDataTable extends React.Component {
               toggleViewColumn={this.toggleViewColumn}
             />
             <MUIDataTableFilterList options={this.options} filterList={filterList} filterUpdate={this.filterUpdate} />
-            <Table ref={el => (this.tableRef = el)}>
+            <Table ref={el => (this.tableRef = el)} tabIndex={"0"} role={"grid"} aria-readonly={"true"}>
+              <caption className={tableStyles.caption}>{title}</caption>
               <MUIDataTableHead columns={columns} toggleSort={this.toggleSortColumn} options={this.options} />
               <MUIDataTableBody
                 data={this.state.displayData}
@@ -348,6 +368,9 @@ class MUIDataTable extends React.Component {
                 false
               )}
             </Table>
+            <div className={tableStyles.liveAnnounce} aria-live={"polite"} ref={el => (this.announceRef = el)}>
+              {announceText}
+            </div>
           </Paper>
         )}
       </DataStyles>

diff --git a/src/MUIDataTableHead.js b/src/MUIDataTableHead.js
@@ -103,7 +103,6 @@ class MUIDataTableHead extends React.Component {
                                 key={index}
                                 index={index}
                                 classes={cellStyles}
-                                sortAria={activeColumn === index ? column.sort : null}
                                 sortDirection={column.sort}
                                 toggleSort={this.handleToggleColumn}
                                 options={options}>

diff --git a/src/MUIDataTableHeadCell.js b/src/MUIDataTableHeadCell.js
@@ -13,8 +13,6 @@ class MUIDataTableHeadCell extends React.Component {
     options: PropTypes.object.isRequired,
     /** Current sort direction */
     sortDirection: PropTypes.string,
-    /** Current aria-sort direction */
-    sortAria: PropTypes.string,
     /** Callback to trigger column sort */
     toggleSort: PropTypes.func.isRequired,
   };
@@ -24,18 +22,21 @@ class MUIDataTableHeadCell extends React.Component {
   };
 
   render() {
-    const { children, classes, index, options, sortDirection, sortAria } = this.props;
+    const { children, classes, index, options, sortDirection } = this.props;
+
+    let sortName = "descending";
+    if (sortDirection === "desc" || sortDirection === null) sortName = "ascending";
 
     return (
-      <TableCell className={classes.root} sortDirection={sortAria}>
+      <TableCell className={classes.root} scope={"col"} sortDirection={sortDirection}>
         {options.sort ? (
           <Tooltip
             title="Sort"
             placement={"bottom-end"}
             className={classes.tooltip}
             enterDelay={300}
             onClick={this.handleSortClick}>
-            <span>
+            <span role="button" tabIndex={0}>
               <div className={classes.data}>{children}</div>
               <div className={classes.sortAction}>
                 <span
@@ -66,7 +67,7 @@ class MUIDataTableHeadCell extends React.Component {
             </span>
           </Tooltip>
         ) : (
-          children
+          <span tabIndex={0}>{children}</span>
         )}
       </TableCell>
     );

diff --git a/src/MUIDataTablePagination.js b/src/MUIDataTablePagination.js
@@ -14,12 +14,12 @@ const defaultPaginationStyles = {
   "@media screen and (max-width: 400px)": {
     toolbar: {
       "& span:nth-child(2)": {
-        display: "none"
-      }
+        display: "none",
+      },
     },
     selectRoot: {
-      marginRight: "8px"
-    }
+      marginRight: "8px",
+    },
   },
 };
 
@@ -61,7 +61,7 @@ class MUIDataTablePagination extends React.Component {
                 classes={{
                   caption: paginationStyles.caption,
                   toolbar: paginationStyles.toolbar,
-                  selectRoot: paginationStyles.selectRoot
+                  selectRoot: paginationStyles.selectRoot,
                 }}
                 count={count}
                 rowsPerPage={rowsPerPage}

diff --git a/src/MUIDataTableToolbar.js b/src/MUIDataTableToolbar.js
@@ -292,12 +292,12 @@ class MUIDataTableToolbar extends React.Component {
         name="MUIDataTableToolbar"
         styles={getStyle(options, "table.toolbar")}>
         {toolbarStyles => (
-          <Toolbar className={toolbarStyles.root}>
+          <Toolbar className={toolbarStyles.root} role={"toolbar"} aria-label={"Table Toolbar"}>
             <div className={toolbarStyles.left}>
               {showSearch === true ? (
                 <MUIDataTableSearch onSearch={searchTextUpdate} onHide={this.hideSearch} options={options} />
               ) : (
-                <div className={toolbarStyles.titleRoot}>
+                <div className={toolbarStyles.titleRoot} aria-hidden={"true"}>
                   <Typography type="title" className={toolbarStyles.titleText}>
                     {title}
                   </Typography>

diff --git a/src/MUIDataTableViewCol.js b/src/MUIDataTableViewCol.js
@@ -24,7 +24,7 @@ class MUIDataTableViewCol extends React.Component {
     const { classes, columns, options, viewColStyles } = this.props;
 
     return (
-      <FormControl component={"fieldset"} className={viewColStyles.root}>
+      <FormControl component={"fieldset"} className={viewColStyles.root} aria-label="Show/Hide Table Columns">
         <Typography type="caption" className={viewColStyles.title}>
           Show Columns
         </Typography>