microsoft/accessibility-insights-web

Color ad-hoc visualizer doesn't work correctly with pages containing iframes

dbjorge opened this issue · 2 comments

dbjorge commented

Describe the bug

On pages containing iframes, our "Color" ad-hoc visualizer misbehaves and applies its insights-gray-scale-container CSS class to iframe elements instead of the intended html element of each frame.

This only occurs in the ad-hoc visualizer, not visualizers for assessments that share the same "grayscale" behavior.

Workaround

Instead of using the "Color" toggle in the "Ad-hoc tools" panel, use an equivalent visual helper from an Assessment:

  1. Start an Assessment
  2. Navigate to Requirement 16.1 (Sensory > Color as meaning)
  3. Enable the Requirement's Visual Helper toggle

screenshot of the above workaround steps

Analysis

This is almost certainly another issue where the ad-hoc visualizer is receiving results of the new frame-tested check instead of the intended select-html check it would normally be using. The fix will probably be similar to #6403 - I expect that fix is the reason we don't see the same issue in assessment visualizers. We might want to consider a better means of fixing the issue more broadly, eg, filtering out the frame-tested results earlier as part of the scanner and using a completely separate field to report those results rather than co-mingling them with other test results.

This is a regression from 2.36.1 to 2.37.3, caught during 2.37.3 validation

To Reproduce
Steps to reproduce the behavior:

  1. Go to any test page containing iframes (eg, https://dequeuniversity.com/demo/mars/ )
  2. Open the popup and enable the ad-hoc color visualizer
  3. Observe that the page isn't rendered in grayscale (but iframes are)
  4. Observe in F12 developer tools that html element is missing expected insights-gray-scale-container class (but it's present unexpectedly on iframe elements)

CodePen repro example

n/a

Expected behavior

Color visualizer should render entire page in grayscale

Screenshots

screenshot of deque mars with color tool enabled but not rendered in grayscale

Context (please complete the following information)

  • OS Name & Version: Windows 11 and Ubuntu 22.04
  • AI-Web Version & Environment: 2.37.3 Insider (but not 2.36.1 Production)
  • Browser Version: Chrome 109 stable
  • Target Page: Any page with iframes, eg https://dequeuniversity.com/demo/mars/

Are you willing to submit a PR?

Yes

Did you search for similar existing issues?

Yes

Additional context

n/a

microsoft-github-policy-service commented

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

dbjorge commented

Verified resolved in canary