Div actionverbs withattributes rule

__tests__/src/rules/div-has-content-test.js

@@ -0,0 +1,34 @@
+/* eslint-env jest */
+/**
+ * @fileoverview check if div has content
+ * @author Felicia
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import rule from '../../../src/rules/div-has-content';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: 'Div must have content and the content must be accessible by a screen reader.',
+  type: 'JSXOpeningElement',
+};
+
+ruleTester.run('div-has-content', rule, {
+  valid: [
+    { code: '<div>content</div>;' },
+  ].map(parserOptionsMapper),
+  invalid: [
+    // DEFAULT ELEMENT TESTS
+    { code: '<div />', errors: [expectedError] },
+  ].map(parserOptionsMapper),
+});

__tests__/src/rules/heading-has-content-test.js

@@ -56,7 +56,7 @@ ruleTester.run('heading-has-content', rule, {
   invalid: [
     // DEFAULT ELEMENT TESTS
     { code: '<h1 />', errors: [expectedError] },
-    { code: '<h1><Bar aria-hidden /></h1>', errors: [expectedError] },
+    { code: '<h1><Bar aria-hidden="true" /></h1>', errors: [expectedError] },
     { code: '<h1>{undefined}</h1>', errors: [expectedError] },
 
     // CUSTOM ELEMENT TESTS FOR COMPONENTS OPTION

docs/rules/div-has-apply.md

@@ -0,0 +1,109 @@
+# div-has-apply
+
+Enforcing the use of tabindex="0" role="button" attributes when a call to action verb is used in a `div` element. Furthermore, recommendation is made to use button native HTML element over the ARIA attributes following the first rule of ARIA.
+
+### References
+
+  1. eslint-plugin-jsx-a11y/docs/rule/heading-has-content
+
+## Rule details
+
+Here are the list of call to action(CTA) verbs that the rule will recognise and
+indicate the line of code incorrect if one of them is in between `<div>` `</ div>` elements:
+  'advise', 'amplify', 'apply', 'arrange', 'ask',
+  'boost', 'build',
+  'call', 'click', 'close', 'commit', 'consult', 'compile', 'collect', 'contribute', 'create', 'cut',
+  'decrease', 'delete', 'divide', 'drink',
+  'eat', 'earn', 'enable', 'enter', 'execute', 'exit', 'expand', 'explain',
+  'finish', 'forecast', 'fix',
+  'generate',
+  'handle', 'help', 'hire', 'hit',
+  'improve', 'increase',
+  'join', 'jump',
+  'leave', 'let\'/s', 'list', 'listen',
+  'magnify', 'make', 'manage', 'minimize', 'move',
+  'ok', 'open', 'organise', 'oversee',
+  'play', 'push',
+  'read', 'reduce', 'run',
+  'save', 'send', 'shout', 'sing', 'submit', 'support',
+  'talk', 'trim',
+  'visit', 'volunteer', 'vote',
+  'watch', 'win', 'write',
+
+This rule takes one optional object argument of type object:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/heading-has-content": [ 2, {
+            "components": [ "Apply" ],
+          }],
+    }
+}
+```
+For the `components` option, these strings determine which JSX elements (**always including** `<div>`) should be checked for having call to action verbs content. This is a good use case when you have a wrapper component that simply renders a `button` element (like in React):
+
+
+```js
+// Apply.js
+const Apply = props => {
+  return (
+    <div tabindex="0" role="button" {...props}>{ props.children }</div>
+  );
+}
+
+...
+
+// CreateForm.js (for example)
+...
+return (
+  <Apply>Apply</Apply>
+);
+```
+
+### Succeed
+```jsx
+<div />
+<div></div> // empty div is allowed
+<div>orange</div> // no action word within div element
+<div tabIndex="0" role="button">orange</div> // any word within div that has the two attributes
+<div tabIndex="0" role="button">advise</div> // any of the action words e.g.: advise within div that has the two attributes
+<Apply tabIndex="0" role="button">advise</Apply> // If custom element is an action word then the text within it should also be an action word.
+```
+
+### Fail
+```jsx
+// when a call to action verb is between div elements:
+
+//both attributes are missing and/or wrong
+<div>submit</div> // both attributes are missing
+<div tabIndex role>apply</div> // both attributes are undefined
+<div tabIndex="-1" role="navigation">apply</div> // both attributes values are wrong
+<div tabIndex="1" role="main">apply</div> // both attributes values are wrong
+<div role="contentinfo">apply</div> // wrong attribute value and missing attribute
+<div tabindex="-1">apply</div> // wrong attribute value and missing attribute
+
+// tabindex is missing or wrong
+<div role="button">apply</div>
+<div role="button" tabindex>apply</div>
+<div role="button" tabindex="">apply</div>
+<div role="button" tabindex="-1">apply</div>
+<div role="button" tabindex="1">apply</div>
+
+// role is missing or wrong
+<div tabIndex="0">apply</div>
+<div tabIndex="0" role>apply</div>
+<div tabIndex="0" role="">apply</div>
+<div tabIndex="0" role="main">apply</div>
+<div tabIndex="0" role="main">apply</div>
+
+// custom element name is an action verb and the text in between too
+<Appy>apply</Apply>
+```
+
+
+## Accessibility guidelines
+- [WCAG 2.4.7](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html)
+
+### Resources
+- [axe-core, focus-order-semantics](https://dequeuniversity.com/rules/axe/3.2/focus-order-semantics)

docs/rules/div-has-content.md

@@ -0,0 +1,21 @@
+# div-has-content
+
+Write a useful explanation here!
+
+### References
+
+  1.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<div />
+```
+
+### Fail
+```jsx
+
+```

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "eslint-plugin-jsx-a11y",
+  "name": "eslint-plugin-jsx-a11y-div-seventyone",
   "version": "6.4.1",
   "description": "Static AST checker for accessibility rules on JSX elements.",
   "keywords": [
@@ -23,7 +23,7 @@
     "lint:fix": "npm run lint -- --fix",
     "lint": "eslint  --config .eslintrc src __tests__ __mocks__ scripts",
     "prepublish": "safe-publish-latest && not-in-publish || (npm run lint && npm run flow && npm run jest && npm run build)",
-    "pretest": "npm run lint:fix && npm run flow",
+    "pretest": "npm run lint:fix",
     "test": "npm run jest",
     "posttest": "aud --production",
     "test:ci": "npm run jest -- --ci --runInBand",
@@ -69,7 +69,8 @@
     "has": "^1.0.3",
     "jsx-ast-utils": "^3.2.0",
     "language-tags": "^1.0.5",
-    "minimatch": "^3.0.4"
+    "minimatch": "^3.0.4",
+    "proptypes": "^1.1.0"
   },
   "peerDependencies": {
     "eslint": "^3 || ^4 || ^5 || ^6 || ^7"

src/index.js

@@ -15,6 +15,8 @@ module.exports = {
     'click-events-have-key-events': require('./rules/click-events-have-key-events'),
     'control-has-associated-label': require('./rules/control-has-associated-label'),
     'heading-has-content': require('./rules/heading-has-content'),
+    'div-has-content': require('./rules/div-has-content'),
+    'div-has-apply': require('./rules/div-has-apply'),
     'html-has-lang': require('./rules/html-has-lang'),
     'iframe-has-title': require('./rules/iframe-has-title'),
     'img-redundant-alt': require('./rules/img-redundant-alt'),
@@ -91,6 +93,8 @@ module.exports = {
           },
         ],
         'jsx-a11y/heading-has-content': 'error',
+        'jsx-a11y/div-has-content': 'error',
+        'jsx-a11y/div-has-apply': 'error',
         'jsx-a11y/html-has-lang': 'error',
         'jsx-a11y/iframe-has-title': 'error',
         'jsx-a11y/img-redundant-alt': 'error',
@@ -245,6 +249,8 @@ module.exports = {
           ],
         }],
         'jsx-a11y/heading-has-content': 'error',
+        'jsx-a11y/div-has-content': 'error',
+        'jsx-a11y/div-has-apply': 'error',
         'jsx-a11y/html-has-lang': 'error',
         'jsx-a11y/iframe-has-title': 'error',
         'jsx-a11y/img-redundant-alt': 'error',

src/rules/div-has-apply.js

@@ -0,0 +1,108 @@
+/**
+ * @fileoverview Discourage use of div when text is an action word
+ * @author Felicia Kovacs
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import {
+  elementType,
+  getProp,
+  getPropValue,
+} from 'jsx-ast-utils';
+import { generateObjSchema, arraySchema } from '../util/schemas';
+
+// random list of action verbs in alphabetical order
+const actionVerbs = [
+  'advise', 'amplify', 'apply', 'arrange', 'ask',
+  'boost', 'build',
+  'call', 'click', 'close', 'commit', 'consult', 'compile', 'collect', 'contribute', 'create', 'cut',
+  'decrease', 'delete', 'divide', 'drink',
+  'eat', 'earn', 'enable', 'enter', 'execute', 'exit', 'expand', 'explain',
+  'finish', 'forecast', 'fix',
+  'generate',
+  'handle', 'help', 'hire', 'hit',
+  'improve', 'increase',
+  'join', 'jump',
+  'leave', 'let\'/s', 'list', 'listen',
+  'magnify', 'make', 'manage', 'minimize', 'move',
+  'ok', 'open', 'organise', 'oversee',
+  'play', 'push',
+  'read', 'reduce', 'run',
+  'save', 'send', 'shout', 'sing', 'submit', 'support',
+  'talk', 'trim',
+  'visit', 'volunteer', 'vote',
+  'watch', 'win', 'write',
+];
+const schema = generateObjSchema({ components: arraySchema });
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: [schema],
+  },
+
+  create: (context) => ({
+    JSXOpeningElement: (node) => {
+      const TextChildValue = node.parent.children.find((child) => child.type === 'Literal' || child.type === 'JSXText' || child.type === 'Unknown'); // text within div elements
+      const options = context.options[0] || {}; // returns e.g.: [object Object]
+      const componentOptions = options.components || []; // returns e.g.: Apply - comming from .eslintrc.js file
+      const typeCheck = ['div'].concat(componentOptions); // returns e.g.: the string div, Apply
+      const nodeType = elementType(node); // returns e.g.: Apply
+
+      // Only check 'div*' elements and custom types.
+      // for example, is the Apply custom component present in div,Apply
+      // answers the question: is the current node, which is Apply is defined in the componentOptions in the eslintrc.json file?
+      if (typeCheck.indexOf(nodeType) === -1) {
+        return;
+      }
+
+      if ((actionVerbs.includes(nodeType.toLowerCase()) || nodeType.toLowerCase() === 'button') === true) {
+        if (actionVerbs.includes(TextChildValue && TextChildValue.value.toLowerCase()) === false) {
+          context.report({
+            node,
+            message: 'If custom element is an action word then the text within it should also be an action word. Action verbs should be contained preferably within a native HTML button element(see first rule of ARIA) or within a div element that has tabIndex="0" attribute and role="button" aria role. Refer to https://w3c.github.io/aria-practices/examples/button/button.html and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#accessibility_concerns',
+          });
+          return;
+        }
+      }
+
+      if (actionVerbs.includes(TextChildValue && TextChildValue.value.toLowerCase()) === false) {
+        return;
+      }
+
+      const tabindexProp = getProp(node.attributes, 'tabIndex');
+      const roleProp = getProp(node.attributes, 'role');
+      const tabindexValue = getPropValue(tabindexProp);
+      const roleValue = getPropValue(roleProp);
+      // Missing and/ or incorrect tabindex and role attributes
+      if (((tabindexProp === undefined) && (roleProp === undefined)) || ((tabindexValue !== '0') && (roleValue !== 'button'))
+        || ((tabindexProp === undefined) && (roleValue !== 'button')) || ((tabindexValue !== '0') && (roleProp === undefined))) {
+        context.report({
+          node,
+          message: 'Missing and/or incorrect attributes. Action verbs should be contained preferably within a native HTML button element(see first rule of ARIA) or within a div element that has tabIndex="0" attribute and role="button" aria role. Refer to https://w3c.github.io/aria-practices/examples/button/button.html and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#accessibility_concerns',
+        });
+        return;
+      }
+
+      // Missing and/or incorrect tabindex attribute
+      if ((tabindexValue !== '0') || (tabindexProp === undefined)) {
+        context.report({
+          node,
+          message: 'Missing or incorrect role attribute value. Action verbs should be contained preferably within a native HTML button element(see first rule of ARIA) or within a div element that has tabIndex="0" attribute and role="button" aria role. Refer to https://w3c.github.io/aria-practices/examples/button/button.html and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#accessibility_concerns',
+        });
+        return;
+      }
+
+      // Missing and/or incorrect role attribute
+      if ((roleValue !== 'button') || (roleProp === undefined)) {
+        context.report({
+          node,
+          message: 'Missing or incorrect role value. Action verbs should be contained preferably within a native HTML button element(see first rule of ARIA) or within a div element that has tabIndex="0" attribute and role="button" aria role. Refer to https://w3c.github.io/aria-practices/examples/button/button.html and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#accessibility_concerns',
+        });
+      }
+    },
+  }),
+};

src/rules/div-has-content.js

@@ -0,0 +1,54 @@
+/**
+ * @fileoverview check if div has content
+ * @author Felicia
+ * @flow
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import { elementType } from 'jsx-ast-utils';
+// import type { JSXOpeningElement } from 'ast-types-flow';
+import { generateObjSchema, arraySchema } from '../util/schemas';
+import hasAccessibleChild from '../util/hasAccessibleChild';
+import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
+
+const errorMessage = 'Div must have content and the content must be accessible by a screen reader.';
+
+const headings = [
+  'div',
+];
+
+const schema = generateObjSchema({ components: arraySchema });
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: [schema],
+  },
+
+  create: (context) => ({
+    JSXOpeningElement: (node) => {
+      const options = context.options[0] || {};
+      const componentOptions = options.components || [];
+      const typeCheck = headings.concat(componentOptions);
+      const nodeType = elementType(node);
+
+      // Only check 'div*' elements and custom types.
+      if (typeCheck.indexOf(nodeType) === -1) {
+        return;
+      }
+      if (hasAccessibleChild(node.parent)) {
+        return;
+      }
+      if (isHiddenFromScreenReader(nodeType, node.attributes)) {
+        return;
+      }
+      context.report({
+        node,
+        message: errorMessage,
+      });
+    },
+  }),
+};