Merge branch 'master' into upgrade-dependencies

Author: jessebeach

.travis.yml

@@ -46,3 +46,5 @@ matrix:
     - node_js: "5"
     - node_js: "4" # not sure why this is failing; probably something in jest
       env: ESLINT=4
+    - node_js: "4"
+      env: ESLINT=3

CHANGELOG.md

@@ -1,3 +1,7 @@
+6.2.1 / 2019-02-03
+=================
+- 9980e45 [fix] Prevent Error when JSXSpreadAttribute is passed to isSemanticRoleElement
+
 6.2.0 / 2019-01-25
 =================
 - 5650674 [new rule] control-has-associated-label checks interactives for a label

README.md

@@ -107,7 +107,7 @@ Add `plugin:jsx-a11y/recommended` or `plugin:jsx-a11y/strict` in `extends`:
 - [iframe-has-title](docs/rules/iframe-has-title.md): Enforce iframe elements have a title attribute.
 - [img-redundant-alt](docs/rules/img-redundant-alt.md): Enforce `<img>` alt prop does not contain the word "image", "picture", or "photo".
 - [interactive-supports-focus](docs/rules/interactive-supports-focus.md): Enforce that elements with interactive handlers like `onClick` must be focusable.
-- [label-has-for](docs/rules/label-has-for.md): Enforce that `<label>` elements have the `htmlFor` prop.
+- [label-has-associated-control](docs/rules/label-has-associated-control.md): Enforce that a `label` tag has a text label and an associated control.
 - [lang](docs/rules/lang.md): Enforce lang attribute has a valid value.
 - [media-has-caption](docs/rules/media-has-caption.md): Enforces that `<audio>` and `<video>` elements must have a `<track>` for captions.
 - [mouse-events-have-key-events](docs/rules/mouse-events-have-key-events.md): Enforce that `onMouseOver`/`onMouseOut` are accompanied by `onFocus`/`onBlur` for keyboard-only users.
@@ -145,7 +145,7 @@ Rule | Recommended | Strict
 [iframe-has-title](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md) | error | error
 [img-redundant-alt](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md) | error | error
 [interactive-supports-focus](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/interactive-supports-focus.md) | error | error
-[label-has-for](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md) | error | error
+[label-has-associated-control](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md) | error | error
 [media-has-caption](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/media-has-caption.md) | error | error
 [mouse-events-have-key-events](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md) | error | error
 [no-access-key](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md) | error | error
@@ -265,17 +265,17 @@ $ ./scripts/create-rule.js my-new-rule
 ### Accessibility API
 An operating system will provide an accessibility API that maps application state and content onto input/output controllers such as a screen reader, braille device, keyboard, etc.
 
