feature(rules): add recommended, extended rulesets (#3)

* feat(ruleset): add recommended, extended rulesets * refactor(rulesets): extract common parts out, reuse and remove duplicate * test(rulesets): add sanity checks for rules, add tests with axe * fix(rules): add missed out rule label-content-name-mismatch * build(root): add axe-core as dev dep * build(root): add tsdoc eslint plugin dep, config * build(root): add code coverage opt, threshold, ci config * refactor(rules): refactor rulesets based on interface type * refactor(rules): mv source files under src from lib * build(rules): add typescript project ref to rules * build(root): add spell checker dep, config; add to git staged lint check * refactor(rules): rename rules package to preset-rules * refactor(root): split tsconfig module references into its own config * build(root): add babel jest typescript deps, config * build(root): remove ts-jest deps as it is replaced by babel jest
salesforce · Mar 24, 2020 · 3ff2af7 · 3ff2af7
1 parent 6613355
commit 3ff2af7
Show file tree

Hide file tree

Showing 24 changed files with 1,614 additions and 235 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,10 +3,11 @@ module.exports = {
     parser: '@typescript-eslint/parser',
     parserOptions: {
         tsconfigRootDir: __dirname,
-        project: ['./tsconfig.json'],
+        project: ['./tsconfig.common.json'],
     },
     plugins: [
         '@typescript-eslint',
+        'tsdoc',
         'jest',
         'prettier',
         'notice', // checks for and fixes copyright header in each file
@@ -28,6 +29,7 @@ module.exports = {
                 templateFile: 'license-header.txt',
             },
         ],
+        'tsdoc/syntax': 'warn',
     },
     env: {
         browser: true,

diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 *.log
+*.tsbuildinfo
 .DS_Store
 .vscode/
 .idea/

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -2,5 +2,5 @@ module.exports = {
     tabWidth: 4,
     printWidth: 120,
     singleQuote: true,
-    trailingComma: 'es5'
+    trailingComma: 'es5',
 };
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,9 @@
+# (2020-03-20)
+
+### Bug Fixes
+
+-   **rules:** add missed out rule label-content-name-mismatch ([2407938](https://github.com/salesforce/sa11y/commit/240793894cf36d0ce8f227779a4cfc26ecf41590))
+
+### Features
+
+-   **ruleset:** add recommended, extended rulesets ([3ab49ef](https://github.com/salesforce/sa11y/commit/3ab49ef81d5e8ad064e85922de1efcd9bc567c9f))
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -25,7 +25,7 @@ We want to encourage the developer community to contribute to Sa11y. This guide
         -   [Create a pull request](#create-a-pull-request)
             -   [Pull Request Title](#pull-request-title)
         -   [Update the pull request](#update-the-pull-request)
-        -   [<a name="commit"></a> Commit Message Conventions](#commit-message-conventions)
+        -   [Commit Message Conventions](#commit-message-conventions)
             -   [Commit Message Format](#commit-message-format)
             -   [Reverting a commit](#reverting-a-commit)
             -   [Commit Type](#commit-type)
@@ -230,7 +230,7 @@ git push origin ${feature_branch} --force
 
 _note: If more changes are needed as part of the pull request, just keep committing and pushing your feature branch as described above and the pull request will automatically update._
 
-### <a name="commit"></a> Commit Message Conventions
+### Commit Message Conventions
 
 Git commit messages have to be formatted according to a well defined set of rules. This leads to **more
 readable messages** that are easy to follow when looking through the **project history**.

diff --git a/README.md b/README.md
@@ -5,16 +5,17 @@ Salesforce Accessibility Automated Testing Libraries and Tools (@sa11y packages)
 -   [Salesforce Accessibility Automation Libraries](#salesforce-accessibility-automation-libraries)
     -   [Packages](#packages)
         -   [Preset Accessibility rules](#preset-accessibility-rules)
-        -   [assertAccessible API](#assertaccessible-api)
-        -   [Jest integration](#jest-integration)
+        -   [assertAccessible API (TBD)](#assertaccessible-api-tbd)
+        -   [a11y results formatter (TBD)](#a11y-results-formatter-tbd)
+        -   [Jest integration (TBD)](#jest-integration-tbd)
 
 ## Packages
 
 This repo contains the following packages
 
-### Preset Accessibility rules (TBD)
+### [Preset accessibility rules](./packages/preset-rules/README.md)
 
--   provides Recommended, Extended accessibility preset rule sets as axe configuration
+-   Provides Recommended, Extended accessibility preset rule-sets as [axe](https://github.com/dequelabs/axe-core) configuration
 
 ### assertAccessible API (TBD)
 
@@ -26,4 +27,4 @@ This repo contains the following packages
 
 ### Jest integration (TBD)
 
--   integrates the [assertAccessible API](#assertaccessible-api) with the [Jest assertion API](https://jestjs.io/docs/en/using-matchers)
+-   integrates the assertAccessible API with the [Jest assertion API](https://jestjs.io/docs/en/using-matchers)
diff --git a/packages/rules/__tests__/rules.test.js → babel.config.js b/packages/rules/__tests__/rules.test.js → babel.config.js
@@ -4,10 +4,6 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-'use strict';
-
-const rules = require('..');
-
-describe('@sa11y/rules', () => {
-    it('needs tests');
-});
+module.exports = {
+    presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
+};
diff --git a/cSpell.json b/cSpell.json
@@ -0,0 +1,6 @@
+{
+    "ignorePaths": ["node_modules/**", "package.json"],
+    "ignoreWords": [
+        "SPDX" // license header
+    ]
+}
diff --git a/jest.config.js b/jest.config.js
@@ -5,6 +5,12 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 module.exports = {
-    preset: 'ts-jest',
-    testEnvironment: 'node',
+    coverageThreshold: {
+        global: {
+            branches: 80,
+            functions: 80,
+            lines: 80,
+            statements: 80,
+        },
+    },
 };
diff --git a/package.json b/package.json
@@ -12,12 +12,14 @@
     ],
     "scripts": {
         "commit": "! git diff --cached --exit-code && git-cz",
-        "lint": "eslint --ext .js,.ts .",
+        "lint": "eslint .",
         "lint:fix": "yarn lint --fix",
-        "test": "jest",
+        "lint:staged": "yarn lint-staged",
+        "test": "jest --coverage",
         "build": "tsc --build",
         "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
-        "ci": "yarn install --frozen-lockfile && yarn lint && yarn test"
+        "ci": "yarn install --frozen-lockfile && yarn lint && yarn test",
+        "clean": "tsc --build --clean"
     },
     "config": {
         "commitizen": {
@@ -32,28 +34,35 @@
     },
     "lint-staged": {
         "**/*.{js,ts}": "eslint --fix",
-        "**/*.{js,ts,json,md}": "prettier --write"
+        "**/*.{js,ts,json,yaml,yml,md}": "prettier --write",
+        "**/*.{js,ts,md}": "cspell -- --no-summary"
     },
     "devDependencies": {
+        "@babel/core": "^7.9.0",
+        "@babel/preset-env": "^7.9.0",
+        "@babel/preset-typescript": "^7.9.0",
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.3.4",
         "@types/jest": "^25.1.4",
         "@typescript-eslint/eslint-plugin": "^2.23.0",
         "@typescript-eslint/parser": "^2.23.0",
+        "axe-core": "^3.5.2",
+        "babel-jest": "^25.1.0",
         "commitizen": "^4.0.3",
         "conventional-changelog-cli": "^2.0.31",
+        "cspell": "^4.0.55",
         "eslint": "^6.8.0",
         "eslint-config-prettier": "^6.10.0",
         "eslint-plugin-jest": "^23.8.2",
         "eslint-plugin-license-header": "^0.2.0",
         "eslint-plugin-notice": "^0.8.9",
         "eslint-plugin-prettier": "^3.1.2",
+        "eslint-plugin-tsdoc": "^0.2.3",
         "husky": "^4.2.3",
         "jest": "^25.1.0",
         "lerna": "^3.20.2",
         "lint-staged": "^10.0.8",
         "prettier": "1.19.1",
-        "ts-jest": "^25.2.1",
         "typescript": "^3.8.3"
     },
     "engines": {

diff --git a/packages/rules/.github/workflows/ci.yml → ...ges/preset-rules/.github/workflows/ci.yml b/packages/rules/.github/workflows/ci.yml → ...ges/preset-rules/.github/workflows/ci.yml
@@ -19,3 +19,6 @@ jobs:
               with:
                   node-version: '12.x'
             - run: yarn ci
+            - name: Jest Code Coverage Report
+              uses: ziishaned/[email protected]
+
diff --git a/packages/preset-rules/README.md b/packages/preset-rules/README.md
@@ -0,0 +1,12 @@
+# `@sa11y/preset-rules`
+
+Accessibility preset rule configs for axe
+
+## Usage
+
+```
+import axe from 'axe-core';
+import { extended } from '@sa11y/preset-rules';
+
+const a11yResults = await axe.run(extended);
+```
diff --git a/packages/preset-rules/__tests__/rules.test.ts b/packages/preset-rules/__tests__/rules.test.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2020, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import axe from 'axe-core';
+import { extended } from '../src/extended';
+import { recommended } from '../src/recommended';
+
+/**
+ * TODO:
+ *  - Add benchmark test for individual rules using https://github.com/salesforce/best
+ * */
+
+describe('@sa11y/rules sanity checks', () => {
+    it('recommended is a subset of extended', () => {
+        expect(extended.runOnly.values).toEqual(expect.arrayContaining(recommended.runOnly.values));
+        // TODO (debug): Why is this failing?
+        // expect(extended).toEqual(expect.objectContaining(recommended));
+    });
+});
+
+describe('@sa11y/rules sanity checks with axe', () => {
+    // Rules that have been excluded from running due to being deprecated by axe
+    // or due to their experimental nature
+    const excludedRules = [
+        'aria-dpub-role-fallback',
+        'checkboxgroup',
+        'frame-title-unique',
+        'hidden-content',
+        'layout-table',
+        'radiogroup',
+        'skip-link',
+        'table-duplicate-name',
+        'table-fake-caption',
+        'video-description',
+    ];
+    const axeRules = axe.getRules().map(ruleObj => ruleObj.ruleId);
+
+    it('should not contain excluded, deprecated rules', () => {
+        expect(extended.runOnly.values).toEqual(expect.not.arrayContaining(excludedRules));
+    });
+
+    it('all rules are present in axe', () => {
+        expect(axeRules).toEqual(expect.arrayContaining(extended.runOnly.values));
+    });
+
+    it('only rules not used from axe are excluded, deprecated rules', () => {
+        const unusedRules = axeRules.filter(rule => !extended.runOnly.values.includes(rule));
+        expect(unusedRules.sort()).toEqual(excludedRules.sort());
+    });
+});
diff --git a/packages/preset-rules/package.json b/packages/preset-rules/package.json
@@ -0,0 +1,16 @@
+{
+    "name": "@sa11y/preset-rules",
+    "version": "0.1.0",
+    "description": "Accessibility preset rule configs for axe",
+    "license": "BSD-3-Clause",
+    "keywords": [
+        "accessibility",
+        "automation",
+        "axe"
+    ],
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist/**/*.js"
+    ]
+}
diff --git a/packages/preset-rules/src/axeConfig.ts b/packages/preset-rules/src/axeConfig.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2020, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import { RunOptions } from 'axe-core';
+
+/**
+ * AxeConfig is limited to subset of options that we need and use in this library
+ */
+export interface AxeConfig extends RunOptions {
+    runOnly: {
+        type: 'rule';
+        values: string[];
+    };
+    resultTypes: ['violations'];
+}
+
+/**
+ * Returns config to be used in axe.run() with given rules
+ *
+ * @param rules - List of rules to be used in the config
+ * @returns AxeConfig with formatted rules
+ */
+export function getAxeConfig(rules: string[]): AxeConfig {
+    return {
+        runOnly: {
+            type: 'rule',
+            values: rules,
+        },
+        resultTypes: ['violations'],
+    };
+}
diff --git a/packages/preset-rules/src/extended.ts b/packages/preset-rules/src/extended.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2020, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import { getAxeConfig } from './axeConfig';
+import { recommended } from './recommended';
+
+const rules = [
+    ...recommended.runOnly.values,
+    'accesskeys',
+    'aria-allowed-role',
+    'avoid-inline-spacing',
+    'css-orientation-lock',
+    'frame-tested',
+    'identical-links-same-purpose',
+    'label-content-name-mismatch',
+    'landmark-banner-is-top-level',
+    'landmark-complementary-is-top-level',
+    'landmark-contentinfo-is-top-level',
+    'landmark-main-is-top-level',
+    'landmark-no-duplicate-banner',
+    'landmark-no-duplicate-contentinfo',
+    'landmark-no-duplicate-main',
+    'landmark-one-main',
+    'landmark-unique',
+    'link-in-text-block',
+    'meta-viewport-large',
+    'meta-viewport',
+    'no-autoplay-audio',
+    'object-alt',
+    'p-as-heading',
+    'region',
+];
+
+export const extended = getAxeConfig(rules);
diff --git a/packages/rules/lib/rules.js → packages/preset-rules/src/index.ts b/packages/rules/lib/rules.js → packages/preset-rules/src/index.ts
@@ -4,10 +4,6 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-'use strict';
+import { extended } from './extended';
 
-module.exports = rules;
-
-function rules() {
-    // TODO
-}
+export default extended;