diff --git a/.travis.yml b/.travis.yml index e8dc4abd8..cac5dc22a 100644 --- 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 index d875c7fd7..0af45c254 100644 --- 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} /> - (this.tableRef = el)}> +
(this.tableRef = el)} tabIndex={"0"} role={"grid"} aria-readonly={"true"}> + +
(this.announceRef = el)}> + {announceText} +
)} diff --git a/src/MUIDataTableHead.js b/src/MUIDataTableHead.js index 524ca8b16..17dd34955 100644 --- 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 index 66c28f54e..9d10e6a65 100644 --- 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,10 +22,13 @@ 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 ( - + {options.sort ? ( - +
{children}
) : ( - children + {children} )} ); diff --git a/src/MUIDataTablePagination.js b/src/MUIDataTablePagination.js index ec8ef8ff5..41a0f1fdc 100644 --- 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 index 2381ac00a..5ede1ce00 100644 --- 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 => ( - +
{showSearch === true ? ( ) : ( -
+
{title} diff --git a/src/MUIDataTableViewCol.js b/src/MUIDataTableViewCol.js index 42d813f0a..83925661f 100644 --- 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 ( - + Show Columns
{title}