From ef4dfd1176724836e1a4589871abbebc0e5b66e9 Mon Sep 17 00:00:00 2001 From: "Phyks (Lucas Verney)" Date: Tue, 26 Jul 2016 13:21:37 +0200 Subject: [PATCH] Accessibility stuff --- .eslintrc.js | 5 +- TODO | 14 +- app/components/Login.jsx | 22 +- app/components/elements/FilterBar.jsx | 4 +- app/components/elements/Grid.jsx | 3 +- app/components/elements/Pagination.jsx | 50 +- app/components/layouts/Sidebar.jsx | 26 +- app/dist/index.js | 1656 +++++++++++++----------- app/dist/style.css | 1 - app/middleware/api.js | 1 + app/reducers/paginate.js | 2 +- app/styles/ampache.css | 1 - index.all.js | 21 + index.development.js | 7 + index.js | 26 +- index.production.js | 1 + package.json | 1 + 17 files changed, 994 insertions(+), 847 deletions(-) create mode 100644 index.all.js create mode 100644 index.development.js create mode 100644 index.production.js diff --git a/.eslintrc.js b/.eslintrc.js index 635bdee..e23ca95 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -43,6 +43,9 @@ module.exports = { "error", ], "react/jsx-uses-react": "error", - "react/jsx-uses-vars": "error" + "react/jsx-uses-vars": "error", + + // Disable no-console rule in production + "no-console": process.env.NODE_ENV !== "production" ? "off" : ["error"] } }; diff --git a/TODO b/TODO index f9dd7f4..794d209 100644 --- a/TODO +++ b/TODO @@ -11,6 +11,14 @@ * /artist/:id and /album/:id arts in responsive view * Scroll horizontal sidebar * Move CSS in modules + => https://github.com/gajus/react-css-modules + +# API middleware + * https://github.com/reactjs/redux/issues/1824#issuecomment-228609501 + * https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f#.eezt3dano + * https://github.com/reactjs/redux/issues/644 + * https://github.com/peterpme/redux-crud-api-middleware/blob/master/README.md + * https://github.com/madou/armory-front/tree/master/src/app/reducers ## Global UI @@ -20,9 +28,5 @@ ## Miscellaneous * See TODOs in the code - * https://facebook.github.io/immutable-js/ ? - * Web workers? - * Accessibility and semantics - * Uncaught TypeError: this.props.tracks.forEach is not a function - => Be more robust, after, getHostNode is null + => Be more robust, else, getHostNode is null after diff --git a/app/components/Login.jsx b/app/components/Login.jsx index 72713de..1fa9b4e 100644 --- a/app/components/Login.jsx +++ b/app/components/Login.jsx @@ -50,7 +50,9 @@ export class LoginForm extends Component { this.props.error ?
- { this.props.error } +

+ { this.props.error } +

: null @@ -58,40 +60,40 @@ export class LoginForm extends Component { { this.props.info ?
-
- { this.props.info } +
+

{ this.props.info }

: null }
-
+
- +
- +
- +
-
- +
diff --git a/app/components/elements/FilterBar.jsx b/app/components/elements/FilterBar.jsx index d2a0b49..e0da87e 100644 --- a/app/components/elements/FilterBar.jsx +++ b/app/components/elements/FilterBar.jsx @@ -15,9 +15,9 @@ export default class FilterBar extends Component { render () { return (
-

What are we listening to today?

+

What are we listening to today?

- +
diff --git a/app/components/elements/Grid.jsx b/app/components/elements/Grid.jsx index b2c50f3..1ffcef3 100644 --- a/app/components/elements/Grid.jsx +++ b/app/components/elements/Grid.jsx @@ -20,10 +20,11 @@ export class GridItem extends Component { } const to = "/" + this.props.itemsType.rstrip("s") + "/" + this.props.item.id; const id = "grid-item-" + this.props.item.type + "/" + this.props.item.id; + const title = "Go to " + this.props.itemsType.rstrip("s") + " page"; return (
- {this.props.item.name}/ + {this.props.item.name}/

{this.props.item.name}

{nSubItems} {subItemsLabel}
diff --git a/app/components/elements/Pagination.jsx b/app/components/elements/Pagination.jsx index f751868..7ba447e 100644 --- a/app/components/elements/Pagination.jsx +++ b/app/components/elements/Pagination.jsx @@ -38,8 +38,26 @@ export class Pagination extends Component { goToPage() { const pageNumber = parseInt(this.refs.pageInput.value); - $("#paginationModal").modal("hide"); - this.props.router.push(this.buildLinkTo(pageNumber)); + $(this.refs.paginationModal).modal("hide"); + if (pageNumber) { + this.props.router.push(this.buildLinkTo(pageNumber)); + } + } + + dotsOnClick() { + $(this.refs.paginationModal).modal(); + } + + dotsOnKeyDown(ev) { + ev.preventDefault; + const code = ev.keyCode || ev.which; + if (code == 13 || code == 32) { // Enter or Space key + this.dotsOnClick(); // Fire same event as onClick + } + } + + cancelModalBox() { + $(this.refs.paginationModal).modal("hide"); } render () { @@ -50,7 +68,7 @@ export class Pagination extends Component { // Push first page pagesButton.push(
  • - 1 + Go to page 1
    • ); key++; @@ -58,7 +76,7 @@ export class Pagination extends Component { // Eventually push "…" pagesButton.push(
  • - $("#paginationModal").modal() }>… + …
    • ); key++; @@ -67,12 +85,15 @@ export class Pagination extends Component { var i = 0; for (i = lowerLimit; i < upperLimit; i++) { var className = "page-item"; + var currentSpan = null; if (this.props.currentPage == i) { className += " active"; + currentSpan = (current); } + const title = "Go to page " + i; pagesButton.push(
  • - {i} + Go to page {i} {currentSpan}
    • ); key++; @@ -82,40 +103,41 @@ export class Pagination extends Component { // Eventually push "…" pagesButton.push(
  • - $("#paginationModal").modal() }>… + …
    • ); key++; } + const title = "Go to page " + this.props.nPages; // Push last page pagesButton.push(
  • - {this.props.nPages} + Go to page {this.props.nPages}
    • ); } if (pagesButton.length > 1) { return (
    -