fix(material/datepicker): correctly render calendar arrow in high contrast mode (#23057)

Fixes that the calendar arrow was rendering as a rectangle in high contrast mode.

(cherry picked from commit 1afbdbd)

Author: crisbeto

src/material/datepicker/_datepicker-theme.scss

@@ -67,7 +67,7 @@ $calendar-weekday-table-font-size: 11px !default;
   $disabled-color: theming.get-color-from-palette($foreground, disabled-text);
 
   .mat-calendar-arrow {
-    border-top-color: theming.get-color-from-palette($foreground, icon);
+    fill: theming.get-color-from-palette($foreground, icon);
   }
 
   // The prev/next buttons need a bit more specificity to

src/material/datepicker/calendar-header.html

@@ -5,8 +5,10 @@
             [attr.aria-describedby]="_buttonDescriptionId"
             cdkAriaLive="polite">
       <span [attr.id]="_buttonDescriptionId">{{periodButtonText}}</span>
-      <div class="mat-calendar-arrow"
-           [class.mat-calendar-invert]="calendar.currentView !== 'month'"></div>
+      <svg class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView !== 'month'"
+           viewBox="0 0 10 5" focusable="false">
+           <polygon points="0,0 5,5 10,0"/>
+      </svg>
     </button>
 
     <div class="mat-calendar-spacer"></div>

src/material/datepicker/calendar.scss

@@ -1,4 +1,5 @@
 @use '../core/style/layout-common';
+@use '../../cdk/a11y';
 
 $calendar-padding: 8px !default;
 $calendar-header-divider-width: 1px !default;
@@ -51,12 +52,8 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 .mat-calendar-arrow {
   display: inline-block;
-  width: 0;
-  height: 0;
-  border-left: $calendar-arrow-size solid transparent;
-  border-right: $calendar-arrow-size solid transparent;
-  border-top-width: $calendar-arrow-size;
-  border-top-style: solid;
+  width: $calendar-arrow-size * 2;
+  height: $calendar-arrow-size;
   margin: 0 0 0 $calendar-arrow-size;
   vertical-align: middle;
 
@@ -67,6 +64,11 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   [dir='rtl'] & {
     margin: 0 $calendar-arrow-size 0 0;
   }
+
+  @include a11y.high-contrast(active, off) {
+    // Setting the fill to `currentColor` doesn't work on Chromium browsers.
+    fill: CanvasText;
+  }
 }
 
 .mat-calendar-previous-button,