eslint-plugin-jsx-a11y - npm Package Compare versions

Comparing version 1.5.5 to 2.0.0

CHANGELOG.md

@@ -0,1 +1,6 @@
+2.0.0 / 2016-07-12
+==================
+- [breaking] - scope `no-onchange` rule to select menu elements only.
+
+
 1.5.5 / 2016-07-05
@@ -2,0 +7,0 @@ ==================

docs/rules/no-onchange.md

 # no-onchange
 
-Enforce usage of `onBlur` over/in parallel with `onChange` for accessibility. `onBlur` **should** be used instead of `onChange`, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users. `onBlur` is a more declarative action by the user: for instance in a dropdown, using the arrow keys to toggle between options will trigger the `onChange` event in some browsers. Regardless, when a change of context results from an `onBlur` event or an `onChange` event, the user should be notified of the change unless it occurs below the currently focused element.
+Enforce usage of `onBlur` over/in parallel with `onChange` on select menu elements for accessibility. `onBlur` **should** be used instead of `onChange`, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users. `onBlur` is a more declarative action by the user: for instance in a dropdown, using the arrow keys to toggle between options will trigger the `onChange` event in some browsers. Regardless, when a change of context results from an `onBlur` event or an `onChange` event, the user should be notified of the change unless it occurs below the currently focused element.
 
@@ -15,4 +15,9 @@ #### References
 ```jsx
-<input onBlur={updateModel} />
-<input onBlur={handleOnBlur} onChange={handleOnChange} />
+<select onBlur={updateModel}>
+  <option/>
+</select>
+
+<select>
+  <option onBlur={handleOnBlur} onChange={handleOnChange} />
+</select>
 ```
@@ -22,3 +27,3 @@
 ```jsx
-<input onChange={updateModel} />
+<select onChange={updateModel} />
 ```

lib/rules/no-onchange.js

@@ -14,5 +14,13 @@ 'use strict';
 
+var applicableTypes = ['select', 'option'];
+
 module.exports = function (context) {
   return {
     JSXOpeningElement: function JSXOpeningElement(node) {
+      var nodeType = (0, _jsxAstUtils.elementType)(node);
+
+      if (applicableTypes.indexOf(nodeType) === -1) {
+        return;
+      }
+
       var onChange = (0, _jsxAstUtils.getProp)(node.attributes, 'onChange');
@@ -19,0 +27,0 @@ var hasOnBlur = (0, _jsxAstUtils.getProp)(node.attributes, 'onBlur') !== undefined;

package.json

 {
   "name": "eslint-plugin-jsx-a11y",
-  "version": "1.5.5",
+  "version": "2.0.0",
   "description": "A static analysis linter of jsx and their accessibility with screen readers.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -87,3 +87,3 @@ <p align="center">
 - [no-marquee](docs/rules/no-marquee.md): Enforce `<marquee>` elements are not used.
-- [no-onchange](docs/rules/no-onchange.md): Enforce that `onBlur` is used instead of `onChange`.
+- [no-onchange](docs/rules/no-onchange.md): Enforce usage of `onBlur` over `onChange` on select menus for accessibility.
 - [onclick-has-focus](docs/rules/onclick-has-focus.md): Enforce that elements with `onClick` handlers must be focusable.
@@ -90,0 +90,0 @@ - [onclick-has-role](docs/rules/onclick-has-role.md): Enforce that non-interactive, visible elements (such as `<div>`) that have click handlers use the role attribute.

src/rules/no-onchange.js

@@ -10,3 +10,3 @@ /**
 
-import { getProp } from 'jsx-ast-utils';
+import { getProp, elementType } from 'jsx-ast-utils';
 
@@ -17,4 +17,15 @@ const errorMessage = 'onBlur must be used instead of onchange, ' +
 
+const applicableTypes = [
+  'select',
+  'option',
+];
+
 module.exports = context => ({
   JSXOpeningElement: node => {
+    const nodeType = elementType(node);
+
+    if (applicableTypes.indexOf(nodeType) === -1) {
+      return;
+    }
+
     const onChange = getProp(node.attributes, 'onChange');
@@ -21,0 +32,0 @@ const hasOnBlur = getProp(node.attributes, 'onBlur') !== undefined;

tests/src/rules/no-onchange.js

 /**
- * @fileoverview Enforce usage of onBlur over onChange for accessibility.
+ * @fileoverview Enforce usage of onBlur over onChange on select menus for accessibility.
  * @author Ethan Cohen
@@ -35,14 +35,19 @@ */
   valid: [
-    { code: '<div onBlur={() => {}} />;', parserOptions },
-    { code: '<div onBlur={handleOnBlur} />;', parserOptions },
-    { code: '<div />;', parserOptions },
-    { code: '<div onBlur={() => {}} onChange={() => {}} />;', parserOptions },
-    { code: '<div {...props} />', parserOptions },
+    { code: '<select onBlur={() => {}} />;', parserOptions },
+    { code: '<select onBlur={handleOnBlur} />;', parserOptions },
+    { code: '<option />;', parserOptions },
+    { code: '<option onBlur={() => {}} onChange={() => {}} />;', parserOptions },
+    { code: '<option {...props} />', parserOptions },
+    { code: '<input onChange={() => {}} />;', parserOptions },
+    { code: '<input onChange={handleOnChange} />;', parserOptions },
+    { code: '<input />;', parserOptions },
+    { code: '<input onChange={() => {}} onChange={() => {}} />;', parserOptions },
+    { code: '<input {...props} />', parserOptions },
   ],
   invalid: [
-    { code: '<div onChange={() => {}} />;', errors: [expectedError], parserOptions },
-    { code: '<div onChange={handleOnChange} />;', errors: [expectedError], parserOptions },
-    { code: '<input onChange={() => {}} />', errors: [expectedError], parserOptions },
-    { code: '<input onChange={() => {}} {...props} />', errors: [expectedError], parserOptions },
+    { code: '<select onChange={() => {}} />;', errors: [expectedError], parserOptions },
+    { code: '<select onChange={handleOnChange} />;', errors: [expectedError], parserOptions },
+    { code: '<option onChange={() => {}} />', errors: [expectedError], parserOptions },
+    { code: '<option onChange={() => {}} {...props} />', errors: [expectedError], parserOptions },
   ],
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

370610

increased by0.25%

Lines of code

12097

increased by0.15%

No dependency changes