[new] - Add iframe-has-title rule. (#137)

beefancohen · web-flow · commit 09254b36e0d8 · 2016-12-24T00:22:33.000-05:00
* [new] - Add frame-has-title rule.

* Fix comment.

* Change frame to just check iframe.

* Add better documentation and edge cases for bad title values.

* Enforce that the title is a string value.
diff --git a/README.md b/README.md
@@ -91,6 +91,7 @@ You can also enable all the recommended rules at once. Add `plugin:jsx-a11y/reco
 - [heading-has-content](docs/rules/heading-has-content.md): Enforce heading (`h1`, `h2`, etc) elements contain accessible content.
 - [href-no-hash](docs/rules/href-no-hash.md): Enforce an anchor element's `href` prop value is not just `#`.
 - [html-has-lang](docs/rules/html-has-lang.md): Enforce `<html>` element has `lang` prop.
+- [iframe-has-title](docs/rules/iframe-has-title.md): Enforce iframe elements have a title attribute.
 - [img-has-alt](docs/rules/img-has-alt.md): Enforce that `<img>` JSX elements use the `alt` prop.
 - [img-redundant-alt](docs/rules/img-redundant-alt.md): Enforce `<img>` alt prop does not contain the word "image", "picture", or "photo".
 - [label-has-for](docs/rules/label-has-for.md): Enforce that `<label>` elements have the `htmlFor` prop.
diff --git a/__tests__/src/rules/iframe-has-title-test.js b/__tests__/src/rules/iframe-has-title-test.js
@@ -0,0 +1,50 @@
+/**
+ * @fileoverview Enforce iframe elements have a title attribute.
+ * @author Ethan Cohen
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import rule from '../../../src/rules/iframe-has-title';
+
+const parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: '<iframe> elements must have a unique title property.',
+  type: 'JSXOpeningElement',
+};
+
+ruleTester.run('html-has-lang', rule, {
+  valid: [
+    { code: '<div />;', parserOptions },
+    { code: '<iframe title="Unique title" />', parserOptions },
+    { code: '<iframe title={foo} />', parserOptions },
+    { code: '<FooComponent />', parserOptions },
+  ],
+  invalid: [
+    { code: '<iframe />', errors: [expectedError], parserOptions },
+    { code: '<iframe {...props} />', errors: [expectedError], parserOptions },
+    { code: '<iframe title={undefined} />', errors: [expectedError], parserOptions },
+    { code: '<iframe title="" />', errors: [expectedError], parserOptions },
+    { code: '<iframe title={false} />', errors: [expectedError], parserOptions },
+    { code: '<iframe title={true} />', errors: [expectedError], parserOptions },
+    { code: "<iframe title={''} />", errors: [expectedError], parserOptions },
+    { code: '<iframe title={``} />', errors: [expectedError], parserOptions },
+    { code: '<iframe title={""} />', errors: [expectedError], parserOptions },
+    { code: '<iframe title={42} />', errors: [expectedError], parserOptions },
+  ],
+});
diff --git a/docs/rules/iframe-has-title.md b/docs/rules/iframe-has-title.md
@@ -0,0 +1,29 @@
+# iframe-has-title
+
+`<iframe>` elements must have a unique title property to indicate its content to the user.
+
+#### References
+1. [Deque University](https://dequeuniversity.com/rules/axe/1.1/frame-title)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<iframe title="This is a unique title" />
+<iframe title={uniqueTitle} />
+```
+
+### Fail
+```jsx
+<iframe />
+<iframe {...props} />
+<iframe title="" />
+<iframe title={''} />
+<iframe title={``} />
+<iframe title={undefined} />
+<iframe title={false} />
+<iframe title={true} />
+<iframe title={42} />
+```
diff --git a/src/index.js b/src/index.js
@@ -11,6 +11,7 @@ module.exports = {
     'heading-has-content': require('./rules/heading-has-content'),
     'href-no-hash': require('./rules/href-no-hash'),
     'html-has-lang': require('./rules/html-has-lang'),
+    'iframe-has-title': require('./rules/iframe-has-title'),
     'img-has-alt': require('./rules/img-has-alt'),
     'img-redundant-alt': require('./rules/img-redundant-alt'),
     'label-has-for': require('./rules/label-has-for'),
@@ -44,6 +45,7 @@ module.exports = {
         'jsx-a11y/heading-has-content': 'error',
         'jsx-a11y/href-no-hash': 'error',
         'jsx-a11y/html-has-lang': 'error',
+        'jsx-a11y/iframe-has-title': 'error',
         'jsx-a11y/img-has-alt': 'error',
         'jsx-a11y/img-redundant-alt': 'error',
         'jsx-a11y/label-has-for': 'error',
diff --git a/src/rules/iframe-has-title.js b/src/rules/iframe-has-title.js
@@ -0,0 +1,43 @@
+/**
+ * @fileoverview Enforce iframe elements have a title attribute.
+ * @author Ethan Cohen
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import { elementType, getProp, getPropValue } from 'jsx-ast-utils';
+import { generateObjSchema } from '../util/schemas';
+
+const errorMessage = '<iframe> elements must have a unique title property.';
+
+const schema = generateObjSchema();
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: [schema],
+  },
+
+  create: context => ({
+    JSXOpeningElement: (node) => {
+      const type = elementType(node);
+
+      if (type && type !== 'iframe') {
+        return;
+      }
+
+      const title = getPropValue(getProp(node.attributes, 'title'));
+
+      if (title && typeof title === 'string') {
+        return;
+      }
+
+      context.report({
+        node,
+        message: errorMessage,
+      });
+    },
+  }),
+};
