Change JSCS to ESLint (#422)

* chore: convert jscs to eslint

* chore: run ESLint fix

* chore: const to var for ESLint

Non of the other samples is using ES6, otherwise the rule could be
changed

* chore: snake_case to camelCase ESLint

* chore: update README for ESLint switch

* chore: use up-to-date NodeJS on Travis

.eslintignore

@@ -0,0 +1,7 @@
+**/*.min.js
+examples/landmarks/js/visua11y.js
+examples/landmarks/js/SkipTo.min.js
+examples/landmarks/js/bootstrap-accessibility.min.js
+examples/landmarks/js/bootstrap.min.js
+examples/landmarks/js/jquery-2.1.1.min.js
+examples/js/highlight.pack.js

.eslintrc.json

@@ -0,0 +1,107 @@
+{
+  "rules": {
+    "no-with": 2,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multiple-empty-lines": 2,
+    "no-multi-spaces": 0,
+    "operator-linebreak": [
+      2,
+      "after"
+    ],
+    "quote-props": 0,
+    "key-spacing": [
+      2,
+      {
+        "afterColon": true
+      }
+    ],
+    "space-unary-ops": [
+      2,
+      {
+        "words": false,
+        "nonwords": false
+      }
+    ],
+    "no-spaced-func": 2,
+    "array-bracket-spacing": [
+      2,
+      "never",
+      {
+        "singleValue": true
+      }
+    ],
+    "space-in-parens": [
+      2,
+      "never"
+    ],
+    "comma-dangle": [
+      2,
+      "never"
+    ],
+    "no-trailing-spaces": 2,
+    "yoda": [
+      2,
+      "never"
+    ],
+    "camelcase": [
+      2,
+      {
+        "properties": "always"
+      }
+    ],
+    "comma-style": [
+      2,
+      "last"
+    ],
+    "curly": [
+      2,
+      "all"
+    ],
+    "dot-notation": 2,
+    "brace-style": [
+      2,
+      "stroustrup",
+      {
+        "allowSingleLine": true
+      }
+    ],
+    "eol-last": 2,
+    "wrap-iife": 2,
+    "semi": [
+      2,
+      "always"
+    ],
+    "space-infix-ops": 2,
+    "keyword-spacing": [
+      2,
+      {}
+    ],
+    "spaced-comment": [
+      2,
+      "always"
+    ],
+    "space-before-blocks": [
+      2,
+      "always"
+    ],
+    "space-before-function-paren": [
+      2,
+      "always"
+    ],
+    "consistent-this": [
+      2,
+      "self"
+    ],
+    "indent": [
+      2,
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "quotes": [
+      2,
+      "single"
+    ]
+  }
+}

.travis.yml

@@ -1,4 +1,8 @@
 language: node_js
+
+node_js:
+  - "node"
+
 env:
   global:
     - GH_REF: github.com/w3c/aria-practices.git

README.md

@@ -33,15 +33,15 @@ that supports [EditorConfig](http://editorconfig.org/).
 - Edit the new html file with an example corresponding to the description in
   `aria-practices.html`
 
-### Running JSCS, the JavaScript code style checker
+### Running ESLint, the pluggable linting utility for JavaScript and JSX
 
-[JSCS](http://jscs.info/) is an automated code style checker. We use it to ensure
-common code styling practices in this repository. 
-Pull requests with JSCS errors will not be merged.
+[ESLint](http://eslint.org/) is an automated code style checker. We use it to
+ensure common code styling practices in this repository.
+Pull requests with ESLint errors will not be merged.
 
-### Setup JSCS so you can run it locally
- 
-1. If you do not already have node.js installed, 
+### Setup ESLint so you can run it locally
+
+1. If you do not already have node.js installed,
  go to the [node installer](https://nodejs.org/en/download/)
 1. When you install Node, NPM is included.
 1. In a terminal window from the directory that contains the `aria-practices`
@@ -50,40 +50,33 @@ A successful install will display a tree of installed packages.
 
 ### Test and fix your code
 
-1. Open a terminal window to the directory that contains the `aria-practices` 
+1. Open a terminal window to the directory that contains the `aria-practices`
 repository
-1. The repository has a script defined that will test all JavaScript in the examples 
+1. The repository has a script defined that will test all JavaScript in the examples
 directory. To run it, execute the command `npm test`.
-1. Many errors can be fixed automatically with the command `npm run jscs-fix`.
+1. Many errors can be fixed automatically with the command `npm run fix`.
 1. After running fix, test again to see what you need to fix manually.
-
-When JSCS encounters errors, it will report them in the console. 
-The error report will contain the file name and line number, 
-and it will indicate the character or place in the line 
-that raised the style violation. 
-To fix an error, satisfy the change
-that the violation indicates.
 
-For example, here is an error for an invalid quotation mark. Quotation marks must
-be single quotation marks, not double.
+When the linter encounters errors, it will report them in the console.
+The error report will contain the file name and line number, and it will
+indicate the character or place in the line that raised the style violation. To
+fix an error, satisfy the change that the violation indicates.
+
+For example, here is an error for an invalid variable name style. Variables must
+follow a camelCase convention.
 
 ```
-validateQuoteMarks: Invalid quote mark found at examples/alert/js/alert.js :
-     1 |window.addEventListener('load', function () {
-     2 |
-     3 |  var button = document.getElementById("alert-trigger");
------------------------------------------------^
-     4 |
-     5 |  button.addEventListener('click', addAlert);
+/Users/user1/Documents/github/aria-practices/examples/slider/js/text-slider.js
+  19:8  error  Identifier 'value_nodes' is not in camel case  camelcase
 ```
 
-The error occurred in `examples/alert/js/alert.js`, on line 3 and the offending
-character is indicated by the dashed line and a caret pointing up. Change the
-double quotation mark to a single quotation mark in your source file to eliminate
-this error.
+The error occurred in `examples/slider/js/text-slider.js`, on line 19 and the
+offending character is indicated by the number `8` after the colon. Change the
+variable `value_nodes` to `valueNodes` in your source file to eliminate this
+error.
 
-To see the complete list of style rules that are applied by JSCS,
-Check out the [.jscsrc](https://github.com/w3c/aria-practices/blob/master/.jscsrc) file in the root of the project. 
+To see the complete list of style rules that are applied by ESLint,
+Check out the [.eslint.json](https://github.com/w3c/aria-practices/blob/master/.eslint.json) file in the root of the project.
 
 ### Editorial documentation
 
@@ -95,7 +88,7 @@ for this specification.
 ## How to update document snapshot
 
 Note: These instructions are for editors of the APG who have repository commit access.
- 
+
 1. Go to the [editors draft on rawgit](https://cdn.rawgit.com/w3c/aria-practices/master/aria-practices.html)
 2. Press the ReSpec button (top right hand corner)
 3. Select 'Save snapshot'

examples/accordion/js/accordion.js

@@ -6,20 +6,20 @@ Gerard K. Cohen, 05/20/2017
 Array.from(document.querySelectorAll('.Accordion')).forEach(function (accordion) {
 
   // Allow for each toggle to both open and close individually
-  const allowToggle = accordion.hasAttribute('data-allow-toggle');
+  var allowToggle = accordion.hasAttribute('data-allow-toggle');
   // Allow for multiple accordion sections to be expanded at the same time
-  const allowMultiple = accordion.hasAttribute('data-allow-multiple');
+  var allowMultiple = accordion.hasAttribute('data-allow-multiple');
 
   // Create the array of toggle elements for the accordion group
-  const triggers = Array.from(accordion.querySelectorAll('.Accordion-trigger'));
-  const panels = Array.from(accordion.querySelectorAll('.Accordion-panel'));
+  var triggers = Array.from(accordion.querySelectorAll('.Accordion-trigger'));
+  var panels = Array.from(accordion.querySelectorAll('.Accordion-panel'));
 
   accordion.addEventListener('click', function (event) {
-    const target = event.target;
+    var target = event.target;
 
     if (target.classList.contains('Accordion-trigger')) {
       // Check if the current toggle is expanded.
-      const isExpanded = target.getAttribute('aria-expanded') == 'true';
+      var isExpanded = target.getAttribute('aria-expanded') == 'true';
 
       if (!allowMultiple) {
         // Close all previously open accordion toggles
@@ -52,20 +52,20 @@ Array.from(document.querySelectorAll('.Accordion')).forEach(function (accordion)
 
   // Bind keyboard behaviors on the main accordion container
   accordion.addEventListener('keydown', function (event) {
-    const target = event.target;
-    const key = event.which.toString();
+    var target = event.target;
+    var key = event.which.toString();
     // 33 = Page Up, 34 = Page Down
-    const ctrlModifier = (event.ctrlKey && key.match(/33|34/));
+    var ctrlModifier = (event.ctrlKey && key.match(/33|34/));
 
     // Is this coming from an accordion header?
     if (target.classList.contains('Accordion-trigger')) {
       // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
       // 38 = Up, 40 = Down
       if (key.match(/38|40/) || ctrlModifier) {
-        const index = triggers.indexOf(target);
-        const direction = (key.match(/34|40/)) ? 1 : -1;
-        const length = triggers.length;
-        const newIndex = (index + length + direction) % length;
+        var index = triggers.indexOf(target);
+        var direction = (key.match(/34|40/)) ? 1 : -1;
+        var length = triggers.length;
+        var newIndex = (index + length + direction) % length;
 
         triggers[newIndex].focus();