-These APIs were developed as computer interfaces shifted from buffers (which are text based and inherently quite accessible) to graphical user interfaces (GUIs). The first attempts to make GUIs accessible involved raster image parsing to recognize characters, words, etc. This information was stored in a parallel buffer and made accessible to assistive technology (AT) devices.
+These APIs were developed as computer interfaces shifted from buffers (which are text-based and inherently quite accessible) to graphical user interfaces (GUIs). The first attempts to make GUIs accessible involved raster image parsing to recognize characters, words, etc. This information was stored in a parallel buffer and made accessible to assistive technology (AT) devices.
 
 As GUIs became more complex, the raster parsing approach became untenable. Accessibility APIs were developed to replace them. Check out [NSAccessibility (AXAPI)](https://developer.apple.com/library/mac/documentation/Cocoa/Reference/ApplicationKit/Protocols/NSAccessibility_Protocol/index.html) for an example. See [Core Accessibility API Mappings 1.1](https://www.w3.org/TR/core-aam-1.1/) for more details.
 
 ### Browsers
-Browsers support an Accessibility API on a per operating system basis. For instance Firefox implements the MSAA accessibility API on Windows, but does not implement the AXAPI on OSX.
+Browsers support an Accessibility API on a per operating system basis. For instance, Firefox implements the MSAA accessibility API on Windows, but does not implement the AXAPI on OSX.
 
 ### The Accessibility (AX) Tree & DOM
 From the [W3 Core Accessibility API Mappings 1.1](https://www.w3.org/TR/core-aam-1.1/#intro_treetypes)
 
-> The accessibility tree and the DOM tree are parallel structures. Roughly speaking the accessibility tree is a subset of the DOM tree. It includes the user interface objects of the user agent and the objects of the document. Accessible objects are created in the accessibility tree for every DOM element that should be exposed to an assistive technology, either because it may fire an accessibility event or because it has a property, relationship or feature which needs to be exposed. Generally if something can be trimmed out it will be, for reasons of performance and simplicity. For example, a <span> with just a style change and no semantics may not get its own accessible object, but the style change will be exposed by other means.
+> The accessibility tree and the DOM tree are parallel structures. Roughly speaking the accessibility tree is a subset of the DOM tree. It includes the user interface objects of the user agent and the objects of the document. Accessible objects are created in the accessibility tree for every DOM element that should be exposed to assistive technology, either because it may fire an accessibility event or because it has a property, relationship or feature which needs to be exposed. Generally, if something can be trimmed out it will be, for reasons of performance and simplicity. For example, a <span> with just a style change and no semantics may not get its own accessible object, but the style change will be exposed by other means.
 
 Browser vendors are beginning to expose the AX Tree through inspection tools. Chrome has an experiment available to enable their inspection tool.
 
@@ -291,8 +291,8 @@ 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 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 afforded 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
 
-eslint-plugin-jsx-a11y is licensed under the [MIT License](LICENSE.md).
+eslint-plugin-jsx-a11y is licensed under the [MIT License](LICENSE.md).

__mocks__/JSXElementMock.js

@@ -4,11 +4,24 @@
 
 import JSXAttributeMock from './JSXAttributeMock';
 
+export type TJSXElementMock = {
+  type: 'JSXElement',
+  openingElement: {
+    type: 'JSXOpeningElement',
+    name: {
+      type: 'JSXIdentifier',
+      name: string,
+    },
+    attributes: Array<JSXAttributeMock>,
+  },
+  children: Array<Node>,
+};
+
 export default function JSXElementMock(
   tagName: string,
   attributes: Array<JSXAttributeMock> = [],
   children: Array<Node> = [],
-) {
+): TJSXElementMock {
   return {
     type: 'JSXElement',
     openingElement: {

__mocks__/genInteractives.js

@@ -7,6 +7,8 @@ import includes from 'array-includes';
 import JSXAttributeMock from './JSXAttributeMock';
 import JSXElementMock from './JSXElementMock';
 
+import type { TJSXElementMock } from './JSXElementMock';
+
 const domElements = [...dom.keys()];
 const roleNames = [...roles.keys()];
 
@@ -149,8 +151,8 @@ export function genElementSymbol(openingElement: Object) {
   );
 }
 
-export function genInteractiveElements() {
-  return Object.keys(interactiveElementsMap).map((elementSymbol) => {
+export function genInteractiveElements(): Array<TJSXElementMock> {
+  return Object.keys(interactiveElementsMap).map((elementSymbol: string): TJSXElementMock => {
     const bracketIndex = elementSymbol.indexOf('[');
     let name = elementSymbol;
     if (bracketIndex > -1) {
@@ -161,15 +163,15 @@ export function genInteractiveElements() {
   });
 }
 
-export function genInteractiveRoleElements() {
-  return [...interactiveRoles, 'button article', 'fakerole button article'].map(value => JSXElementMock(
+export function genInteractiveRoleElements(): Array<TJSXElementMock> {
+  return [...interactiveRoles, 'button article', 'fakerole button article'].map((value): TJSXElementMock => JSXElementMock(
     'div',
     [JSXAttributeMock('role', value)],
   ));
 }
 
-export function genNonInteractiveElements() {
-  return Object.keys(nonInteractiveElementsMap).map((elementSymbol) => {
+export function genNonInteractiveElements(): Array<TJSXElementMock> {
+  return Object.keys(nonInteractiveElementsMap).map((elementSymbol): TJSXElementMock => {
     const bracketIndex = elementSymbol.indexOf('[');
     let name = elementSymbol;
     if (bracketIndex > -1) {
@@ -196,9 +198,9 @@ export function genNonAbstractRoleElements() {
   return nonAbstractRoles.map(value => JSXElementMock('div', [JSXAttributeMock('role', value)]));
 }
 
-export function genIndeterminantInteractiveElements() {
+export function genIndeterminantInteractiveElements(): Array<TJSXElementMock> {
   return Object.keys(indeterminantInteractiveElementsMap).map((name) => {
-    const attributes = indeterminantInteractiveElementsMap[name].map(({ prop, value }) => JSXAttributeMock(prop, value));
+    const attributes = indeterminantInteractiveElementsMap[name].map(({ prop, value }): TJSXElementMock => JSXAttributeMock(prop, value));
     return JSXElementMock(name, attributes);
   });
 }

__tests__/__util__/parserOptionsMapper.js

@@ -1,6 +1,7 @@
 const defaultParserOptions = {
-  ecmaVersion: 6,
+  ecmaVersion: 2018,
   ecmaFeatures: {
+    experimentalObjectRestSpread: true,
     jsx: true,
   },
 };

__tests__/src/rules/anchor-is-valid-test.js

@@ -89,9 +89,15 @@ ruleTester.run('anchor-is-valid', rule, {
     { code: '<a href="/foo" />' },
     { code: '<a href="https://foo.bar.com" />' },
     { code: '<div href="foo" />' },
+    { code: '<a href="javascript" />' },
+    { code: '<a href="javascriptFoo" />' },
     { code: '<a href={`#foo`}/>' },
     { code: '<a href={"foo"}/>' },
+    { code: '<a href={"javascript"}/>' },
+    { code: '<a href={`#javascript`}/>' },
     { code: '<a href="#foo" />' },
+    { code: '<a href="#javascript" />' },
+    { code: '<a href="#javascriptFoo" />' },
     { code: '<UX.Layout>test</UX.Layout>' },
     { code: '<a href={this} />' },
 

__tests__/src/rules/aria-proptypes-test.js

@@ -74,13 +74,17 @@ ruleTester.run('aria-proptypes', rule, {
     { code: '<div aria-hidden={!"yes"} />' },
     { code: '<div aria-hidden={foo} />' },
     { code: '<div aria-hidden={foo.bar} />' },
+    { code: '<div aria-hidden={null} />' },
+    { code: '<div aria-hidden={undefined} />' },
     { code: '<div aria-hidden={<div />} />' },
 
     // STRING
     { code: '<div aria-label="Close" />' },
     { code: '<div aria-label={`Close`} />' },
     { code: '<div aria-label={foo} />' },
     { code: '<div aria-label={foo.bar} />' },
+    { code: '<div aria-label={null} />' },
+    { code: '<div aria-label={undefined} />' },
     { code: '<input aria-invalid={error ? "true" : "false"} />' },
     { code: '<input aria-invalid={undefined ? "true" : "false"} />' },
 
@@ -97,6 +101,8 @@ ruleTester.run('aria-proptypes', rule, {
     { code: '<div aria-checked={foo.bar} />' },
     { code: '<div aria-checked="mixed" />' },
     { code: '<div aria-checked={`mixed`} />' },
+    { code: '<div aria-checked={null} />' },
+    { code: '<div aria-checked={undefined} />' },
 
     // INTEGER
     { code: '<div aria-level={123} />' },
@@ -108,6 +114,8 @@ ruleTester.run('aria-proptypes', rule, {
     { code: '<div aria-level="123" />' },
     { code: '<div aria-level={foo} />' },
     { code: '<div aria-level={foo.bar} />' },
+    { code: '<div aria-level={null} />' },
+    { code: '<div aria-level={undefined} />' },
 
     // NUMBER
     { code: '<div aria-valuemax={123} />' },
@@ -119,6 +127,8 @@ ruleTester.run('aria-proptypes', rule, {
     { code: '<div aria-valuemax="123" />' },
     { code: '<div aria-valuemax={foo} />' },
     { code: '<div aria-valuemax={foo.bar} />' },
+    { code: '<div aria-valuemax={null} />' },
+    { code: '<div aria-valuemax={undefined} />' },
 
     // TOKEN
     { code: '<div aria-sort="ascending" />' },
@@ -142,6 +152,8 @@ ruleTester.run('aria-proptypes', rule, {
     { code: '<div aria-invalid="false" />' },
     { code: '<div aria-invalid="grammar" />' },
     { code: '<div aria-invalid="spelling" />' },
+    { code: '<div aria-invalid={null} />' },
+    { code: '<div aria-invalid={undefined} />' },
 
     // TOKENLIST
     { code: '<div aria-relevant="additions" />' },
@@ -159,6 +171,8 @@ ruleTester.run('aria-proptypes', rule, {
     { code: '<div aria-relevant={`removals additions text all`} />' },
     { code: '<div aria-relevant={foo} />' },
     { code: '<div aria-relevant={foo.bar} />' },
+    { code: '<div aria-relevant={null} />' },
+    { code: '<div aria-relevant={undefined} />' },
 
     // ID
     { code: '<div aria-activedescendant="ascending" />' },
@@ -176,6 +190,8 @@ ruleTester.run('aria-proptypes', rule, {
     { code: '<div aria-activedescendant={`other`} />' },
     { code: '<div aria-activedescendant={foo} />' },
     { code: '<div aria-activedescendant={foo.bar} />' },
+    { code: '<div aria-activedescendant={null} />' },
+    { code: '<div aria-activedescendant={undefined} />' },
 
     // IDLIST
     { code: '<div aria-labelledby="additions" />' },
@@ -193,13 +209,11 @@ ruleTester.run('aria-proptypes', rule, {
     { code: '<div aria-labelledby={`removals additions text all`} />' },
     { code: '<div aria-labelledby={foo} />' },
     { code: '<div aria-labelledby={foo.bar} />' },
+    { code: '<div aria-labelledby={null} />' },
+    { code: '<div aria-labelledby={undefined} />' },
   ].map(parserOptionsMapper),
   invalid: [
     // BOOLEAN
-    {
-      code: '<div aria-hidden={undefined} />',
-      errors: [errorMessage('aria-hidden')],
-    },
     { code: '<div aria-hidden="yes" />', errors: [errorMessage('aria-hidden')] },
     { code: '<div aria-hidden="no" />', errors: [errorMessage('aria-hidden')] },
     { code: '<div aria-hidden={1234} />', errors: [errorMessage('aria-hidden')] },
@@ -209,18 +223,13 @@ ruleTester.run('aria-proptypes', rule, {
     },
 
     // STRING
-    { code: '<div aria-label={undefined} />', errors: [errorMessage('aria-label')] },
     { code: '<div aria-label />', errors: [errorMessage('aria-label')] },
     { code: '<div aria-label={true} />', errors: [errorMessage('aria-label')] },
     { code: '<div aria-label={false} />', errors: [errorMessage('aria-label')] },
     { code: '<div aria-label={1234} />', errors: [errorMessage('aria-label')] },
     { code: '<div aria-label={!true} />', errors: [errorMessage('aria-label')] },
 
     // TRISTATE
-    {
-      code: '<div aria-checked={undefined} />',
-      errors: [errorMessage('aria-checked')],
-    },
     { code: '<div aria-checked="yes" />', errors: [errorMessage('aria-checked')] },
     { code: '<div aria-checked="no" />', errors: [errorMessage('aria-checked')] },
     { code: '<div aria-checked={1234} />', errors: [errorMessage('aria-checked')] },
@@ -230,7 +239,6 @@ ruleTester.run('aria-proptypes', rule, {
     },
 
     // INTEGER
-    { code: '<div aria-level={undefined} />', errors: [errorMessage('aria-level')] },
     { code: '<div aria-level="yes" />', errors: [errorMessage('aria-level')] },
     { code: '<div aria-level="no" />', errors: [errorMessage('aria-level')] },
     { code: '<div aria-level={`abc`} />', errors: [errorMessage('aria-level')] },
@@ -240,10 +248,6 @@ ruleTester.run('aria-proptypes', rule, {
     { code: '<div aria-level={!"false"} />', errors: [errorMessage('aria-level')] },
 
     // NUMBER
-    {
-      code: '<div aria-valuemax={undefined} />',
-      errors: [errorMessage('aria-valuemax')],
-    },
     { code: '<div aria-valuemax="yes" />', errors: [errorMessage('aria-valuemax')] },
     { code: '<div aria-valuemax="no" />', errors: [errorMessage('aria-valuemax')] },
     {
@@ -268,7 +272,6 @@ ruleTester.run('aria-proptypes', rule, {
     { code: '<div aria-sort="" />', errors: [errorMessage('aria-sort')] },
     { code: '<div aria-sort="descnding" />', errors: [errorMessage('aria-sort')] },
     { code: '<div aria-sort />', errors: [errorMessage('aria-sort')] },
-    { code: '<div aria-sort={undefined} />', errors: [errorMessage('aria-sort')] },
     { code: '<div aria-sort={true} />', errors: [errorMessage('aria-sort')] },
     { code: '<div aria-sort={"false"} />', errors: [errorMessage('aria-sort')] },
     {
@@ -283,10 +286,6 @@ ruleTester.run('aria-proptypes', rule, {
       errors: [errorMessage('aria-relevant')],
     },
     { code: '<div aria-relevant />', errors: [errorMessage('aria-relevant')] },
-    {
-      code: '<div aria-relevant={undefined} />',
-      errors: [errorMessage('aria-relevant')],
-    },
     {
       code: '<div aria-relevant={true} />',
       errors: [errorMessage('aria-relevant')],

__tests__/src/rules/control-has-associated-label-test.js

@@ -141,6 +141,7 @@ const alwaysValid = [
   { code: '<img />' },
   { code: '<legend />' },
   { code: '<li />' },
+  { code: '<link />' },
   { code: '<main />' },
   { code: '<mark />' },
   { code: '<marquee />' },
@@ -254,7 +255,6 @@ const neverValid = [
   { code: '<a href="#" />', errors: [expectedError] },
   { code: '<area href="#" />', errors: [expectedError] },
   { code: '<label />', errors: [expectedError] },
-  { code: '<link />', errors: [expectedError] },
   { code: '<menuitem />', errors: [expectedError] },
   { code: '<option />', errors: [expectedError] },
   { code: '<th />', errors: [expectedError] },

__tests__/src/rules/no-access-key-test.js

@@ -28,8 +28,6 @@ ruleTester.run('no-access-key', rule, {
     { code: '<div />;' },
     { code: '<div {...props} />' },
     { code: '<div accessKey={undefined} />' },
-    { code: '<div accessKey={`${undefined}`} />' },
-    { code: '<div accessKey={`${undefined}${undefined}`} />' },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<div accesskey="h" />', errors: [expectedError] },
@@ -44,5 +42,7 @@ ruleTester.run('no-access-key', rule, {
     },
     { code: '<div accessKey={`This is ${bad}`} />', errors: [expectedError] },
     { code: '<div accessKey={accessKey} />', errors: [expectedError] },
+    { code: '<div accessKey={`${undefined}`} />', errors: [expectedError] },
+    { code: '<div accessKey={`${undefined}${undefined}`} />', errors: [expectedError] },
   ].map(parserOptionsMapper),
 });