Giter VIP home page Giter VIP logo

accessibility-insights-web's Introduction

Product Logo Accessibility Insights for Web

Build Status

Accessibility Insights for Web is a Google Chrome 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

Building the code

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 [email protected]:Microsoft/accessibility-insights-web.git
  • Select the created directory
    cd accessibility-insights-web

2. Install packages

  • Install the packages
    npm install

3. Build and run unit tests

  • Run the unit tests
    npm test
  • Build and run the end-to-end tests (note: you must use a non-admin prompt to avoid this issue)
    npm run build
    npm run test:e2e
    There are more details in the Testing section below.

4. Load the extension locally

  • Build the (unpacked) extension

    npm run build
  • Add the extension to your Chrome 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 Dev Logo 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
    npm run precheckin
  • If the above command failed for formatting issues, run the below command to format all files
    npm run 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:

  • npm: test runs all unit tests
  • Test current file in VSCode runs just the tests in the currently-opened test file
  • npm: 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

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

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

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

Options after the -- are passed to Jest. For example, npm 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.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

accessibility-insights-web's People

Contributors

ada-cat avatar adnoc avatar dbjorge avatar devaradhanm avatar ferbonnin avatar haonliu avatar karanbirsingh avatar lisli1 avatar markreay avatar microsoftopensource avatar msftgits avatar mslonli avatar peterdur avatar risanaka avatar shobhit1 avatar smoralesd avatar waabid avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.