[Usability] Explore making failure instance highlight more visible

[ferBonnin]

Describe the bug

In assessment, we highlight elements to review with a thin red line. In certain cases, it can be hard to understand what elements have been highlighted

To Reproduce Steps to reproduce the behavior:

1. Go to Accessible university
2. Open Assessment > Images > 14.1
3. Turn on visual helper

Expected behavior

Explore making the visual highlight clearer in different background colors. Design team suggested trying multiple border colors with red in the center and white surrounding this. Another option to explore would be making the red border slightly thicker and giving a bit of padding between the element and the line

The major concern is adding too many colors and lines might cover other elements thus why we are filing this bug to explore these two suggestions and discuss.

Screenshots

example of multiple border colors with a orange background and red and white borders

Context (please complete the following information)

• OS Name & Version: N/A
• AI-Web Version & Environment: Prod 2.32
• Browser Version: N/A
• Target Page: N/A

Are you willing to submit a PR?

No

Did you search for similar existing issues?

Yes

Additional context

usability. Bug to explore alternatives

[ghost]

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!

[ferBonnin]

if picking this issue, talk with @peterdur that has a prototype working. If possible, lets just do this change for automated checks, needs review and assessment highlights

[Pranav-yadav]

@ferBonnin I can help with this one; if not already assigned to anyone :)

PS: PRs for already picked issues are ready to review & merge.

[Pranav-yadav]

if picking this issue, talk with @peterdur that has a prototype working. If possible, lets just do this change for automated checks, needs review and assessment highlights

@peterdur any status, sir?

[peterdur]

@Pranav-yadav I started working on a prototype of what would be required from the HTML/CSS perspective to make double-line outlines work at https://github.com/microsoft/accessibility-insights-web/compare/main...peterdur:accessibility-insights-web:double-highlight; haven't yet had the opportunity to clean/parameterize the code to production quality, update tests, etc.; also meant to explore whether there was a cleaner CSS way to do this.

[Pranav-yadav]

Thanks! Will check it out..

[segamiken]

@peterdur As a user of accessibility-insights-web, I wanted to fix this issue. Therefore, I created my own PR. https://github.com/microsoft/accessibility-insights-web/pull/6164

[Pranav-yadav]

Nice!