#CX-20521: fix next page calendar disabled exception

Author: RiamLoddy

web-components/src/components/datepicker/datepicker-calendar/DatePickerCalendar.test.ts

@@ -20,7 +20,7 @@ describe("DatePickerCalendar Component", () => {
 
   test("should update view anchor date when changing months", async () => {
     const el: DatePickerCalendar.ELEMENT = await fixture(html` <md-datepicker-calendar></md-datepicker-calendar> `);
-    const event = new MouseEvent("click");
+    const event = new MouseEvent("button-click");
     const setDateFunc = jest.spyOn(el, "setDate");
 
     const nextMonthButton = el.shadowRoot?.querySelector("[aria-label^='next month']");

web-components/src/components/datepicker/datepicker-calendar/DatePickerCalendar.ts

@@ -105,7 +105,7 @@ export namespace DatePickerCalendar {
           aria-label=${`previous month`}
           title=${`previous month`}
           ?disabled=${allPrevDaysDisabled}
-          @click=${!allPrevDaysDisabled && this.decreaseMonth}
+          @button-click=${!allPrevDaysDisabled && this.decreaseMonth}
           tabindex="-1"
         >
           <md-icon name="arrow-left-bold" size="16" iconSet="momentumDesign"></md-icon>
@@ -124,7 +124,7 @@ export namespace DatePickerCalendar {
           aria-label=${`next month`}
           title=${`next month`}
           ?disabled=${allNextDaysDisabled}
-          @click=${!allNextDaysDisabled && this.increaseMonth}
+          @button-click=${this.increaseMonth}
           tabindex="-1"
           ><md-icon name="arrow-right-bold" size="16" iconSet="momentumDesign"></md-icon>
         </md-button>