fix(material/menu): submenu icon not working in high contrast mode (#23012)

Currently the submenu icon is rendered as a CSS triangle which turns into a rectangle in high contrast mode. These changes resolve the issue by using SVG for the icon instead.

Fixes #22944.

Author: crisbeto

src/material-experimental/mdc-menu/_menu-theme.scss

@@ -18,7 +18,7 @@
     // items so we have to grey them out ourselves.
     .mat-mdc-menu-item[disabled] {
       &,
-      &::after,
+      .mat-mdc-menu-submenu-icon,
       .mat-icon-no-color {
         @include mdc-theme.prop(color, text-disabled-on-background);
       }
@@ -27,7 +27,7 @@
     // Since we're creating `mat-icon` and the submenu trigger
     // chevron ourselves, we have to handle the color as well.
     .mat-mdc-menu-item .mat-icon-no-color,
-    .mat-mdc-menu-item-submenu-trigger::after {
+    .mat-mdc-menu-submenu-icon {
       @include mdc-theme.prop(color, text-icon-on-background);
     }
 

src/material-experimental/mdc-menu/menu-item.html

@@ -3,3 +3,8 @@
      [matRippleDisabled]="disableRipple || disabled"
      [matRippleTrigger]="_getHostElement()">
 </div>
+<svg
+  *ngIf="_triggersSubmenu"
+  class="mat-mdc-menu-submenu-icon"
+  viewBox="0 0 5 10"
+  focusable="false"><polygon points="0,0 5,5 0,10"/></svg>

src/material-experimental/mdc-menu/menu.scss

@@ -98,11 +98,14 @@ mat-menu {
   }
 }
 
-// Renders out a chevron on menu items that trigger a sub-menu.
 .mat-mdc-menu-item-submenu-trigger {
   @include menu-common.item-submenu-trigger(mdc-list.$deprecated-side-padding);
 }
 
+.mat-mdc-menu-submenu-icon {
+  @include menu-common.item-submenu-icon(mdc-list.$deprecated-side-padding);
+}
+
 // Increase specificity because ripple styles are part of the `mat-core` mixin and can
 // potentially overwrite the absolute position of the container.
 .mat-mdc-menu-item .mat-mdc-menu-ripple {

src/material-experimental/mdc-menu/menu.spec.ts

@@ -2070,7 +2070,9 @@ describe('MDC-based MatMenu', () => {
       const menuItems = overlay.querySelectorAll('[mat-menu-item]');
 
       expect(menuItems[0].classList).toContain('mat-mdc-menu-item-submenu-trigger');
+      expect(menuItems[0].querySelector('.mat-mdc-menu-submenu-icon')).toBeTruthy();
       expect(menuItems[1].classList).not.toContain('mat-mdc-menu-item-submenu-trigger');
+      expect(menuItems[1].querySelector('.mat-mdc-menu-submenu-icon')).toBeFalsy();
     });
 
     it('should increase the sub-menu elevation based on its depth', () => {

src/material/core/style/_menu-common.scss

@@ -1,4 +1,4 @@
-@use './private';
+@use '../../../cdk/a11y';
 @use './list-common';
 @use './layout-common';
 
@@ -58,36 +58,34 @@ $icon-margin: 16px !default;
   }
 }
 
-@mixin item-submenu-trigger($side-padding, $triangle-height: 10px) {
+@mixin item-submenu-trigger($side-padding) {
   // Increase the side padding to prevent the indicator from overlapping the text.
   padding-right: $side-padding * 2;
 
-  // Renders a triangle to indicate that the menu item will open a sub-menu.
-  &::after {
-    $size: private.private-div($triangle-height, 2);
-
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: $size 0 $size $size;
-    border-color: transparent transparent transparent currentColor;
-    content: '';
-    display: inline-block;
-    position: absolute;
-    top: 50%;
-    right: $side-padding;
-    transform: translateY(-50%);
-  }
-
   [dir='rtl'] & {
     padding-right: $side-padding;
     padding-left: $side-padding * 2;
+  }
+}
 
-    &::after {
-      right: auto;
-      left: $side-padding;
-      transform: rotateY(180deg) translateY(-50%);
-    }
+@mixin item-submenu-icon($side-padding) {
+  position: absolute;
+  top: 50%;
+  right: $side-padding;
+  transform: translateY(-50%);
+  width: 5px;
+  height: 10px;
+  fill: currentColor;
+
+  [dir='rtl'] & {
+    right: auto;
+    left: $side-padding;
+    transform: translateY(-50%) scaleX(-1);
+  }
+
+  // Fix for Chromium-based browsers blending in the `currentColor` with the background.
+  @include a11y.high-contrast(active, off) {
+    fill: CanvasText;
   }
 }
 

src/material/menu/_menu-theme.scss

@@ -21,15 +21,15 @@
 
     &[disabled] {
       &,
-      &::after,
+      .mat-menu-submenu-icon,
       .mat-icon-no-color {
         color: theming.get-color-from-palette($foreground, 'disabled');
       }
     }
   }
 
   .mat-menu-item .mat-icon-no-color,
-  .mat-menu-item-submenu-trigger::after {
+  .mat-menu-submenu-icon {
     color: theming.get-color-from-palette($foreground, 'icon');
   }
 

src/material/menu/menu-item.html

@@ -3,3 +3,9 @@
      [matRippleDisabled]="disableRipple || disabled"
      [matRippleTrigger]="_getHostElement()">
 </div>
+
+<svg
+  *ngIf="_triggersSubmenu"
+  class="mat-menu-submenu-icon"
+  viewBox="0 0 5 10"
+  focusable="false"><polygon points="0,0 5,5 0,10"/></svg>

src/material/menu/menu.scss

@@ -77,6 +77,10 @@ mat-menu {
   @include menu-common.item-submenu-trigger(menu-common.$side-padding);
 }
 
+.mat-menu-submenu-icon {
+  @include menu-common.item-submenu-icon(menu-common.$side-padding);
+}
+
 button.mat-menu-item {
   width: 100%;
 }

src/material/menu/menu.spec.ts

@@ -2055,7 +2055,9 @@ describe('MatMenu', () => {
       const menuItems = overlay.querySelectorAll('[mat-menu-item]');
 
       expect(menuItems[0].classList).toContain('mat-menu-item-submenu-trigger');
+      expect(menuItems[0].querySelector('.mat-menu-submenu-icon')).toBeTruthy();
       expect(menuItems[1].classList).not.toContain('mat-menu-item-submenu-trigger');
+      expect(menuItems[1].querySelector('.mat-menu-submenu-icon')).toBeFalsy();
     });
 
     it('should increase the sub-menu elevation based on its depth', () => {