fix(material/menu): focus indication rendering partially in high contrast mode (#21527)

Firefox seems to have an issue where the items cut off each other's outline in high contrast
mode. These changes work around the issue by introducing a slight margin.

Note that this isn't ideal, because the whole point of using an outline is so that the layout
isn't different on high contrast mode. The alternate approach is to use a `border`, but it
will cause the element to move around as the user is navigating.

Fixes #21524.

(cherry picked from commit bf34cdb)

Author: crisbeto

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

@@ -78,10 +78,16 @@
   }
 
   @include cdk-high-contrast(active, off) {
+    $outline-width: 1px;
+
+    // We need to move the item 1px down, because Firefox seems to have
+    // an issue rendering the top part of the outline (see #21524).
+    margin-top: $outline-width;
+
     &.cdk-program-focused,
     &.cdk-keyboard-focused,
     &-highlighted {
-      outline: dotted 1px;
+      outline: dotted $outline-width;
     }
   }
 }

src/material/menu/menu.scss

@@ -54,10 +54,16 @@ $mat-menu-submenu-indicator-size: 10px !default;
   }
 
   @include cdk-high-contrast(active, off) {
+    $outline-width: 1px;
+
+    // We need to move the item 1px down, because Firefox seems to have
+    // an issue rendering the top part of the outline (see #21524).
+    margin-top: $outline-width;
+
     &.cdk-program-focused,
     &.cdk-keyboard-focused,
     &-highlighted {
-      outline: dotted 1px;
+      outline: dotted $outline-width;
     }
   }
 }