bug(menu): nested menu indicator renders weird in high contrast mode

[jelbourn]

The nested menu indicator renders weird in high contrast mode for both the pre-MDC and MDC-based menu

We render the arrow using a border on an ::after element, where 3 of the four border edges are transparent, but high contrast mode turns all border colors white, so it just looks like a box. As much as I enjoyed render rendering those arrows with CSS, their time has come to an end.

[crisbeto]

This is an issue in several places where we use CSS triangles for icons (e.g. mat-select). I tried fixing it in the select as a POC, but it turned out to be difficult to land in g3. #14219

[jelbourn]

Maybe as a phase 1 we can change the style just in high contrast mode and then do the rest later. We can also just try to fix it in the MDC component, which would be much easier to land.

[crisbeto]

It is doable, but it'll be annoying since the regular arrow is done purely with CSS, whereas the high contrast one would be SVG. We could do the HC one in CSS by embedding the SVG icon as base64.

[jelbourn]

Yeah, thinking about it more we should just try to do a straight switch and power through the screenshot diffs.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}