microsoft / accessibility-insights-web Goto Github PK

I think this tool is great for quickly validating accessibility on websites. I would also like to use it to perform audits on Electron applications, which are also built on web technologies.

I can install devtools extensions with this package (https://github.com/MarshallOfSound/electron-devtools-installer), but I cannot use this extension in my Electron application because it is not surface in the DevTools. It would be really great if a devtools tab could be added that surfaces the same UI the standard extension does

Describe the bug

On certain pages, after running automated checks and opening the "Failure details" dialog, it is not possible to click any of the buttons on the dialog.

To Reproduce
Steps to reproduce the behavior:

1. Navigate to https://www.schwab.com/
2. Click the extension icon close to the right-top corner
3. Click on Ad hoc tools
4. Enable Automated checks by clicking on the toggle
5. On the page itself, click on any of the red exclamation marks to show the failure details
6. Click the Copy failure details
7. Paste the content of the clipboard (on any text editor)
8. Observe: failure details are not being copied to the clipboard, there is no toast from clicking the button

Expected behavior

When the user click "Copy failure details", a toast with the text "Failure details copied" should appear, the failure details should be on the system clipboard

Screenshots

Working as expected scenario

Not working as expected scenario

Extension (please complete the following information)

• OS: Windows 10.0.17763 Build 17763
• Version: 2.0.4
• Chrome Version: 73.0.3683.75 (Official Build) (64-bit)
• Target Page: https://www.schwab.com/

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? Yes

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow
yes

Describe the bug

When running the scan I got 20 errors back saying "<dt> and <dd> elements must be contained by a <dl>" but in the DOM all the instances that the extension points out are wrapped in <dl> elements

To Reproduce

1. Go to a site https://jsfiddle.net/noj8ztfw/
2. Run the scan see the issue "<dt> and <dd> elements must be contained by a <dl>" despite the tag being contained in a <dl>

CodePen repro example

• Goto https://codepen.io/ for a starting codepen
• Create a simple example of the page that you have issues with and Export that codepen or give us a link to that codepen.
  https://jsfiddle.net/noj8ztfw/
  https://codepen.io/anon/pen/gypNRW

Expected behavior

This should be able to detect the parent element when the parent element is present

Screenshots

Extension (please complete the following information)

• OS: Mac
• Version 10.14.4
• Chrome Version Version 73.0.3683.86 (Official Build) (64-bit)

Are you willing to submit a PR?

Yes

Did you search for similar existing issues?

Yes

Additional context

Add any other context about the problem here.

Describe the bug

The Inspect HTML button in the details dialog on target page should not be disabled, for accessibility concerns.

To Reproduce
Open
Run automated checks.

1. Go to any web page with a11y issue.
2. Run automated checks.
3. Click the '!' icon in the target page.
4. See Inspect HTML button is disabled.

Expected behavior

Inspect HTML button should not be disabled. User should be able to interact with it.

Screenshots

If applicable, add screenshots to help explain your problem.

Extension (please complete the following information)

• OS: Windows
• Version: staging 2.1.2
• Chrome Version [e.g 71.0]
• Target Page: any

Are you willing to submit a PR?

yes

Did you search for similar existing issues?

yes

Did you search for similar issues in our github issues or on stackoverflow
yes

Additional context

Hey y'all! I'm sorry if this is mentioned somewhere, but I couldn't find anything about support for other browsers (specifically firefox for me).

I know that the firefox addon api is similar to chrome, but I unfortunately don't know the specifics about what's different.

Thanks!

Describe the bug

The overview page's help box should have a top padding of 20px per design, but the 17px margin on the "Help" h3 is inflating the top padding to 37px instead.

To Reproduce
Steps to reproduce the behavior:

1. Start an Assessment on any page
2. Click on the Overview assessment
3. Observe formatting of help box in top right

Expected behavior

Total space between help box's top border and top of Help text should be 20px.

Screenshots

Extension (please complete the following information)

• OS: Windows
• Version 2.2.0
• Microsoft Edge Version 75.0.131.0 (Official build) dev (64-bit)
• Target Page irrelevant

Are you willing to submit a PR?

yes

Did you search for similar existing issues?

yes

Describe the bug

The text alignment of the Test names in the left nav bar shifts slightly when the icon changes from a number to a pass/fail indicator:

It appears that either the numerical circles or the pass/fail icons are not quite centered with one another. In the mock there is an equal 8px of top and bottom padding, with a 24px by 24px size.

To Reproduce
Steps to reproduce the behavior:

1. Start an Assessment on any page
2. Click on any Test with manual pass/fail requirements (eg, "Errors")
3. Mark all the Requirements as "Pass"
4. From any requirement, toggle between setting it as "Pass" and resetting its status
5. As you toggle, observe that the text alignment of the "Errors" item in the left nav bar changes slightly

Expected behavior

This toggling should not shift the text in the nav bar

Extension (please complete the following information)

• OS: Windows
• Version 2.2.0
• Microsoft Edge Version 75.0.131.0 (Official build) dev (64-bit)
• Target Page irrelevant

Are you willing to submit a PR?

yes

Did you search for similar existing issues?

yes

Describe the bug

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Run JAWS
2. Go to an assessment's details view
3. Run the automated checks
4. close target page and details view
5. reopen target page and relaunch assessment

Actual behavior

observe that JAWS announces the "Assessment in progress" dialog but not the content inside it

Expected behavior

WCAG says that dialogs should announce their text content (via describedby)

Extension (please complete the following information)

• OS: Windows
• Version 1.200.29
• Chrome Version 72.0.3626.121
• Target Page any

Are you willing to submit a PR?

Yes

Did you search for similar existing issues?

[x] Did you search for similar issues in our github issues or on stackoverflow

Additional context

Discovered while investigating bug 1458545

Is your feature request related to a problem? Please describe.

When a user is tabbing through or listening to a page, having content visually appear outside of an expected flow can be counfounding. For users who cannot see the page, it also means offering help (face-to-face or through documentation) can be harder since the code order is opaque to most users. There are even WCAG success criteria devoted to this (1.3.1: Info and Relationships; Level A and 1.3.2: Meaningful Sequence; Level A). CSS absolute positioning, floats, flex, and grid can all make it trivially easy to create a page that is visually out of sequence but does not immediately register as a problem to a developer.

Describe the desired outcome

As a developer / tester / auditor / etc, I see benefit in providing an easy way to visualize the reading order of content on the page. In addition, applying simplified rules (if the arrow goes up and to the left for LTR languages, for example) can highlight places that a developer should review.

Describe alternatives you've considered

I have asked the Firefox Developers Tools team to consider adding this as part of their grid and flex inspector. The feature request exists as an issue report and a blog post.

Additional context

I see Accessibility Insights provides a visualization for tab order that looks very similar to my idea for visualizing reading order. This suggests that the visualization technique itself has some merit. Attached is a sample image I made for my Firefox feature request (with the last arrow in the step highlighted because it most likely violates reading order).

Describe the bug

We were using js for global setup & teardown files for jest due to this bug - jestjs/jest#5164
But, this issue is fixed now. So, we can move to typescript now.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Extension (please complete the following information)

• OS: [e.g. Windows/Mac]
• Version [e.g. 1.140.1]
• Chrome Version [e.g 71.0]
• Target Page [e.g www.bing.com]

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? Yes/No

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow

Additional context

Add any other context about the problem here.

Describe the bug

There are times that the icon for the accessibility problem overlaps the problem.

You should always be able to see the problem, so that you can understand it without disabling the accessibility insights automated checker.

To Reproduce

1. Go to https://tastybackend.com/
2. Enable Automated checks
3. Look at the log in link.

Expected behavior

The WAVE Toolbar does this correctly.

Screenshots

Extension (please complete the following information)

• OS: MacOS
• Chrome Version: 73.0.3683.103

Describe the feature

There are visually hidden headings which should have the semantic information exposed on focus & hover (when highlighting the H2) in the example below.

Screen reader content should be visible.

To Reproduce

1. Go to https://tastybackend.com/
2. Highlight the headings.

Expected behavior

Display semantic content if accessible to screen readers.

Screenshots

Extension (please complete the following information)

• OS: MacOSX
• Chrome Version: Latest
• Target Page: https://tastybackend.com/

Describe the bug

Found during insider validation of 2.1.0

To Reproduce
Steps to reproduce the behavior in dev
(example-site = a site of your choice with automated checks failures)

1. Build master as of commit f442d15 (release 2.0.5)
2. Start Chrome, go to chrome://extensions/ and update the extension
3. Start Chrome, right-click the extension button and choose "Inspect popup"
4. In DevTools, go to Application tab, Application > Clear storage, and click "Clear site data"
5. Close Chrome
6. Restart Chrome
7. Go to example-site
8. Open the extension popup, respond to telemetry prompt, and choose "Assessment"
9. Go to "Automated checks"
10. Observe: spinner says Scanning and counts up; soon automated check results are displayed.
11. Close Chrome
12. Build master as of commit 5be51c7 (release 2.1.0)
13. Restart Chrome, go to chrome://extensions/ and update the extension
14. Go to example-site
15. Open the extension popup and choose "Assessment"
16. Click "Continue previous" at the prompt
17. Go to "Automated checks"
18. Observe: spinner says Scanning 98% and never completes

Expected behavior

Saved automated check results should be displayed.

Screenshots

Extension (please complete the following information)

• OS: Windows
• Version 2.1.0
• Chrome Version 72.0.3626.121
• Target Page (example-site)

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? Fix not yet identified.

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow? Yes

Describe the bug

The extension crashes and needs to be repaired when I open the Inspector with Chrome on a Mac.

To Reproduce
Steps to reproduce the behavior:

1. Install the extension(stable or beta versions)
2. Enable the extension and activate it on a web page
3. While the application is running open the Inspector
4. The extension will disappear and you will have to Repair it in the chrome extension tab.

Expected behavior

When using Inspector the app should be paused to prevent a crash.

Screenshots

Extension (please complete the following information)

• OS: Mac
• Version [e.g. 1.140.1]
• Chrome Version 73.0.3683.86
• Target Page https://www.hdblog.it/

Describe the bug

Inspector console shows the warning "Refused to load the font '' because it violates the following Content Security Policy directive" on certain target pages.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://github.com
2. Run automated checks
3. Right click anywhere on the target page and select "Inspect"
4. Click the Console tab
5. See warning messages

Expected behavior

Inspector console should not output the warnings.

Screenshots

Extension (please complete the following information)

• OS: Windows
• Version 10.0.17134
• Chrome Version 73.0.3683.103
• Target Page https://github.com

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? Yes

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow Yes

Additional context

Add any other context about the problem here.

Describe the bug

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to an assessment's details view
2. Click on the Start over button
3. keyboard focus defaults to the more destructive button (start over) instead of the less destructive one (cancel)
4. dialog is not dismissable even though it has a safe cancel option

Expected behavior

Dialog should follow aria guidelines and make it easy to escape/discard safely

Extension (please complete the following information)

• OS: Windows
• Version 1.200.29
• Chrome Version 72.0.3626.121
• Target Page any

Are you willing to submit a PR?

Yes

Did you search for similar existing issues?

[x] Did you search for similar issues in our github issues or on stackoverflow

Additional context

Discovered while investigating bug 1458545, confirmed desired behavior with Fer already

Is your feature request related to a problem? Please describe.

It's difficult to install Accessibility Insights for Web onto Edge Insider.

Describe the desired outcome

I'd like to be able to install the extension without changing settings in my browser.

Describe alternatives you've considered

I can enable installation of extensions from other sources (i.e. the Chrome Web Store) and navigate to the extension URL directly to install it.

Describe the bug

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to any page with issues under iframes
2. Run automated checks
3. Try to file github issue for an element under iframe

Expected behavior

The title should only contain the last selector part. for eg: #item1"

Actual behavior

The title should the whole selector path for eg: "#iframe1;#item1"

The issue is caused by a bug in getSelectorLastPart method in (we are not handling iframe case)

Screenshots

If applicable, add screenshots to help explain your problem.

Extension (please complete the following information)

• OS: [e.g. Windows/Mac]
• Version [e.g. 1.140.1]
• Chrome Version [e.g 71.0]
• Target Page [e.g www.bing.com]

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? Yes/No

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow

Additional context

Add any other context about the problem here.

Describe the bug

When I tried to use "File Issue" feature on the Issue dialog popup, the process fails with following errors:

1. Azure boards: "Query string too long"
2. Github: 2FA fails with 500 error.

To Reproduce
Steps to reproduce the behavior:
Prerequisite: You should not be logged in Azure devops or github before this

1. Go to "any target page'
2. Click on Accessibility Insights popup windows and press settings to configure Issue filling.

Part 1:

3. Choose Github as the option and put in a url for your repo.
4. Fast Pass the target page
5. Turn on the visualizations for accessibility issues found
6. Click on the red exclamation mark to open Issue dialog
7. Click on the File Issue button and try to login

Part 2:

3. Choose Azure board as the option and put in a url for your repo.
4. Fast Pass the target page
5. Turn on the visualizations for accessibility issues found
6. Click on the red exclamation mark to open Issue dialog
7. Click on the File Issue button and try to login

Expected behavior

It should successfully file an issue or create an issue after logging you in for the specific service provider (github or azure boards)

If applicable, add screenshots to help explain your problem.

Extension (please complete the following information)

• OS: Windows 10
• Version: 10.0.17763 Build 17763
• Chrome Version: 74.0.3729.108 (Official Build) beta (64-bit)

Are you willing to submit a PR?

Yes

Did you search for similar existing issues?

Yes

Did you search for similar issues in our github issues or on stackoverflow

Yes

Describe the bug

#521 renamed the "Visual Helper" toggles to "Highlight instances on target page" but several How to Test instructions still refer to visual helpers. For example, Assessment > Landmarks > Landmark roles says "The visual helper for this requirement highlights all landmarks in the target page."

To Reproduce
Steps to reproduce the behavior:

1. Go to Assessment > Landmarks > Landmark roles
2. Observe that the toggle is called "Highlight instances on target page" but the instructions talk about the "visual helper" (see screenshot below)

Expected behavior

Language should be consistent between instructions and UX.

Screenshots

Extension (please complete the following information)

• OS: Windows
• Version: Insider 2.2.0
• Edge Insider version: Version 75.0.131.0 (Official build) dev (64-bit)
• Target Page: www.bing.com

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? Yes

Describe the bug

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to Chrome. Open a new tab.
2. Open background.html devtools console.
3. Type google.com (website url doesn't matter here). Type any url.
4. Check console to get the below mentioned error
5. See error

Expected behavior

There should not be a console error before I even start to use my accessibility Insights extension.

GIF

Extension (please complete the following information)

• OS: Windows 10
• Version:1.0.4
• Powered by axe-core 3.2.1
• Chrome Version: Version 74.0.3729.40 (Official Build) beta (64-bit)
• Target Page: N/A

Are you willing to submit a PR?

Yes

Did you search for similar existing issues?

Yes

Additional context

Add any other context about the problem here.

Describe the bug
From user feedback, emphasize the role of automated checks in the tool: "that no automated tool can find even a majority of accessibility defects on a web page"

To Reproduce
Steps to reproduce the behavior:

1. Go to https://www.washington.edu/accesscomputing/AU/before.html
2. Run automated checks

OR

1. Go to https://accessibilityinsights.io/docs/en/web/getstarted/fastpass

Expected behavior
The Automated checks section of FastPass should clarify that it only finds some of the most common accessibility issues

Are you willing to submit a PR?

Yes

Did you search for similar existing issues?

Yes

Describe the bug

Under certain Assessment requirement guidances, there are nested double quotes.

To Reproduce
Steps to reproduce the behavior:

1. Launch Accessibility Insights for Web.
2. Go to Assessments.
3. Review the "From a user's perspective" section under Repetitive > Bypass blocks.

Expected behavior

"re-read" and "bypass" within the quote should be surrounded by single quotes (currently surrounded by double quotes)

Screenshots

If applicable, add screenshots to help explain your problem.

Extension (please complete the following information)

• OS: [e.g. Windows/Mac]
• Version [e.g. 1.140.1]
• Chrome Version [e.g 71.0]
• Target Page [e.g www.bing.com]

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? Yes

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow

Additional context

Add any other context about the problem here.

This is the same issue as the #433 PR.

Describe the bug

This four rules should be best practice and not flagged in automated checks

• unique-landmark
• landmark-complementary-is-top-level
• landmark-banner-is-top-level
• landmark-contentinfo-is-top-level
• landmark-main-is-top-level
• landmark-no-duplicate-banner
• landmark-no-duplicate-contentinfo

To Reproduce
Steps to reproduce the behavior:

1. run automated checks in this page: https://webaim.org/intro/
   unique-landmark rule is marked as failed

Expected behavior

unique-landmark rule does not fail

Extension (please complete the following information)

• OS: Windows
• Version 2.0.5
• Chrome Version 72.0.3626.121
• Target Page https://webaim.org/intro/

Are you willing to submit a PR?

No

If asked, will you be willing to submit a PR to fix this bug?
No

Did you search for similar existing issues?

Yes

Did you search for similar issues in our github issues or on stackoverflow
Yes

Additional context

Reported in Twitter: https://twitter.com/jared_w_smith/status/1107791754206441472

Describe the bug

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Extension (please complete the following information)

• OS: [e.g. Windows/Mac]
• Version [e.g. 1.140.1]
• Chrome Version [e.g 71.0]
• Target Page [e.g www.bing.com]

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? Yes/No

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow

Additional context

Add any other context about the problem here.

Is your feature request related to a problem? Please describe.

How do we collect framework specific accessibility bugs from the telemetry that you are collecting to contribute back to the projects that they are built with?

Describe the desired outcome

I would like to see a list of Drupal, WordPress, GatsbyJS, etc issues, Ideally aligned with modules or plugins that are used. Would be nice to start being able to identify where accessibility bugs are introduced upstream.

Describe alternatives you've considered

I have asked groups like Siteimpove & Tenon to implement things like this.

Describe the bug

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to any page
2. Run Accessibility Insights for Web > Assessment
3. Go to Multimedia > Audio Description > more info and examples
4. missing link for WCAG 1.2.3

Expected behavior

Add a link in "WCAG Success criteria" for this requirement.
Name: Understanding Success Criterion 1.2.3: Audio Description or Media Alternative (Prerecorded)
link: https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded

Screenshots

.

Extension (please complete the following information)

NA

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? No

Did you search for similar existing issues?

Yes

Describe the bug

Back and next button in target page details dialog should be removed when there is only one instance.

To Reproduce
Steps to reproduce the behavior:

1. Go to any page with a11y issues.
2. run automated checks.
3. Scroll down to a failure, and open the details dialog by clicking '!'
4. See Back and next button in target page details dialog appear even when there is only 1 failure.

Extension (please complete the following information)

• OS: Windows
• Version 2.1.2
• Target Page any

Are you willing to submit a PR?

yes

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow
yes

Describe the bug

Details view crashes when refresh after target page is closed

To Reproduce
Steps to reproduce the behavior:

1. Go to any web page.
2. Click on fastPass.
3. Close the target page then refresh the details view page.
4. See error: details view is blank

Expected behavior

details view should not crash

Is your feature request related to a problem? Please describe.

It should be easier to verify you've got the right colors and know how to act on it.

Make it easier to see/understand color contrast problems. Sometimes what the color contrast tool is testing isn't what appears on the page. It would be good to clearly show a box with the background/foreground color in the message.

Might be also useful to remind folks that there may be additional testing required if there are gradients or background images.

Describe the desired outcome

There is a good description but most of haven't internalized the hex codes to know what foreground color: #00836d & background color: #fbf5ee look like.

You could also possibly suggest colors like would meet the requirements like http://contrast-finder.tanaguru.com/

Additional context

Describe the bug

For some links the dialog box jitters in a way which could cause people with epilepsy problems. I'm not sure why it is flickering like this. The screenshot doesn't demonstrate it but the video does.

To Reproduce

I'm having this issue on the second color contrast link on https://tastybackend.com/

Chrome, MacOSX.

Expected behavior

It shouldn't flicker.

Screenshots

https://drive.google.com/file/d/1CmPOQ9byiIr2471KjCovNJiUwP0bsJDK/view

Is your feature request related to a problem? Please describe.

Some of the categories produce a list of elements on the page that you can mark as a pass or fail. Sometimes it's not immediately obvious to another person why you've marked a particular instance as a fail.

e.g. I might want to fail <h1><img src="logo.gif" alt="Project Name"></h1> under "Headings -> Heading function" because the alt text doesn't describe the purpose of the page and shouldn't be a heading.

I might also want to fail <img src="logo.gif" alt="header logo"> under "Images -> Text alternative" because the alt text doesn't have parity with the text in the logo.

Currently there's no way for me to actually say that in the report - I just have to mark it as a fail and hope the person reviewing the report (who might be the same person who implemented the original code!) understands the problem.

Describe the desired outcome

It'd be good to be able to add a comment in lists of instances (e.g. headings, images) to make it clear in the exported report why an item has been flagged.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

This is a fantastic tool, thanks so much for your hard work on it! 😄

Describe the bug

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:
0.- turn on NVDA

1. Go to https://www.washington.edu/accesscomputing/AU/before.html
2. Click on Assessment, select start new (if there is an assessment in progress)
3. Using Keyboard, navigate to the switcher drop down list that allows you to go to FastPass
   4.- open the list using space bar, up arrow to select FastPass, space to select the option
4. Using Keyboard, navigate to the switcher drop down list that allows you to go to Assessment
   6.- Open the list using space bar, down arrow to select Assessment, Space to select the option

Screen reader reads: "select workflow list collapsed FastPass" on change from FastPass to Assessment

Note: can't repro this consistently

Expected behavior

it should announce that the page changed to Assessment view

Extension (please complete the following information)

• OS: [e.g. Windows/Mac] Windows
• Version [e.g. 1.140.1] 2.1.2
• Chrome Version [e.g 71.0] 73.0.3683.103
• Target Page https://www.washington.edu/accesscomputing/AU/before.html

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug?No

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow
Yes

Additional context

Add any other context about the problem here.

Describe the bug

The overview page's help box should be using links of color "communication-primary" per design, but are instead using "communication-shade-10" via the .insights-link class. Need to verify with design whether it's the insights-link style that's wrong (ie, whether all of our links should be "communication-primary" by default) or if it's just these specific links that should be changed.

To Reproduce
Steps to reproduce the behavior:

1. Start an Assessment on any page
2. Click on the Overview assessment
3. right click/inspect on any of the links
4. observe that the color is rgb(16, 110, 190) (via .insights-link using --link color with !important)

Expected behavior

Links should be colored as communication-primary rgb(0, 120, 212)

Screenshots

Extension (please complete the following information)

• OS: Windows
• Version 2.2.0
• Microsoft Edge Version 75.0.131.0 (Official build) dev (64-bit)
• Target Page irrelevant

Are you willing to submit a PR?

yes

Did you search for similar existing issues?

yes

Describe the bug

#521 renamed the "Visual Helper" toggles to "Highlight instances on target page" but this doesn't make sense in some cases:

• The toggle for “color as meaning” page makes the whole page go grey (see screenshot below for context)
• The toggles for “keyboard navigation” and “visible focus” record elements that get the keyboard focus

To Reproduce
Steps to reproduce the behavior:

1. Go to Assessment > Sensory > Color as meaning
2. Observe that toggle is labeled "Highlight instances on target page”
3. Click toggle and note that it does not highlight instances; it turns the whole page greyscale.

Expected behavior

Toggle should be labeled consistently with its behavior.

Screenshots

If applicable, add screenshots to help explain your problem.

Extension (please complete the following information)

• OS: Windows
• Version: Insider 2.2.0
• Edge Insider version: Version 75.0.131.0 (Official build) dev (64-bit)
• Target Page: www.bing.com

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? Yes

Describe the bug

When I try to run the extension on Chromium, I am running into various styling issues. This has occurred with both the Production and Canary extensions.

In the console for the "fast pass" window, I see a file not found error for /Styles/default/detailsview.css.

Style Issues:

1. The popup (what is shown when you click the favicon) is too narrow. I have a feeling that there is another stylesheet that fails to load, but I do not see an error for it.
2. The details view (the screen that is opened when you click on the FastPass or Assessment options in the popup) fails to load the detailsview CSS file.

I found the extension source code on my local filesystem, and the Styles/default/detailsview.css file exists there, so I'm not sure why Chromium cannot load it.

Screenshots

Extension

• OS: Linux Mint
• Version 19.1
• Chromium Version 72.0.3626.121
• Target Page: any page

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? Yes

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow? Yes

Describe the bug

Users that read the overview section's summary paragraph don't always understand how assessment works.

To Reproduce
Steps to reproduce the behavior:

1. Open Accessibility Insights for Web.
2. Go to Assessment.
3. Go to Overview

Expected behavior

This summary indicates the overall accessibility of the website or web app, based on a combination of automated and manual tests that cover all the success criteria described by the Web Content Accessibility Guidelines (WCAG) 2.0 for Level AA conformance. Each manual test covers a set of related accessibility requirements, with provided step-by-step testing instructions and guidance. Where possible, Accessibility Insights for Web assists the manual testing process by generating a list of potential issues to evaluate and highlighting them on the screen. Accessibility Insights for Web also allows you to manually record instances of failure.

Screenshots

If applicable, add screenshots to help explain your problem.

Extension (please complete the following information)

• OS: [e.g. Windows/Mac]
• Version [e.g. 1.140.1]
• Chrome Version [e.g 71.0]
• Target Page [e.g www.bing.com]

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? Yes/No

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow

Additional context

Add any other context about the problem here.

Describe the bug

According to the Headers test guidance in Assessment, "If the page uses headings, an automated check will fail if the page does not have exactly one top-level heading."

However, a page that doesn't have exactly 1 top-level heading when it uses headings isn't failing a corresponding automated check.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codepen.io/anon/pen/eovjqJ (another site example: https://bbc.com)
2. Run FastPass.

CodePen repro example

Please provide a reproduction of the bug in a codepen, if possible. Here’s how

• Goto https://codepen.io/ for a starting codepen
• Create a simple example of the page that you have issues with and Export that codepen or give us a link to that codepen.

https://codepen.io/anon/pen/eovjqJ

Expected behavior

One of two:

• Headings guidance doesn't mention that automated check fails under these conditions.
  or
• An automated check fails.

Screenshots

If applicable, add screenshots to help explain your problem.

Extension (please complete the following information)

• OS: [e.g. Windows/Mac] Windows
• Version [e.g. 1.140.1] 2.1.2
• Chrome Version [e.g 71.0] 73.0.3683.103
• Target Page [e.g www.bing.com] www.bbc.com

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? Yes

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow Yes

Additional context

Add any other context about the problem here.

Describe the bug

Scroll bar for requirements is gone with new Chrome update

To Reproduce
Steps to reproduce the behavior:

1. Go to https://www.washington.edu/accesscomputing/AU/before.html
2. Click on Accessibility Insights for Web extension, run Assessment
3. Go to automated checks
4. find valid-lang rule

Expected behavior

there should bea scrollbar to navigate through the requirements on the right

Screenshots

If applicable, add screenshots to help explain your problem.

Extension (please complete the following information)

• OS: Windows
• Version 2.0.5
• Chrome Version 73.0.3683.86
• Target Page: any

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? No

Did you search for similar existing issues?

Yes

Additional context

this only repros with the latest Chrome version

Is your feature request related to a problem? Please describe.

When doing a fastpass on a website, red outlines with exclamation points are shown that I can click to see what the failure is. I then get a popup that has a 'rule name' for example 'image-alt' that's a link to an explanation on dequeuniversity.com. When I want to know the number of the WCAG 2.1 success criterion the failure falls under, I always have to click the link. Since I'm familiar with the SC's, I often need only the number (1.1.1 in the case of my example). The Axe extension does this and it's super handy.

Describe the desired outcome

I'd love to have the number of the SC right in the popup, for example right after the rule name. That would save me quite a lot of clicks.

Is your feature request related to a problem? Please describe.

No

Describe the desired outcome

If possible, it would bring a great impact if we could run this check on a CI/CD pipeline for a Windows/Web application, if possible.

Describe alternatives you've considered

So far, I don't see any alternatives for achieving this during a DevOps pipeline.

Additional context

Adding this inclusive concern to the DevOps story would bring such great impact to everyone in the world. I'd be happy to contribute if you need a hand.

The plugin can be installed, however when trying to open the plugin actions by left-clicking the plugin icon, the plugin disables itself.

• OS: Linux / Ubuntu 16.04
• Chrome:
  • Version 74.0.3724.8 (Official Build) dev (64-bit)
  • Version 73.0.3683.75 (Official Build) (64-bit)
• Target Page: (any) example: google.com

Please let me know if i can provide more information.

Issue:
Upon installation of the extension, and first attempt to use the plugin, a screen is displayed with telemetry opt-in/opt-out options. The end user is unable to uncheck the telemetry opt-in box, and does not have the ability to opt-out.

Expected:
End user is able to opt-out of telemetry.

Steps to Reproduce:

1. Using macOS v10.14.2 (18C54) and Chrome v72.0.3626.119 (Official Build) (64-bit), and without having it already added to browser, navigate to the extensions download page in Chrome Web Store: https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni
2. Click 'Add to Chrome' button.
3. Confirm successful installation of extension.
4. Navigate to any URL (ex., https://google.com) and click on the extension within the extension bar.
5. On the telemetry opt-in/out notification, click the checkbox to unselect the checkbox (opt-out).
6. Observe: end user is unable to unselect the checkbox, and as a result, unable to opt-out of telemetry.

Documentation:
Please note .mov file for more information.
extension telemetry checkbox.mov.zip

Environment:

• macOS v10.14.2 (18C54) and Chrome v72.0.3626.119 (Official Build) (64-bit)
• Chrome extension v2.0.4
• URL: https://google.com

Describe the bug

buttons are not usable in the issue details on target page

To Reproduce
Steps to reproduce the behavior:

1. Go to https://uifabric-prod.azurewebsites.net/?example=jhkjhkj#/components/toggle
2. run automated checks
3. Click one failure to open issue details
4. See error

Expected behavior

buttons should look the same as in any other page

Screenshots

Extension (please complete the following information)

• OS: Windows
• Version: 2.1.2
• Chrome Version : 73.0.3683.86

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? No

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow
Yes

Describe the bug

scan is broken

To Reproduce

1. Go to any page
2. toggle adhoc tools -> automated checks,
3. spinner spinning forever

Expected behavior

Scan should be able to complete

Screenshots

If applicable, add screenshots to help explain your problem.

Extension (please complete the following information)

• OS: Windows 10
• Version: Canary 2019.4.12.23
• Chrome Version: 73
• Target Page: any

Are you willing to submit a PR?

Yes

Did you search for similar existing issues?

no

Additional context

Add any other context about the problem here.

Describe the bug

The popup.html content when trying to run the extension on a file:// url when this is not enabled in extension settings references "Chrome" even from Edge in the message Your Chrome settings don't allow Accessibility Insights for Web to run on file URLs.

To Reproduce
Steps to reproduce the behavior:

1. Ensure the extension settings do not have "Enable for file:// urls" checked
2. Navigate to any file:// URL
3. Click on the extension icon
4. Observe the message from above

CodePen repro example

n/a

Expected behavior

Message should be updated to something browser-agnostic ("extension settings"?

Screenshots

Extension (please complete the following information)

• OS: Windows
• Version 2.2.0
• Edge Version 75.0.131.0 (Official build) dev (64-bit)
• Target Page: any file:// page (I used file:///Q:/repos/accessibility-insights-web/src/tests/end-to-end/test-resources/native-widgets/input-type-radio.html)

Are you willing to submit a PR?

yes

Did you search for similar existing issues?

yes

Additional context

We should audit the codebase for other strings containing the term "Chrome" as part of the fix here

Describe the bug

URL change dialog box doesn't show up when we go from one file url to another.

To Reproduce
Steps to reproduce the behavior:

1. Open a HTML file in chrome to test for accessibility issues
2. Run assessment by clicking on Assessment from extension's popup page.
3. Verify some assessments so that it makes an entry in indexed DB
4. Change the file url to another url by opening another HTML file.

Expected behavior

The change in files should trigger the URL change dialog box to show up as it does when we change target page urls.

GIF

Extension (please complete the following information)

OS: Windows 10
Version: 10.0.17763 Build 17763
Chrome Version: 74.0.3729.108 (Official Build) beta (64-bit)

Are you willing to submit a PR?

Yes/No

Did you search for similar existing issues?

Yes

Describe the bug

We specify a secondary-text color of rgba(0,0,0,.6), but the design color palette expects it to be rgba(0,0,0,.55).

To Reproduce
Steps to reproduce the behavior:

1. Start an assessment on any page
2. Go to the Overview
3. Right click -> inspect on the "This page contains a summary..." text
4. Observe the computed color

Screenshots

Extension (please complete the following information)

• OS: Windows
• Version 2.2.0
• Microsoft Edge Version 75.0.131.0 (Official build) dev (64-bit)
• Target Page any

Are you willing to submit a PR?

yes

Did you search for similar existing issues?

yes

Additional context

double check other colors in design palette while fixing this one

Describe the bug

When I run npm run build, the build is failing with "Module not found" error. Both on master and v2.0.1.

To Reproduce
Steps to reproduce the behavior:

1. git clone
2. npm install
3. npm run build

Expected behavior

The build should succeed.

Screenshots

> [email protected] build /home/nicolas/accessibility-insights-web
> grunt

Running "clean:intermediates" (clean) task
>> 1 path cleaned.

Running "exec:webpack-dev" (exec) task
Starting type checking service...
Using 1 worker with 2048MB memory limit
Hash: 151b0c4be3a499a47353
Version: webpack 4.29.1
Time: 19620ms
Built at: 03/14/2019 11:01:28 AM
                    Asset      Size       Chunks             Chunk Names
     background.bundle.js  5.48 MiB   background  [emitted]  background
 background.bundle.js.map   5.5 MiB   background  [emitted]  background
    detailsView.bundle.js  7.69 MiB  detailsView  [emitted]  detailsView
detailsView.bundle.js.map  7.29 MiB  detailsView  [emitted]  detailsView
       devtools.bundle.js  4.01 KiB     devtools  [emitted]  devtools
   devtools.bundle.js.map  3.52 KiB     devtools  [emitted]  devtools
       injected.bundle.js   7.3 MiB     injected  [emitted]  injected
   injected.bundle.js.map  6.93 MiB     injected  [emitted]  injected
       insights.bundle.js  6.43 MiB     insights  [emitted]  insights
   insights.bundle.js.map  6.04 MiB     insights  [emitted]  insights
          popup.bundle.js  7.12 MiB        popup  [emitted]  popup
      popup.bundle.js.map  6.69 MiB        popup  [emitted]  popup
Entrypoint injected = injected.bundle.js injected.bundle.js.map
Entrypoint popup = popup.bundle.js popup.bundle.js.map
Entrypoint insights = insights.bundle.js insights.bundle.js.map
Entrypoint detailsView = detailsView.bundle.js detailsView.bundle.js.map
Entrypoint devtools = devtools.bundle.js devtools.bundle.js.map
Entrypoint background = background.bundle.js background.bundle.js.map
[0] multi ./src/injected/stylesheet-init.ts ./src/injected/client-init.ts 40 bytes {injected} [built]
[1] multi ./src/views/insights/initializer.ts 28 bytes {insights} [built]
[2] multi ./src/DetailsView/details-view-initializer.ts 28 bytes {detailsView} [built]
[3] multi ./src/devtools/dev-tool-init.ts 28 bytes {devtools} [built]
[4] multi ./src/background/background-init.ts 28 bytes {background} [built]
[./src/DetailsView/details-view-initializer.ts] 15.8 KiB {detailsView} [built]
[./src/background/background-init.ts] 5.07 KiB {background} [built]
[./src/background/browser-adapter.ts] 7.02 KiB {popup} {insights} {detailsView} {background} [built]
[./src/common/fabric-icons.ts] 2.32 KiB {injected} {popup} {insights} {detailsView} [built]
[./src/common/url-parser.ts] 798 bytes {popup} {detailsView} [built]
[./src/common/url-validator.ts] 3.99 KiB {popup} {background} [built]
[./src/injected/client-init.ts] 826 bytes {injected} [built]
[./src/injected/stylesheet-init.ts] 306 bytes {injected} [built]
[./src/popup/scripts/popup-init.ts] 963 bytes {popup} [built]
[./src/popup/scripts/popup-initializer.ts] 10.3 KiB {popup} [built]
    + 1469 hidden modules

ERROR in multi ./src/devtools/dev-tool-init.ts
Module not found: Error: Can't resolve '/home/nicolas/accessibility-insights-web/src/devtools/dev-tool-init.ts' in '/home/nicolas/accessibility-insights-web'
 @ multi ./src/devtools/dev-tool-init.ts devtools[0]

ERROR in /home/nicolas/accessibility-insights-web/src/injected/main-window-context.ts
ERROR in /home/nicolas/accessibility-insights-web/src/injected/main-window-context.ts(3,22):
TS6053: File '/home/nicolas/accessibility-insights-web/src/injected/Window.d.ts' not found.

ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/chrome-adapter-mock.ts
ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/chrome-adapter-mock.ts(7,65):
TS2307: Cannot find module '../Stubs/chrome-adapter-stub'.

ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/chrome-adapter-mock.ts
ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/chrome-adapter-mock.ts(9,14):
TS2420: Class 'PortWithTabTabIdStub' incorrectly implements interface 'PortWithTabId'.
  Property 'postMessage' is missing in type 'PortWithTabTabIdStub'.

ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/chrome-adapter-mock.ts
ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/chrome-adapter-mock.ts(12,14):
TS2339: Property 'name' does not exist on type 'PortWithTabTabIdStub'.

ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/chrome-adapter-mock.ts
ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/chrome-adapter-mock.ts(13,14):
TS2339: Property 'onMessage' does not exist on type 'PortWithTabTabIdStub'.

ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/chrome-adapter-mock.ts
ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/chrome-adapter-mock.ts(14,14):
TS2339: Property 'onDisconnect' does not exist on type 'PortWithTabTabIdStub'.

ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/port-on-disconnect-mock.ts
ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/port-on-disconnect-mock.ts(6,36):
TS2307: Cannot find module '../Stubs/chrome-adapter-stub'.

ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/port-on-message-mock.ts
ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/mock-helpers/port-on-message-mock.ts(6,35):
TS2307: Cannot find module '../Stubs/chrome-adapter-stub'.

ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/tests/background/dev-tools-listener.test.ts
ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/tests/background/dev-tools-listener.test.ts(14,26):
TS2307: Cannot find module '../../Stubs/chrome-adapter-stub'.

ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/tests/background/dev-tools-listener.test.ts
ERROR in /home/nicolas/accessibility-insights-web/src/tests/unit/tests/background/dev-tools-listener.test.ts(41,27):
TS2339: Property 'name' does not exist on type 'PortWithTabTabIdStub'.
>> Exited with code: 2.
>> Error executing child process: Error: Process exited with code 2.
Warning: Task "exec:webpack-dev" failed. Use --force to continue.

Aborted due to warnings.

Extension (please complete the following information)

• OS: Linux Mint
• Version: 19.1
• npm: 6.9.0

Are you willing to submit a PR?

If asked, will you be willing to submit a PR to fix this bug? It depends :)

Did you search for similar existing issues?

Did you search for similar issues in our github issues or on stackoverflow? Yes