Socket
Socket
Sign inDemoInstall

eslint-plugin-jsx-a11y

Package Overview
Dependencies
Maintainers
1
Versions
82
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.2.2 to 0.3.0

docs/rules/no-hash-href.md
lib/rules/no-hash-href.js
lib/util/buildTemplateLiteral.js
src/rules/no-hash-href.js
src/util/buildTemplateLiteral.js
tests/src/rules/no-hash-href.js

3

lib/index.js

@@ -11,3 +11,4 @@ 'use strict';

'no-access-key': require('./rules/no-access-key'),
'use-label-for': require('./rules/use-label-for')
'use-label-for': require('./rules/use-label-for'),
'no-hash-href': require('./rules/no-hash-href')
},

@@ -14,0 +15,0 @@ configs: {

21

lib/util/getAttributeValue.js
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _buildTemplateLiteral = require('./buildTemplateLiteral');
var _buildTemplateLiteral2 = _interopRequireDefault(_buildTemplateLiteral);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**

@@ -11,6 +21,2 @@ * Returns the value of a given attribute.

*/
Object.defineProperty(exports, "__esModule", {
value: true
});
var getAttributeValue = function getAttributeValue(attribute) {

@@ -22,3 +28,3 @@ if (attribute.value === null) {

if (attribute.value.type === 'Literal') {
return attribute.value.value;
return attribute.value.value === "" ? undefined : attribute.value.value;
} else if (attribute.value.type === 'JSXExpressionContainer') {

@@ -29,6 +35,5 @@ var expression = attribute.value.expression;

case 'Literal':
return expression.value;
return expression.value === "" ? undefined : expression.value;
case 'TemplateLiteral':
// hot-fix before actually building out raw string value.
return Boolean(expression.quasis) || Boolean(expression.expressions);
return (0, _buildTemplateLiteral2.default)(expression);
case 'Identifier':

@@ -35,0 +40,0 @@ return expression.name == 'undefined' ? undefined : expression.name;

2

package.json
{
"name": "eslint-plugin-jsx-a11y",
"version": "0.2.2",
"version": "0.3.0",
"description": "A static analysis linter of jsx and their accessibility with screen readers.",

@@ -5,0 +5,0 @@ "keywords": [

8

README.md

@@ -21,4 +21,9 @@ <p align="center">

A static analysis linter of jsx and its accessibility to all users.
Static AST checker for accessibility rules on JSX elements.
## Why?
Ryan Florence built out this awesome runtime-analysis tool called [react-a11y](https://github.com/reactjs/react-a11y). It is pretty awesome. However, this creates more package-bloat and requries initialization in your code. Since you're probably already using linting in your project, this plugin comes for free and closer to actual development. Pairing this plugin with an editor lint plugin, you can bake accessibility standards into your application in real-time.
Note: This project does not *replace* react-a11y, but can and should be used in conjunction with it. Static analysis tools cannot determine values of variables that are being placed in props before runtime, so linting will not fail if that value is undefined and/or does not pass the lint rule.
## Installation

@@ -72,2 +77,3 @@

- [redundant-alt](docs/rules/redundant-alt.md): Enforce img alt attribute does not contain the word image, picture, or photo.
- [no-hash-href](docs/rules/no-hash-href.md): Enforce an anchor element's href prop value is not just #.

@@ -74,0 +80,0 @@ ## License

3

src/index.js

@@ -11,3 +11,4 @@ 'use strict';

'no-access-key': require('./rules/no-access-key'),
'use-label-for': require('./rules/use-label-for')
'use-label-for': require('./rules/use-label-for'),
'no-hash-href': require('./rules/no-hash-href')
},

@@ -14,0 +15,0 @@ configs: {

9

src/util/getAttributeValue.js
'use strict';
import buildTemplateLiteral from './buildTemplateLiteral';
/**

@@ -17,3 +19,3 @@ * Returns the value of a given attribute.

if (attribute.value.type === 'Literal') {
return attribute.value.value;
return attribute.value.value === "" ? undefined : attribute.value.value;
} else if (attribute.value.type === 'JSXExpressionContainer') {

@@ -24,6 +26,5 @@ const expression = attribute.value.expression;

case 'Literal':
return expression.value;
return expression.value === "" ? undefined : expression.value;
case 'TemplateLiteral':
// hot-fix before actually building out raw string value.
return Boolean(expression.quasis) || Boolean(expression.expressions);
return buildTemplateLiteral(expression);
case 'Identifier':

@@ -30,0 +31,0 @@ return expression.name == 'undefined' ? undefined : expression.name;

2

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

@@ -52,2 +52,4 @@ /**

{ code: '<img alt={undefined} />;', errors: [ expectedError ], parserOptions },
{ code: '<img alt={`${undefined}`} />;', errors: [ expectedError ], parserOptions },
{ code: '<img alt="" />;', errors: [ expectedError ], parserOptions },
{ code: '<img src="xyz" />', errors: [ expectedError ], parserOptions },

@@ -54,0 +56,0 @@ { code: '<img {...this.props} />', errors: [ expectedError ], parserOptions }

6

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

@@ -39,3 +39,5 @@ /**

{ code: '<div {...props} />', parserOptions },
{ code: '<div accessKey={undefined} />', parserOptions }
{ code: '<div accessKey={undefined} />', parserOptions },
{ code: '<div accessKey={`${undefined}`} />', parserOptions },
{ code: '<div accessKey={`${undefined}${undefined}`} />', parserOptions }
],

@@ -49,4 +51,6 @@ invalid: [

{ code: '<div accessKey={`${y}`} />', errors: [ expectedError ], parserOptions },
{ code: '<div accessKey={`${undefined}y${undefined}`} />', errors: [ expectedError ], parserOptions },
{ code: '<div accessKey={`This is ${bad}`} />', errors: [ expectedError ], parserOptions },
{ code: '<div accessKey={accessKey} />', errors: [ expectedError ], parserOptions }
]
});

5

tests/src/rules/redundant-alt.js

@@ -66,4 +66,7 @@ /**

{ code: '<img alt="image" {...this.props} />', errors: [ expectedError ], parserOptions },
{ code: '<img alt="picture" {...this.props} />', errors: [ expectedError ], parserOptions }
{ code: '<img alt="picture" {...this.props} />', errors: [ expectedError ], parserOptions },
{ code: '<img alt="{`picture doing ${things}`}" {...this.props} />', errors: [ expectedError ], parserOptions },
{ code: '<img alt="{`photo doing ${things}`}" {...this.props} />', errors: [ expectedError ], parserOptions },
{ code: '<img alt="{`image doing ${things}`}" {...this.props} />', errors: [ expectedError ], parserOptions }
]
});

1

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

@@ -48,2 +48,3 @@ /**

{ code: '<label htmlFor={undefined} />', errors: [ expectedError ], parserOptions },
{ code: '<label htmlFor={`${undefined}`} />', errors: [ expectedError ], parserOptions },
{ code: '<label>First Name</label>', errors: [ expectedError ], parserOptions },

@@ -50,0 +51,0 @@ { code: '<label {...props}>Foo</label>', errors: [ expectedError ], parserOptions }

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc