Gimbal axe Plugin

The axe plugin adds axe auditing to Gimbal. This plugin will check for violations reported by axe and check the impact of the violations against the configured thresholds.

Installation

First, you need to install the plugin to your project:

# with npm
npm install --save-dev @modus/gimbal-plugin-axe

# or with yarn
yarn add --dev @modus/gimbal-plugin-axe

Next, you need to add the plugin to your Gimbal configuration file:

YAML

plugins:
  - '@modus/gimbal-plugin-axe'

JSON

{
  "plugins": ["@modus/gimbal-plugin-axe"]
}

JavaScript

modules.exports = {
  plugins: ['@modus/gimbal-plugin-axe'],
};

Configuration

There are three configs that you can change:

• disabledRules - An optional string or array of strings that will disable certain rules. For more, see here.
• exclude - An optional string or array of strings that will allow certain CSS selectors to be excluded from the axe analysis. For more, see here.
• include - An optional string or array of strings that will only allow certain CSS selectors to be included in the axe analysis. For more, see here.
• rules - An optional string or array of strings that will only allow certain axe rules to be run in the axe analysis. For more, see here.
• showSuccesses - If set to false, the output of the final report will now show the successful rules.
• tags - An optional string or array of strings that will allow only the specified rule IDs in the axe analysis. For more, see here.
• threshold - This is the object of thresholds. Each rule can have it's own threshold.

Threshold

By default, there is a single threshold that is set to minor meaning only minor violations will be allowed. Each rule can have it's own threshold defined:

plugins:
  - plugin: '@modus/gimbal-plugin-axe'
    thresholds:
      bypass: serious

The acceptable levels in order from least to greater impact are: none, minor, moderate, serious, critical.

Default Configuration

plugins:
  - plugin: '@modus/gimbal-plugin-axe'
    showSuccesses: true
    thresholds:
      impact: none