Accessibility Insights for Web

Accessibility Insights for Web is a Google Chrome and Microsoft Edge Insider browser extension for assessing the accessibility of web sites and web applications.

Running the extension

You can install the extension from one of the following links

• Canary (released continuously)
• Insider (on feature completion)
• Production (after validation in Insider)

Building the code

Prerequisites

Please ensure that you have at least the minimum recommended versions

• Node - 10.15.0 (Check by running node --version) - This is the version being enforced on our builds
• Yarn - Version >= v1.15.2 (Check by running yarn --version)

In case you dont have yarn, please install from: Yarn

1. Clone the repository

• Clone the repository using one of the following commands

  git clone https://github.com/Microsoft/accessibility-insights-web.git
  

  or

  git clone git@github.com:Microsoft/accessibility-insights-web.git
  

• Select the created directory

  cd accessibility-insights-web
  

2. Install packages

• Install the packages

  yarn install
  

3. Build and run unit tests

• Run the unit tests

  yarn test
  

• Build and run the end-to-end tests (note: you must use a non-admin prompt to avoid this issue)

  yarn build
  yarn test:e2e
  

  There are more details in the Testing section below.

4. Load the extension locally

• Build the (unpacked) extension

  yarn build
  

• Add the extension to your browser

  • Click on the 3-dotted-menu in the upper right corner and then select "More Tools" and then "Extensions"

  • Verify that developer mode is enabled in the upper right

  • Click on the Load unpacked button

  • Choose the following directory

    ./drop/dev/extension/ - bundled like a production release

  IMPORTANT: Ensure that you are testing locally before pushing a change.

• Look for the extension icon to the right of the address bar

5. Commands to run before check in

• Run the below command to build, test, check if files have copyright header, check file format styling & tslint issues

  yarn precheckin
  

• If the above command failed for formatting issues, run the below command to format all files

  yarn format
  

More Information

Developer Workflow

Testing

We use jest as our test framework and puppeteer for browser automation in our end-to-end UI tests.

Using VS Code

To run a task from the command palette, press Ctrl + Shift + P, select Tasks: Run Task, and select the task you want to run:

• yarn test runs all unit tests
• Test current file in VSCode runs just the tests in the currently-opened test file
• yarn test:e2e runs all end-to-end tests

To debug a test inside VS Code, set a breakpoint and click the debug button or press F5.

To attach VS Code as a debugger to a separate instance of Chrome, make sure you've launched Chrome with the --remote-debugging-port=9230 command line argument, and then use either of the Attach debugger... debug profiles from the VS Code Debug pane.

To debug using an external tool, run the Debug current test file outside VS Code task. In Chrome, for example, navigate to chrome://inspect and click Open dedicated DevTools for Node.

You can start an interactive watch session that automatically runs tests affected by uncommitted changes. To do this, run Begin Jest watch session from the command palette.

Using the terminal

yarn test runs all unit tests. yarn test -- -u runs all unit tests and updates snapshot files.

yarn test:e2e runs all end-to-end tests - you'll need to run yarn build first if you've changed non-test code. yarn test:e2e -- -u runs all end-to-end tests and updates snapshot files.

To run a single or small number of test files, run yarn test -- {FILE_NAME_REGEX}

Options after the -- are passed to Jest. For example, yarn test -- --watch will start an interactive watch session. See more about Jest options here.

To debug using an external tool, run node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand {RELATIVE_FILE_PATH}. In Chrome, for example, navigate to chrome://inspect and click Open dedicated DevTools for Node.

Data/Telemetry

By opting into telemetry, you help the community develop inclusive software. We collect anonymized data to identify the top accessibility issues found by the users. This will help focus the accessibility tools and standards community to improve guidelines, rules engines, and features.

This project collects usage data and sends it to Microsoft to help improve our products and services. Read our privacy statement to learn more.

Reporting security vulnerabilities

If you believe you have found a security vulnerability in this project, please follow these steps to report it. For more information on how vulnerabilities are disclosed, see Coordinated Vulnerability Disclosure.

FAQ

Please visit our FAQ page.

Contributing

All contributions are welcome! Please read through our guidelines on contributions to this project.

Code of Conduct

Please read through our Code of Conduct to this project.