Merge branch 'master' into update-aria-query

Author: jessebeach

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

@@ -165,5 +165,15 @@ ruleTester.run('label-has-for', rule, {
     { 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/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/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">

src/rules/label-has-for.js

@@ -27,7 +27,10 @@ const schema = {
   },
 };
 
-const validateNesting = node => node.parent.children.some(child => child.type === 'JSXElement');
+const validateNesting = node => node.parent.children.some((child) => {
+  const opener = child.openingElement;
+  return child.type === 'JSXElement' && opener && opener.name.name === 'input';
+});
 
 const validateId = (node) => {
   const htmlForAttr = getProp(node.attributes, 'htmlFor');

src/util/hasAccessibleChild.js

@@ -8,6 +8,7 @@ export default function hasAccessibleChild(node: JSXElement): boolean {
   return node.children.some((child) => {
     switch (child.type) {
       case 'Literal':
+      case 'JSXText':
         return Boolean(child.value);
       case 'JSXElement':
         return !isHiddenFromScreenReader(