https://github.com/m4thieulavoie/axe-browser-reporter

Axe reporter injected in the browser page if it detects any accessibility issue
https://github.com/m4thieulavoie/axe-browser-reporter

accessibility axe html sass web-components

Last synced: about 2 months ago
JSON representation

Axe reporter injected in the browser page if it detects any accessibility issue

• Host: GitHub
• URL: https://github.com/m4thieulavoie/axe-browser-reporter
• Owner: m4thieulavoie
• License: mit
• Created: 2020-12-29T16:47:33.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-11-29T21:46:35.000Z (about 2 months ago)
• Last Synced: 2024-11-29T22:33:21.512Z (about 2 months ago)
• Topics: accessibility, axe, html, sass, web-components
• Language: TypeScript
• Homepage:
• Size: 12.4 MB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# axe-browser-reporter

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)

[![npm version](https://badge.fury.io/js/axe-browser-reporter.svg)](https://www.npmjs.com/package/axe-browser-reporter)

[![Downloads](https://img.shields.io/npm/dm/axe-browser-reporter.svg)](https://www.npmjs.com/package/axe-browser-reporter)

[![CircleCI](https://circleci.com/gh/circleci/circleci-docs.svg?style=shield)](https://circleci.com/gh/m4thieulavoie/axe-browser-reporter)



    



## Description

Axe reporter injected in the browser page if it detects any accessibility issue.

This project is made to make the accessibility development a top priority. As soon as an a11y rule is broken, the popup will simply appear and let you know how you can fix it. We strongly rely on [axe-core](https://github.com/dequelabs/axe-core)

## Installation

```bash

npm i axe-browser-reporter

```

## Usage

> In order for the plugin to kick in, make sure that your global environment variable `process.env.NODE_ENV` _does_ equal `'development'`. Otherwise, `axe-browser-reporter` won't run at all.

In your project, import `axe-browser-reporter` at the root of your project (e.g. an `index.(js|ts)` file).

```ts

import bootstrap from "axe-browser-reporter";

// Any setup code at root level of your app

bootstrap();

```

## Options

Some options can be passed to `bootstrap` in order to tweak `axe` under the hood

```ts

import bootstrap from "axe-browser-reporter";

// Default values

bootstrap({

  allowlist: [],

  runIf: () => process.env?.NODE_ENV === "development",

});

```

### `allowlist`

If there are rules you want `axe-browser-reporter` **not** to notify you about, you can specify them in an array of `string` like such. The argument is the `id` given from `axe`. The full list can be found [here](https://github.com/dequelabs/axe-core/blob/f318a2c958aa771493d7690b051f37b22ac1bcaf/doc/rule-descriptions.md)

```ts

import bootstrap from "axe-browser-reporter";

// Will ignore color-contrast and frame-tested a11y rules

bootstrap({

  allowlist: ["color-contrast", "frame-tested"],

});

```

### `runIf`

If you want to change the condition on wheter to run `axe-browser-reporter` or not, you can specify a `runIf` attribute. Its signature is `() => boolean`

```ts

import bootstrap from "axe-browser-reporter";

const myBoolean = randomCondition ? true : false;

bootstrap({

  runIf: () => myBoolean,

});

```