fix: Make failure highlight more visible

[segamiken]

Details

Motivation

close #5610

Context

Design team suggested trying multiple border colors with red in the center and white surrounding this.

I implemented this based on one of the design team's suggestions listed in the issue.

This will make failure highlight more visible, especially for a dark background as in the following picture. However, for pages with white or other background colors, it is not very effective.

screenshots/GIFs to description above

Dark Background

Before	After

White Background

Before	After

Pull request checklist

• Addresses an existing issue: [Usability] Explore making failure instance highlight more visible #5610
• Ran yarn null:autoadd
• Ran yarn fastpass
• Added/updated relevant unit test(s) (and ran yarn test)
• Verified code coverage for the changes made. Check coverage report at: <rootDir>/test-results/unit/coverage
• PR title AND final merge commit title both start with a semantic tag (fix:, chore:, feat(feature-name):, refactor:). See CONTRIBUTING.md.
• (UI changes only) Added screenshots/GIFs to description above
• (UI changes only) Verified usability with NVDA/JAWS

[segamiken]

@microsoft-github-policy-service agree

[dbjorge]

Hi @segamiken ,

Thanks very much for the contribution! I think this is definitely on the right track visually, @ferBonnin and I have discussed and agree that the new UX you've created is a big improvement over the current highlight boxes.

I noticed while testing your changes locally that the new boxes look like they render a pixel or two off, and also that they appear to render the inner white border overtop the inside of the element being highlighted; we think we'd prefer to keep all 3 layers of the highlight box outline on the outside of the element if possible. I've been experimenting locally with an updated version of your changes that use a slightly different CSS technique to achieve that vs what you've done here, with a white box-shadow behind a colored outline instead of using a pseudo-element - it seems promising, but the experiment I have locally needs a bit more work before I send it out.

I just wanted to send a status update and acknowledge your contribution - we appreciate your PR, it's just taking us a bit longer than usual to review!

[segamiken]

Hi @dbjorge!
Thank you for sharing current status!

I noticed while testing your changes locally that the new boxes look like they render a pixel or two off,

Oh, sorry and thank you for finding this!

it seems promising, but the experiment I have locally needs a bit more work before I send it out.

I got it!
I'm waiting for you to share it with me when you're done with your experiment!

[dbjorge]

I've pushed an update that swaps to the box-shadow + outline version. It updates all the box drawers and their labels. It pushes the determination of box width to CSS to reduce the amount of per-element overhead in style attributes. It touches a bunch of files to change some DrawerConfiguration types from using borderColor to outlineColor. I also made some related refactorings while patching up the tests:

• The HighlightBoxDrawer previously allowed for no formatter to be passed and contained a "default drawer configuration" for that case. This was never used except for tests; I've removed it and updated drawer.test.ts accordingly
• Removed an obsolete LandmarkValue type (not used anywhere and referenced borderColor)

I also fixed up some issues specific to the landmark visualizer; per discussion with @ferBonnin, I included the same white border there but reduced the width of the dashed part from 3px to 2px. I also fixed an issue I noticed with high-contrast-mode rendering of the landmark visualizer's dashed highlight boxes (previously, we used HC colors for the outer box, but not the text label box; this fixes it to be consistent).

For reviewers, I recommend including the Deque Mars test page among your smoke tests; it has a lot of failures against non-white backgrounds that are good test cases.

Screenshots of new behavior:

Tab stops is not changed by this update and would need to be addressed in a separate PR:

In Windows HC mode:

[peterdur]

Opinion: I find 1px outline over 3px shadow makes the red outline not stand out as much as I'm used to, especially around images.

I think 2px outline over 4px shadow is a little clearer:

Will totally defer to @ferBonnin here.

[ferBonnin]

I see what you mean @peterdur specially for white backgrounds; I agree that 2px makes it more clearer but it also uses more space. I don't feel strongly about one way or another so if we prefer it, lets go with 2px with 4px shadow 🙂

[peterdur]

Implementation looks good, built and ran locally. Just one question about whether we want the outline to be a little stronger.

[dbjorge]

Thanks again for your contribution, @segamiken ! This change will be included in the next Accessibility Insights for Web release.

[segamiken]

@dbjorge
Thank you for your review and refactoring!