Build Test Process: Implement style linting

For issue w3c#932, implement stylelint for CSS files used for examples:
* add stylelint & hook to lint staged files.
* update linting scripts.
* add css linting to travis.
* update js linting script in ci.
* autofix css (npm run lint:css -- --fix).
* manually fix remaining stylelint errors.
* Add new aliases for npm run  of linting js, html, and css.
* update readme to document new linting conventions.

.stylelintignore

@@ -0,0 +1,3 @@
+common
+bootstrap.css
+bootstrap-theme.css

.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['stylelint-config-standard']
+};

.travis.yml

@@ -20,9 +20,12 @@ jobs:
     - stage: Test
       name: Regression Tests Coverage Report
       script: node test/util/report.js
+    - stage: Test
+      name: CSS Linting
+      script: npm run lint:css
     - stage: Test
       name: JS Linting
-      script: npm run lint
+      script: npm run lint:es
     - stage: Test
       name: HTML Linting
       script: npm run vnu-jar
@@ -38,4 +41,4 @@ jobs:
           branch: master
 
 env:
-  - TEST_WAIT_TIME=1000
+  - TEST_WAIT_TIME=1000

README.md

@@ -29,25 +29,50 @@ Note: Please feel free to ask questions either through an issue or on the [Autho
 
 ### Code conformance
 
-* All HTML should validate in the NU HTML Validator. Exceptions to this rule are warnings and errors related to future ARIA features that are not yet implemented.
-* To keep code in this repository consistent:
-    * Read the [code guide](https://github.com/w3c/aria-practices/wiki/Code-Guide)
-    * Use a text editor that supports [EditorConfig](http://editorconfig.org/).
-    * Make sure All code tests clean with ESLint.
+This repository utilizes [linting](https://en.wikipedia.org/wiki/Lint_%28software%29) tools to do static code analysis and ensure consistent code quality across HTML, CSS, and JavaScript. Each linting tool and respective code standards are documented below and in the [code guide](https://github.com/w3c/aria-practices/wiki/Code-Guide).
 
-### Running ESLint, the pluggable linting utility for JavaScript and JSX
+Pull requests that contain linting errors will not be merged until the errors are resolved. To make this easier, you can install and run the tools locally before pushing code. Also note that the tools for CSS and JavaScript will automatically fix many issues if you have them installed locally. To install these tools:
 
-[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.
+1. Make sure that you have [Node.js](https://nodejs.org/en/) installed, which comes with [node package manager (npm)](https://www.npmjs.com/get-npm)
+1. Open the directory that contains your `aria-practices` repository in a terminal
+1. Run `npm install`
 
-### Setup ESLint so you can run it locally
+It is also highly recommended that you use a code editor that supports these tools and [EditorConfig](http://editorconfig.org/).
 
-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`
-repository, run `npm install`.
-A successful install will display a tree of installed packages.
+#### HTML
+
+HTML is validated against the [NU HTML Validator](https://github.com/validator/validator).
+Should a warning or error occur because a future ARIA feature is not yet implemented, it will be added to the [the .vnurc file](.vnurc), allowing the error to pass through.
+
+Run locally:
+
+```sh
+npm run lint:html
+```
+
+#### CSS
+
+CSS is validated by [stylelint](https://stylelint.io/) using the [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard) ruleset.
+
+**NOTE**: on commit, stylelint will be run on staged CSS files. If errors are found that can be [automatically fixed with the --fix flag](https://stylelint.io/user-guide/cli/#autofixing-errors), they will be fixed and the changes committed.
+
+Run locally:
+
+```sh
+npm run lint:css
+```
+
+#### JavaScript
+
+JavaScript is validated by [ESLint](http://eslint.org/), using [our own config](.eslintrc.json).
+
+**NOTE**: on commit, eslint will be run on staged CSS files. If errors are found that can be [automatically fixed with the --fix flag](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems), they will be fixed and the changes committed.
+
+Run locally:
+
+```sh
+npm run lint:js
+```
 
 ### Test and fix your code
 
@@ -64,7 +89,7 @@ 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.
 
-```
+```sh
 /Users/user1/Documents/github/aria-practices/examples/slider/js/text-slider.js
   19:8  error  Identifier 'value_nodes' is not in camel case  camelcase
 ```

examples/accordion/css/accordion.css

@@ -1,54 +1,57 @@
 .Accordion {
-    margin: 0;
-    padding: 0;
-    border: 2px solid hsl(0, 0%, 82%);
-    border-radius: 7px;
-    width: 20em;
+  margin: 0;
+  padding: 0;
+  border: 2px solid hsl(0, 0%, 82%);
+  border-radius: 7px;
+  width: 20em;
+}
+
+.Accordion h3 {
+  margin: 0;
+  padding: 0;
 }
 
 .Accordion.focus {
-    border-color: hsl(216, 94%, 73%);
+  border-color: hsl(216, 94%, 73%);
 }
 
 .Accordion.focus h3 {
-    background-color: hsl(0, 0%, 97%);
+  background-color: hsl(0, 0%, 97%);
 }
 
-
 .Accordion > * + * {
-    border-top: 1px solid hsl(0, 0%, 82%);
+  border-top: 1px solid hsl(0, 0%, 82%);
 }
 
 .Accordion-trigger {
-    background: none;
-    color: hsl(0, 0%, 13%);
-    display: block;
-    font-size: 1rem;
-    font-weight: normal;
-    margin: 0;
-    padding: 1em 1.5em;
-    position: relative;
-    text-align: left;
-    width: 100%;
-    outline: none;
+  background: none;
+  color: hsl(0, 0%, 13%);
+  display: block;
+  font-size: 1rem;
+  font-weight: normal;
+  margin: 0;
+  padding: 1em 1.5em;
+  position: relative;
+  text-align: left;
+  width: 100%;
+  outline: none;
 }
 
-.Accordion h3 {
-    margin: 0;
-    padding: 0;
+.Accordion-trigger:focus,
+.Accordion-trigger:hover {
+  background: hsl(216, 94%, 94%);
 }
 
 .Accordion *:first-child .Accordion-trigger {
-    border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
 }
 
-.Accordion-trigger:focus,
-.Accordion-trigger:hover {
-    background: hsl(216, 94%, 94%);
+button {
+  border-style: none;
 }
 
 .Accordion button::-moz-focus-inner {
-    border: 0;
+  border: 0;
 }
 
 .Accordion-title {
@@ -61,54 +64,50 @@
 }
 
 .Accordion-trigger:focus .Accordion-title {
-    border-color: hsl(216, 94%, 73%);
+  border-color: hsl(216, 94%, 73%);
 }
 
 .Accordion-icon {
-    border: solid hsl(0, 0%, 62%);
-    border-width: 0 2px 2px 0;
-    height: .5rem;
-    pointer-events: none;
-    position: absolute;
-    right: 2em;
-    top: 50%;
-    transform: translateY(-60%) rotate(45deg);
-    width: .5rem;
+  border: solid hsl(0, 0%, 62%);
+  border-width: 0 2px 2px 0;
+  height: 0.5rem;
+  pointer-events: none;
+  position: absolute;
+  right: 2em;
+  top: 50%;
+  transform: translateY(-60%) rotate(45deg);
+  width: 0.5rem;
 }
 
 .Accordion-trigger:focus .Accordion-icon,
 .Accordion-trigger:hover .Accordion-icon {
-    border-color: hsl(216, 94%, 73%);
+  border-color: hsl(216, 94%, 73%);
 }
 
 .Accordion-trigger[aria-expanded="true"] .Accordion-icon {
-    transform: translateY(-50%) rotate(-135deg);
+  transform: translateY(-50%) rotate(-135deg);
 }
 
 .Accordion-panel {
-    margin: 0;
-    padding: 1em 1.5em;
+  margin: 0;
+  padding: 1em 1.5em;
 }
 
 /* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
 .Accordion-panel[hidden] {
   display: none;
 }
 
-button {
-    border-style: none;
-}
-
 fieldset {
-    border: 0;
-    margin: 0;
-    padding: 0;
+  border: 0;
+  margin: 0;
+  padding: 0;
 }
 
 input {
-    border: 1px solid hsl(0, 0%, 62%);
-    border-radius: .3em;
-    display: block;
-    font-size: inherit;
-    padding: .3em .5em;
+  border: 1px solid hsl(0, 0%, 62%);
+  border-radius: 0.3em;
+  display: block;
+  font-size: inherit;
+  padding: 0.3em 0.5em;
 }

examples/breadcrumb/css/breadcrumb.css

@@ -17,10 +17,10 @@ nav.breadcrumb li {
 
 nav.breadcrumb li + li::before {
   display: inline-block;
-  margin: 0 .25em;
+  margin: 0 0.25em;
   transform: rotate(15deg);
-  border-right: .1em solid currentColor;
-  height: .8em;
+  border-right: 0.1em solid currentColor;
+  height: 0.8em;
   content: '';
 }
 

examples/button/css/button.css

@@ -1,7 +1,7 @@
 [role="button"] {
   display: inline-block;
   position: relative;
-  padding: .4em .7em;
+  padding: 0.4em 0.7em;
   border: 1px solid hsl(213, 71%, 49%);
   border-radius: 5px;
   box-shadow: 0 1px 2px hsl(216, 27%, 55%);
@@ -25,12 +25,14 @@
 [role="button"]:focus::before {
   position: absolute;
   z-index: -1;
+
   /* button border width - outline width - offset */
   top: calc(-1px - 3px - 3px);
   right: calc(-1px - 3px - 3px);
   bottom: calc(-1px - 3px - 3px);
   left: calc(-1px - 3px - 3px);
   border: 3px solid hsl(213, 71%, 49%);
+
   /* button border radius + outline width + offset */
   border-radius: calc(5px + 3px + 3px);
   content: '';
@@ -58,8 +60,8 @@
 }
 
 [role="button"][aria-pressed="true"] {
-  padding-top: .5em;
-  padding-bottom: .3em;
+  padding-top: 0.5em;
+  padding-bottom: 0.3em;
   border-color: hsl(261, 71%, 49%);
   background-color: hsl(261, 82%, 31%);
   background-image: linear-gradient(to bottom, hsl(261, 82%, 63%), hsl(261, 82%, 57%));
@@ -78,7 +80,7 @@
 }
 
 [role="button"] svg {
-  margin: .15em auto -.15em;
+  margin: 0.15em auto -0.15em;
   height: 1em;
   width: 1em;
   pointer-events: none;