axe-browser-reporter:如果检测到任何可访问性问题,则在浏览器页面中注入了斧头报告程序

  • P2_419989
    了解作者
  • 10.1MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 03:25
    上传日期
斧头浏览器报告器 描述 如果Ax报告程序检测到任何可访问性问题,则会将其插入浏览器页面。 进行该项目是为了使可访问性开发成为重中之重。 一旦违反了所有规则,该弹出窗口就会出现,并告诉您如何解决。 我们强烈依赖 安装 npm i axe-browser-reporter 用法 为了使插件在踢,确保您的全球环境变量process.env.NODE_ENV不等于'development' 。 否则, axe-browser-reporter根本不会运行。 在您的项目中,将axe-browser-reporter导入项目的根目录(例如index.(js|ts)文件)。 import bootst
axe-browser-reporter-main.zip
  • axe-browser-reporter-main
  • renovate.json
    194B
  • docs
  • demo.gif
    10MB
  • package.json
    2.3KB
  • .github
  • FUNDING.yml
    670B
  • .prettierignore
    34B
  • .stylelintrc.json
    76B
  • LICENSE
    1KB
  • package-lock.json
    320.5KB
  • src
  • typings.d.ts
    25B
  • Accordion
  • Accordion.ts
    436B
  • AccordionItem.styles.scss
    923B
  • Accordion.styles.scss
    75B
  • AccordionItem.ts
    470B
  • index.ts
    52B
  • index.html
    594B
  • StatusDot
  • StatusDot.scss
    415B
  • StatusDot.ts
    286B
  • Index
  • Index.scss
    1KB
  • Index.ts
    1.1KB
  • sass
  • common.scss
    411B
  • index.ts
    142B
  • index.dev.ts
    148B
  • validPage.html
    291B
  • Utils
  • utils.ts
    1.5KB
  • models.ts
    249B
  • setup.ts
    1.8KB
  • .eslintrc.js
    530B
  • tsconfig.json
    288B
  • .gitignore
    17B
  • webpack.config.js
    1.1KB
  • .circleci
  • config.yml
    455B
  • README.md
    2.6KB
  • .vscode
  • settings.json
    34B
  • .prettierrc.json
    3B
内容介绍
# 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) <p align="center"> </p> ## 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({ whitelist: [], runIf: () => process.env?.NODE_ENV === "development", }); ``` ### `whitelist` 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({ whitelist: ["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, }); ```
评论
    相关推荐
    • npm
      npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行测试 npm run test 整理和修复文件 npm run lint 运行单元测试 npm run test:unit 自定义配置 请参阅。
    • npm-max:NPM软件包
      最大NPM 该函数返回最大值 npm install
    • npm-exercises
      npm-exercises
    • npmTest:测试npm
      npmTest 测试npm
    • npm-lifecycle:npm生命周期脚本运行器
      npm v7发布后,将不建议使用此模块。 请不要绝对依赖它。 npm v7中使用的生命周期脚本运行程序是 。 请继续使用该模块。 npm-lifecycle 是一个独立的库,用于执行软件包的生命周期脚本。 它是从npm本身提取的,...
    • TSProjectDemo:npm ts
      TSProjectDemo:npm ts
    • npmd-install
      npmd 安装 从 npmd-resolve 树安装节点模块。 npm install - g npmd - resolve npmd - install npmd - resolve browserify | npmd - install 另外, 一个关键部分 执照 麻省理工学院
    • npm-cli-login
      npm-cli-login 允许您不使用STDIN,STDOUT登录到NPM。 在CI构建系统等地方使用。 还可以在〜/ .npmrc文件中创建/修改条目以进行身份​​验证。 安装 npm install -g npm-cli-login 使用-g标志通过CLI使用npm-cli-...
    • npm-practice
      npm-practice
    • npm:测试
      npm 测试