Merge branch 'master' into greenkeeper/axobject-query-2.0.1

Author: jessebeach

.travis.yml

@@ -1,5 +1,7 @@
 language: node_js
 node_js:
+  - "10"
+  - "9"
   - "8"
   - "7"
   - "6"
@@ -27,5 +29,6 @@ matrix:
     - node_js: "node"
       env: LINT=true TEST=false
   allow_failures:
+    - node_js: "9"
     - node_js: "7"
     - node_js: "5"

README.md

@@ -291,7 +291,7 @@ You can also see a text-based version of the AX Tree in Chrome in the stable rel
 ### Pulling it all together
 A browser constructs an AX Tree as a subset of the DOM. ARIA heavily informs the properties of this AX Tree. This AX Tree is exposed to the system level Accessibility API which mediates assistive technology agents.
 
-We model ARIA in the [aria-query](https://github.com/a11yance/aria-query) project. We model AXObjects (that comprise the AX Tree) in the [axobject-query](https://github.com/A11yance/axobject-query) project. The goal of the WAI-ARIA specification is to be a complete complete declarative interface to the AXObject model. The [in-draft 1.2 version](https://github.com/w3c/aria/issues?q=is%3Aissue+is%3Aopen+label%3A%22ARIA+1.2%22) is moving towards this goal. But until then, we must consider the semantics constructs affored by ARIA as well as those afforded by the AXObject model (AXAPI) in order to determine how HTML can be used to express user interface affordances to assistive technology users.
+We model ARIA in the [aria-query](https://github.com/a11yance/aria-query) project. We model AXObjects (that comprise the AX Tree) in the [axobject-query](https://github.com/A11yance/axobject-query) project. The goal of the WAI-ARIA specification is to be a complete declarative interface to the AXObject model. The [in-draft 1.2 version](https://github.com/w3c/aria/issues?q=is%3Aissue+is%3Aopen+label%3A%22ARIA+1.2%22) is moving towards this goal. But until then, we must consider the semantics constructs affored by ARIA as well as those afforded by the AXObject model (AXAPI) in order to determine how HTML can be used to express user interface affordances to assistive technology users.
 
 ## License
 

__tests__/src/rules/label-has-for-test.js

@@ -19,11 +19,22 @@ import rule from '../../../src/rules/label-has-for';
 
 const ruleTester = new RuleTester();
 
-const expectedError = {
-  message: 'Form label must have associated control',
+const expectedNestingError = {
+  message: 'Form label must have the following type of associated control: nesting',
   type: 'JSXOpeningElement',
 };
 
+const expectedSomeError = {
+  message: 'Form label must have ANY of the following types of associated control: nesting, id',
+  type: 'JSXOpeningElement',
+};
+
+const expectedEveryError = {
+  message: 'Form label must have ALL of the following types of associated control: nesting, id',
+  type: 'JSXOpeningElement',
+};
+
+
 const array = [{
   components: ['Label', 'Descriptor'],
 }];
@@ -81,78 +92,88 @@ ruleTester.run('label-has-for', rule, {
   ].map(parserOptionsMapper),
   invalid: [
     // DEFAULT ELEMENT 'label' TESTS
-    { code: '<label id="foo" />', errors: [expectedError] },
-    { code: '<label htmlFor={undefined} />', errors: [expectedError] },
-    { code: '<label htmlFor={`${undefined}`} />', errors: [expectedError] },
-    { code: '<label>First Name</label>', errors: [expectedError] },
-    { code: '<label {...props}>Foo</label>', errors: [expectedError] },
-    { code: '<label><input /></label>', errors: [expectedError] },
-    { code: '<label>{children}</label>', errors: [expectedError] },
-    { code: '<label htmlFor="foo" />', errors: [expectedError] },
-    { code: '<label htmlFor={"foo"} />', errors: [expectedError] },
-    { code: '<label htmlFor={foo} />', errors: [expectedError] },
-    { code: '<label htmlFor={`${id}`} />', errors: [expectedError] },
-    { code: '<label htmlFor="foo">Test!</label>', errors: [expectedError] },
+    { code: '<label id="foo" />', errors: [expectedEveryError] },
+    { code: '<label htmlFor={undefined} />', errors: [expectedEveryError] },
+    { code: '<label htmlFor={`${undefined}`} />', errors: [expectedEveryError] },
+    { code: '<label>First Name</label>', errors: [expectedEveryError] },
+    { code: '<label {...props}>Foo</label>', errors: [expectedEveryError] },
+    { code: '<label><input /></label>', errors: [expectedEveryError] },
+    { code: '<label>{children}</label>', errors: [expectedEveryError] },
+    { code: '<label htmlFor="foo" />', errors: [expectedEveryError] },
+    { code: '<label htmlFor={"foo"} />', errors: [expectedEveryError] },
+    { code: '<label htmlFor={foo} />', errors: [expectedEveryError] },
+    { code: '<label htmlFor={`${id}`} />', errors: [expectedEveryError] },
+    { code: '<label htmlFor="foo">Test!</label>', errors: [expectedEveryError] },
     //
     // // CUSTOM ELEMENT ARRAY OPTION TESTS
-    { code: '<Label></Label>', errors: [expectedError], options: array },
-    { code: '<Label htmlFor="foo" />', errors: [expectedError], options: array },
-    { code: '<Label htmlFor={"foo"} />', errors: [expectedError], options: array },
-    { code: '<Label htmlFor={foo} />', errors: [expectedError], options: array },
-    { code: '<Label htmlFor={`${id}`} />', errors: [expectedError], options: array },
-    { code: '<Label htmlFor="foo">Test!</Label>', errors: [expectedError], options: array },
-    { code: '<Descriptor htmlFor="foo" />', errors: [expectedError], options: array },
-    { code: '<Descriptor htmlFor={"foo"} />', errors: [expectedError], options: array },
-    { code: '<Descriptor htmlFor={foo} />', errors: [expectedError], options: array },
-    { code: '<Descriptor htmlFor={`${id}`} />', errors: [expectedError], options: array },
+    { code: '<Label></Label>', errors: [expectedEveryError], options: array },
+    { code: '<Label htmlFor="foo" />', errors: [expectedEveryError], options: array },
+    { code: '<Label htmlFor={"foo"} />', errors: [expectedEveryError], options: array },
+    { code: '<Label htmlFor={foo} />', errors: [expectedEveryError], options: array },
+    { code: '<Label htmlFor={`${id}`} />', errors: [expectedEveryError], options: array },
+    { code: '<Label htmlFor="foo">Test!</Label>', errors: [expectedEveryError], options: array },
+    { code: '<Descriptor htmlFor="foo" />', errors: [expectedEveryError], options: array },
+    { code: '<Descriptor htmlFor={"foo"} />', errors: [expectedEveryError], options: array },
+    { code: '<Descriptor htmlFor={foo} />', errors: [expectedEveryError], options: array },
+    { code: '<Descriptor htmlFor={`${id}`} />', errors: [expectedEveryError], options: array },
     {
       code: '<Descriptor htmlFor="foo">Test!</Descriptor>',
-      errors: [expectedError],
+      errors: [expectedEveryError],
       options: array,
     },
-    { code: '<Label id="foo" />', errors: [expectedError], options: array },
+    { code: '<Label id="foo" />', errors: [expectedEveryError], options: array },
     {
       code: '<Label htmlFor={undefined} />',
-      errors: [expectedError],
+      errors: [expectedEveryError],
       options: array,
     },
     {
       code: '<Label htmlFor={`${undefined}`} />',
-      errors: [expectedError],
+      errors: [expectedEveryError],
       options: array,
     },
-    { code: '<Label>First Name</Label>', errors: [expectedError], options: array },
+    { code: '<Label>First Name</Label>', errors: [expectedEveryError], options: array },
     {
       code: '<Label {...props}>Foo</Label>',
-      errors: [expectedError],
+      errors: [expectedEveryError],
       options: array,
     },
-    { code: '<Descriptor id="foo" />', errors: [expectedError], options: array },
+    { code: '<Descriptor id="foo" />', errors: [expectedEveryError], options: array },
     {
       code: '<Descriptor htmlFor={undefined} />',
-      errors: [expectedError],
+      errors: [expectedEveryError],
       options: array,
     },
     {
       code: '<Descriptor htmlFor={`${undefined}`} />',
-      errors: [expectedError],
+      errors: [expectedEveryError],
       options: array,
     },
     {
       code: '<Descriptor>First Name</Descriptor>',
-      errors: [expectedError],
+      errors: [expectedEveryError],
       options: array,
     },
     {
       code: '<Descriptor {...props}>Foo</Descriptor>',
-      errors: [expectedError],
+      errors: [expectedEveryError],
       options: array,
     },
-    { code: '<label>{children}</label>', errors: [expectedError], options: array },
-    { code: '<label htmlFor="foo" />', errors: [expectedError], options: optionsRequiredNesting },
-    { code: '<label>First Name</label>', errors: [expectedError], options: optionsRequiredNesting },
-    { code: '<label>First Name</label>', errors: [expectedError], options: optionsRequiredSome },
-    { code: '<label>{children}</label>', errors: [expectedError], options: optionsRequiredSome },
-    { code: '<label>{children}</label>', errors: [expectedError], options: optionsRequiredNesting },
+    { code: '<label>{children}</label>', errors: [expectedEveryError], options: array },
+    { code: '<label htmlFor="foo" />', errors: [expectedNestingError], options: optionsRequiredNesting },
+    { code: '<label>First Name</label>', errors: [expectedNestingError], options: optionsRequiredNesting },
+    { code: '<label>First Name</label>', errors: [expectedSomeError], options: optionsRequiredSome },
+    { code: '<label>{children}</label>', errors: [expectedSomeError], options: optionsRequiredSome },
+    { code: '<label>{children}</label>', errors: [expectedNestingError], options: optionsRequiredNesting },
+    {
+      code: '<form><input type="text" id="howmuch" value="1" /><label htmlFor="howmuch">How much ?</label></form>',
+      errors: [expectedEveryError],
+      options: optionsRequiredEvery,
+    },
+    {
+      code: '<form><input type="text" id="howmuch" value="1" /><label htmlFor="howmuch">How much ?<span /></label></form>',
+      errors: [expectedEveryError],
+      options: optionsRequiredEvery,
+    },
   ].map(parserOptionsMapper),
 });

__tests__/src/rules/media-has-caption-test.js

@@ -46,13 +46,13 @@ ruleTester.run('media-has-caption', rule, {
       code: '<video><track kind="Captions" /><track kind="subtitles" /></video>',
     },
     {
-      code: '<audio mute={true}></audio>',
+      code: '<audio muted={true}></audio>',
     },
     {
-      code: '<video mute={true}></video>',
+      code: '<video muted={true}></video>',
     },
     {
-      code: '<video mute></video>',
+      code: '<video muted></video>',
     },
     {
       code: '<Audio><track kind="captions" /></Audio>',
@@ -79,19 +79,19 @@ ruleTester.run('media-has-caption', rule, {
       options: customSchema,
     },
     {
-      code: '<Video mute></Video>',
+      code: '<Video muted></Video>',
       options: customSchema,
     },
     {
-      code: '<Video mute={true}></Video>',
+      code: '<Video muted={true}></Video>',
       options: customSchema,
     },
     {
-      code: '<Audio mute></Audio>',
+      code: '<Audio muted></Audio>',
       options: customSchema,
     },
     {
-      code: '<Audio mute={true}></Audio>',
+      code: '<Audio muted={true}></Audio>',
       options: customSchema,
     },
   ].map(parserOptionsMapper),
@@ -108,12 +108,12 @@ ruleTester.run('media-has-caption', rule, {
       errors: [expectedError],
     },
     {
-      code: '<Audio mute={false}></Audio>',
+      code: '<Audio muted={false}></Audio>',
       options: customSchema,
       errors: [expectedError],
     },
     {
-      code: '<Video mute={false}></Video>',
+      code: '<Video muted={false}></Video>',
       options: customSchema,
       errors: [expectedError],
     },

__tests__/src/util/hasAccessibleChild-test.js

@@ -36,6 +36,15 @@ describe('hasAccessibleChild', () => {
       expect(hasAccessibleChild(element)).toBe(true);
     });
 
+    it('Returns true for JSXText Element', () => {
+      const child = {
+        type: 'JSXText',
+        value: 'foo',
+      };
+      const element = JSXElementMock('div', [], [child]);
+      expect(hasAccessibleChild(element)).toBe(true);
+    });
+
     it('Returns false for hidden child JSXElement', () => {
       const ariaHiddenAttr = JSXAttributeMock('aria-hidden', true);
       const child = JSXElementMock('div', [ariaHiddenAttr]);

docs/rules/alt-text.md

@@ -14,7 +14,7 @@ An `<img>` must have the `alt` prop set with meaningful text or as an empty stri
 
 For images that are being used as icons for a button or control, the `alt` prop should be set to an empty string (`alt=""`).
 
-```js
+```jsx
 <button>
   <img src="icon.png" alt="" />
   Save
@@ -38,7 +38,7 @@ This rule takes one optional object argument of type object:
 ```json
 {
     "rules": {
-        "jsx-a11y/img-has-alt": [ 2, {
+        "jsx-a11y/alt-text": [ 2, {
             "elements": [ "img", "object", "area", "input[type=\"image\"]" ],
             "img": ["Image"],
             "object": ["Object"],

docs/rules/media-has-caption.md

@@ -2,7 +2,7 @@
 
 Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load).
 
-The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are *not* necessary for video components with the mute attribute.
+The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are *not* necessary for video components with the `muted` attribute.
 
 ### References
 
@@ -31,7 +31,7 @@ For the `audio`, `video`, and `track` options, these strings determine which JSX
 ```jsx
 <audio><track kind="captions" {...props} /></audio>
 <video><track kind="captions" {...props} /></video>
-<video mute {...props} ></video>
+<video muted {...props} ></video>
 ```
 
 ### Fail

docs/rules/no-noninteractive-element-interactions.md

@@ -77,7 +77,7 @@ This preserves the table cell semantics and the button semantics; the two are no
 
 #### Option 2, convert the table into an ARIA grid
 
-If you're user interface has a table-like layout, but is filled with interactive components in the cells, consider converting the table into a grid.
+If your user interface has a table-like layout, but is filled with interactive components in the cells, consider converting the table into a grid.
 
 ```
 <table role="grid">

package.json

@@ -31,23 +31,23 @@
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.1",
-    "babel-jest": "^22.2.2",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.3",
+    "babel-jest": "^21.2.0",
     "babel-plugin-transform-es2015-template-literals": "^6.22.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
-    "coveralls": "^3.0.0",
-    "eslint": "^4.18.0",
+    "coveralls": "^3.0.1",
+    "eslint": "^4.19.1",
     "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-plugin-flowtype": "^2.44.0",
-    "eslint-plugin-import": "^2.8.0",
-    "expect": "^22.3.0",
+    "eslint-plugin-flowtype": "^2.46.3",
+    "eslint-plugin-import": "^2.12.0",
+    "expect": "^21.2.1",
     "flow-bin": "^0.66.0",
     "in-publish": "^2.0.0",
-    "jest": "^22.3.0",
+    "jest": "^21.2.1",
     "jscodeshift": "^0.4.0",
     "minimist": "^1.2.0",
     "object.assign": "^4.1.0",
@@ -85,5 +85,11 @@
       "<rootDir>/__tests__/__util__"
     ],
     "testEnvironment": "node"
+  },
+  "greenkeeper": {
+    "ignore": [
+      "jest",
+      "babel-jest"
+    ]
   }
 }