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

Comparing version 0.2.1 to 0.2.2

lib/rules/img-uses-alt.js

@@ -23,2 +23,3 @@ /**
       var type = node.name.name;
+      // Only check img tags.
       if (type !== 'img') {
@@ -25,0 +26,0 @@ return;

lib/util/getAttributeValue.js

 'use strict';
 
+/**
+ * Returns the value of a given attribute.
+ * Different types of attributes have their associated
+ * values in different properties on the object.
+ *
+ * This function should return the most *closely* associated
+ * value with the intention of the JSX.
+ */
+
 Object.defineProperty(exports, "__esModule", {
@@ -19,2 +28,5 @@ value: true
           return expression.value;
+        case 'TemplateLiteral':
+          // hot-fix before actually building out raw string value.
+          return Boolean(expression.quasis) || Boolean(expression.expressions);
         case 'Identifier':
@@ -21,0 +33,0 @@ return expression.name == 'undefined' ? undefined : expression.name;

lib/util/hasAttribute.js

@@ -13,2 +13,10 @@ 'use strict';
 
+/**
+ * Returns the value of the attribute or false, indicating the attribute
+ * is not present on the JSX opening element. This skips over spread attributes
+ * as the purpose of this linter is to do hard checks of explicit JSX props.
+ *
+ * This treats undefined values as missing props, as they will not be used for
+ * rendering on elements that live closest to the DOM (pure html JSX elements).
+ */
 var hasAttribute = function hasAttribute(attributes, attribute) {
@@ -15,0 +23,0 @@ var value = false;

lib/util/isHiddenFromScreenReader.js

@@ -13,2 +13,8 @@ 'use strict';
 
+/**
+ * Returns boolean indicating that the aria-hidden prop
+ * is present or the value is true.
+ *
+ * <div aria-hidden /> is equivalent to the DOM as <div aria-hidden=true />.
+ */
 var isHiddenFromScreenReader = function isHiddenFromScreenReader(attributes) {
@@ -15,0 +21,0 @@ var hasAriaHidden = (0, _hasAttribute2.default)(attributes, 'aria-hidden');

lib/util/isInteractiveElement.js

@@ -37,2 +37,8 @@ 'use strict';
 
+/**
+ * Returns boolean indicating whether the given element is
+ * interactive on the DOM or not. Usually used when an element
+ * has a dynamic handler on it and we need to discern whether or not
+ * it's intention is to be interacted with on the DOM.
+ */
 var isInteractiveElement = function isInteractiveElement(tagName, attributes) {
@@ -39,0 +45,0 @@ if (interactiveMap.hasOwnProperty(tagName) === false) {

package.json

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

src/rules/img-uses-alt.js

@@ -18,2 +18,3 @@ /**
     const type = node.name.name;
+    // Only check img tags.
     if (type !== 'img') {
@@ -20,0 +21,0 @@ return;

src/util/getAttributeValue.js

 'use strict';
 
+/**
+ * Returns the value of a given attribute.
+ * Different types of attributes have their associated
+ * values in different properties on the object.
+ *
+ * This function should return the most *closely* associated
+ * value with the intention of the JSX.
+ */
 const getAttributeValue = attribute => {
@@ -16,2 +24,5 @@ if (attribute.value === null) {
           return expression.value;
+        case 'TemplateLiteral':
+          // hot-fix before actually building out raw string value.
+          return Boolean(expression.quasis) || Boolean(expression.expressions);
         case 'Identifier':
@@ -18,0 +29,0 @@ return expression.name == 'undefined' ? undefined : expression.name;

src/util/hasAttribute.js

@@ -5,2 +5,10 @@ 'use strict';
 
+/**
+ * Returns the value of the attribute or false, indicating the attribute
+ * is not present on the JSX opening element. This skips over spread attributes
+ * as the purpose of this linter is to do hard checks of explicit JSX props.
+ *
+ * This treats undefined values as missing props, as they will not be used for
+ * rendering on elements that live closest to the DOM (pure html JSX elements).
+ */
 const hasAttribute = (attributes, attribute) => {
@@ -7,0 +15,0 @@ let value = false;

src/util/isHiddenFromScreenReader.js

@@ -5,2 +5,8 @@ 'use strict';
 
+/**
+ * Returns boolean indicating that the aria-hidden prop
+ * is present or the value is true.
+ *
+ * <div aria-hidden /> is equivalent to the DOM as <div aria-hidden=true />.
+ */
 const isHiddenFromScreenReader = attributes => {
@@ -7,0 +13,0 @@ const hasAriaHidden = hasAttribute(attributes, 'aria-hidden');

src/util/isInteractiveElement.js

@@ -21,2 +21,8 @@ 'use strict';
 
+/**
+ * Returns boolean indicating whether the given element is
+ * interactive on the DOM or not. Usually used when an element
+ * has a dynamic handler on it and we need to discern whether or not
+ * it's intention is to be interacted with on the DOM.
+ */
 const isInteractiveElement = (tagName, attributes) => {
@@ -23,0 +29,0 @@ if (interactiveMap.hasOwnProperty(tagName) === false) {

tests/src/rules/img-uses-alt.js

@@ -39,2 +39,3 @@ /**
     { code: '<img ALT="foo" />;', parserOptions },
+    { code: '<img ALT={`This is the ${alt} text`} />;', parserOptions },
     { code: '<img ALt="foo" />;', parserOptions },
@@ -41,0 +42,0 @@ { code: '<img alt="foo" salt={undefined} />;', parserOptions },

tests/src/rules/no-access-key.js

@@ -47,4 +47,5 @@ /**
     { code: '<div accessKey={"y"} />', errors: [ expectedError ], parserOptions },
+    { code: '<div accessKey={`${y}`} />', errors: [ expectedError ], parserOptions },
     { code: '<div accessKey={accessKey} />', errors: [ expectedError ], parserOptions }
   ]
 });

tests/src/rules/onclick-uses-role.js

@@ -39,2 +39,3 @@ /**
     { code: '<div onClick={() => void 0} role={"button"} />;', parserOptions },
+    { code: '<div onClick={() => void 0} role={`${role}`} />;', parserOptions },
     { code: '<div onClick={() => void 0} role="button" {...props} />;', parserOptions },
@@ -41,0 +42,0 @@ { code: '<div className="foo" />;', parserOptions },

tests/src/rules/redundant-alt.js

@@ -47,2 +47,3 @@ /**
     { code: '<img alt={undefined} />', parserOptions },
+    { code: '<img alt={`this should pass for ${now}`} />', parserOptions },
     { code: '<img alt={"undefined"} />', parserOptions },
@@ -49,0 +50,0 @@ { code: '<img alt={() => {}} />', parserOptions },

tests/src/rules/use-label-for.js

@@ -39,2 +39,3 @@ /**
     { code: '<label htmlFor={foo} />', parserOptions },
+    { code: '<label htmlFor={`${id}`} />', parserOptions },
     { code: '<div />', parserOptions },
@@ -41,0 +42,0 @@ { code: '<label htmlFor="foo">Test!</label>', 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

58292

increased by5.39%

Lines of code

1262

increased by5.78%

No dependency changes