Merge branch 'master' into label-has-associated-control

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/rules/no-redundant-roles-test.js

@@ -12,6 +12,7 @@
 import { RuleTester } from 'eslint';
 import parserOptionsMapper from '../../__util__/parserOptionsMapper';
 import rule from '../../../src/rules/no-redundant-roles';
+import ruleOptionsMapperFactory from '../../__util__/ruleOptionsMapperFactory';
 
 // -----------------------------------------------------------------------------
 // Tests
@@ -24,16 +25,41 @@ const expectedError = (element, implicitRole) => ({
   type: 'JSXOpeningElement',
 });
 
-ruleTester.run('no-redundant-roles', rule, {
+const ruleName = 'jsx-a11y/no-redundant-roles';
+
+const alwaysValid = [
+  { code: '<div />;' },
+  { code: '<button role="main" />' },
+  { code: '<MyComponent role="button" />' },
+  { code: '<button role={`${foo}button`} />' },
+];
+
+const neverValid = [
+  { code: '<button role="button" />', errors: [expectedError('button', 'button')] },
+  { code: '<body role="DOCUMENT" />', errors: [expectedError('body', 'document')] },
+  { code: '<button role={`${undefined}button`} />', errors: [expectedError('button', 'button')] },
+];
+
+ruleTester.run(`${ruleName}:recommended`, rule, {
   valid: [
-    { code: '<div />;' },
-    { code: '<button role="main" />' },
-    { code: '<MyComponent role="button" />' },
-    { code: '<button role={`${foo}button`} />' },
-  ].map(parserOptionsMapper),
+    ...alwaysValid,
+    { code: '<nav role="navigation" />' },
+  ]
+    .map(parserOptionsMapper),
+  invalid: neverValid
+    .map(parserOptionsMapper),
+});
+
+const noNavExceptionsOptions = { nav: [] };
+
+ruleTester.run(`${ruleName}:recommended`, rule, {
+  valid: alwaysValid
+    .map(ruleOptionsMapperFactory(noNavExceptionsOptions))
+    .map(parserOptionsMapper),
   invalid: [
-    { code: '<button role="button" />', errors: [expectedError('button', 'button')] },
-    { code: '<body role="DOCUMENT" />', errors: [expectedError('body', 'document')] },
-    { code: '<button role={`${undefined}button`} />', errors: [expectedError('button', 'button')] },
-  ].map(parserOptionsMapper),
+    ...neverValid,
+    { code: '<nav role="navigation" />', errors: [expectedError('nav', 'navigation')] },
+  ]
+    .map(ruleOptionsMapperFactory(noNavExceptionsOptions))
+    .map(parserOptionsMapper),
 });

__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/accessible-emoji.md

@@ -3,7 +3,7 @@
 Emojis have become a common way of communicating content to the end user. To a person using a screenreader, however, he/she may not be aware that this content is there at all. By wrapping the emoji in a `<span>`, giving it the `role="img"`, and providing a useful description in `aria-label`, the screenreader will treat the emoji as an image in the accessibility tree with an accessible name for the end user.
 
 #### Resources
-1. [Lèonie Watson](http://tink.uk/accessible-emoji/)
+1. [Léonie Watson](http://tink.uk/accessible-emoji/)
 
 ## Rule details
 

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/aria-role.md

@@ -1,6 +1,6 @@
 # aria-role
 
-Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role defintions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/roles#role_definitions) site.
+Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role defintions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.
 
 [AX_ARIA_01](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_01)
 [DPUB-ARIA roles](https://www.w3.org/TR/dpub-aria-1.0/)

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