Revert "fix(datepicker): a11y - add ability to change year in month v…

…iew & focus indicator changes" (#1544)

…iew & focus indicator changes"

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

projects/angular/clarity.api.md

@@ -2889,28 +2889,13 @@ export class ClrModalModule {
 
 // @public (undocumented)
 export class ClrMonthpicker implements AfterViewInit {
-    constructor(_viewManagerService: ViewManagerService, _localeHelperService: LocaleHelperService, _dateNavigationService: DateNavigationService, _datepickerFocusService: DatepickerFocusService, _elRef: ElementRef<HTMLElement>, commonStrings: ClrCommonStringsService);
+    constructor(_viewManagerService: ViewManagerService, _localeHelperService: LocaleHelperService, _dateNavigationService: DateNavigationService, _datepickerFocusService: DatepickerFocusService, _elRef: ElementRef<HTMLElement>);
     get calendarMonthIndex(): number;
-    get calendarYear(): number;
     changeMonth(monthIndex: number): void;
-    changeToYearView(): void;
-    // (undocumented)
-    commonStrings: ClrCommonStringsService;
-    // (undocumented)
-    get currentCalendarMonth(): number;
-    // (undocumented)
-    get currentCalendarYear(): number;
-    currentYear(): void;
     getTabIndex(monthIndex: number): number;
-    // (undocumented)
-    isSelected(monthIndex: number): boolean;
     get monthNames(): ReadonlyArray<string>;
-    nextYear(): void;
     ngAfterViewInit(): void;
     onKeyDown(event: KeyboardEvent): void;
-    previousYear(): void;
-    // (undocumented)
-    get yearAttrString(): string;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrMonthpicker, "clr-monthpicker", never, {}, {}, never, never, false, never>;
     // (undocumented)
@@ -4877,8 +4862,6 @@ export class ClrYearpicker implements AfterViewInit {
     changeYear(year: number): void;
     // (undocumented)
     commonStrings: ClrCommonStringsService;
-    // (undocumented)
-    get currentCalendarYear(): number;
     currentDecade(): void;
     getTabIndex(year: number): number;
     nextDecade(): void;

projects/angular/src/forms/datepicker/_datepicker.clarity.scss

@@ -26,44 +26,30 @@
   color: inherit;
   border: none;
   border-radius: tokens.$cds-alias-object-border-radius-100;
+
   background: none;
   cursor: pointer;
 }
 
 @mixin generate-calendar-focus-style() {
-  &:hover {
-    background: datepicker-variables.$clr-calendar-btn-hover-color;
-  }
+  &:hover,
   &:focus {
-    outline: tokens.$cds-alias-object-interaction-outline;
-    outline-offset: calc(-1 * tokens.$cds-global-space-2);
-  }
-  &:active {
-    background: datepicker-variables.$clr-calendar-btn-active-color-bg;
+    background: datepicker-variables.$clr-calendar-btn-hover-focus-color;
   }
-}
 
-@mixin generate-current-date-style() {
-  &.is-today {
-    color: datepicker-variables.$clr-calendar-today-date-cell-color;
-    border: tokens.$cds-global-space-1 solid datepicker-variables.$clr-calendar-today-date-cell-border-color;
-    font-weight: datepicker-variables.$clr-calendar-today-date-cell-font-weight;
+  &:focus {
+    //Only because we have defined a background color for focus above
+    outline: 0;
   }
-}
 
-@mixin generate-selected-date-style() {
-  &.is-selected {
-    background: datepicker-variables.$clr-calendar-active-cell-background-color;
-    color: datepicker-variables.$clr-calendar-active-cell-color;
-    border: none;
-    &:focus {
-      background: datepicker-variables.$clr-calendar-active-focus-cell-background-color;
-    }
+  &:active {
+    background: datepicker-variables.$clr-calendar-btn-active-color-bg;
   }
 }
 
 @mixin generate-calendar-hover-active-color-style() {
-  &:hover {
+  &:hover,
+  &:focus {
     color: datepicker-variables.$clr-calendar-btn-hover-focus-color-text;
   }
 
@@ -111,15 +97,6 @@
     width: datepicker-variables.$clr-switcher-width;
   }
 
-  .year-view-switcher {
-    flex: 0 0 auto;
-    align-self: center;
-  }
-
-  .calendar-header.in-monthpicker {
-    margin-bottom: tokens.$cds-global-space-5;
-  }
-
   .calendar-table {
     // clr-calendar have dispaly: inline, preventing flex from having an effect.
     flex: 1 1 auto;
@@ -173,15 +150,18 @@
     @include generate-calendar-focus-style();
     @include generate-calendar-hover-active-color-style();
     @include mixins.generate-typography-token('SECONDARY-13-RG-EXP');
-    @include generate-current-date-style();
-    @include generate-selected-date-style();
 
     //Dimensions
     width: 100%;
 
     //Other Props
     color: inherit;
 
+    &.is-today {
+      color: datepicker-variables.$clr-calendar-today-date-cell-color;
+      font-weight: datepicker-variables.$clr-calendar-today-date-cell-font-weight;
+    }
+
     &.is-excluded {
       color: tokens.$cds-alias-object-interaction-color-disabled;
 
@@ -190,6 +170,15 @@
       }
     }
 
+    &.is-selected {
+      background: datepicker-variables.$clr-calendar-active-cell-background-color;
+      color: datepicker-variables.$clr-calendar-active-cell-color;
+    }
+
+    &.is-selected:focus {
+      background: datepicker-variables.$clr-calendar-active-focus-cell-background-color;
+    }
+
     &.is-disabled {
       color: tokens.$cds-alias-object-interaction-color-disabled;
       pointer-events: none;
@@ -224,18 +213,14 @@
     @include mixins.overflow-ellipsis();
   }
 
+  .monthpicker,
   .yearpicker {
-    min-height: datepicker-variables.$clr-yearpicker-min-height;
-  }
-
-  .monthpicker {
     min-height: datepicker-variables.$clr-monthpicker-min-height;
   }
 
   .monthpicker,
   .yearpicker,
-  .years,
-  .months {
+  .years {
     display: flex;
     flex-direction: column;
 
@@ -247,21 +232,18 @@
     gap: tokens.$cds-global-space-6;
   }
 
-  .years,
-  .months {
+  .monthpicker,
+  .years {
     flex-wrap: wrap;
-    flex-direction: row;
   }
 
   .month,
   .year {
     @include generate-calendar-button($padding: datepicker-variables.$clr-calendar-month-cell-padding);
     @include generate-calendar-hover-active-color-style();
     @include mixins.generate-typography-token('SECONDARY-13-RG-CPT');
-    @include generate-current-date-style();
-    @include generate-selected-date-style();
 
-    height: datepicker-variables.$clr-calendar-year-cell-height;
+    height: datepicker-variables.$clr-calendar-month-cell-height;
     width: datepicker-variables.$clr-month-year-btn-width;
 
     &.is-disabled {
@@ -271,11 +253,19 @@
         background: none;
       }
     }
+
+    &.is-selected {
+      background: datepicker-variables.$clr-calendar-active-cell-background-color;
+      color: datepicker-variables.$clr-calendar-active-cell-color;
+    }
+
+    &.is-selected:focus {
+      background: datepicker-variables.$clr-calendar-active-focus-cell-background-color;
+    }
   }
 
   .month {
     text-align: center;
-    height: datepicker-variables.$clr-calendar-month-cell-height;
     @include mixins.overflow-ellipsis();
   }
 

projects/angular/src/forms/datepicker/_properties.datepicker.scss

@@ -16,7 +16,6 @@
       --clr-calendar-btn-color: #{tokens.$cds-alias-object-interaction-color};
 
       --clr-calendar-today-date-cell-color: #{tokens.$cds-alias-typography-color-400};
-      --clr-calendar-today-date-cell-border-color: #{tokens.$cds-alias-object-interaction-border-color};
 
       --clr-calendar-active-cell-background-color: #{tokens.$cds-alias-object-interaction-background-highlight};
       --clr-calendar-active-focus-cell-background-color: #{tokens.$cds-alias-object-interaction-background-highlight};
@@ -26,7 +25,7 @@
       --clr-calendar-btn-picker-trigger-hover-color: #{tokens.$cds-alias-typography-link-color-hover};
       --clr-calendar-btn-picker-trigger-active-color: #{tokens.$cds-alias-typography-link-color};
 
-      --clr-calendar-btn-hover-color: #{tokens.$cds-alias-object-interaction-background-hover};
+      --clr-calendar-btn-hover-focus-color: #{tokens.$cds-alias-object-interaction-background-hover};
       --clr-calendar-btn-hover-focus-color-text: #{tokens.$cds-alias-object-interaction-color-hover};
       --clr-calendar-btn-active-color: #{tokens.$cds-alias-object-interaction-color-active};
       --clr-calendar-btn-active-color-bg: #{tokens.$cds-alias-object-interaction-background-active};

projects/angular/src/forms/datepicker/_variables.datepicker.scss

@@ -26,16 +26,15 @@ $clr-calendar-height: calc(
 );
 
 $clr-calendar-btn-color: var(--clr-calendar-btn-color) !default;
-$clr-calendar-btn-hover-color: var(--clr-calendar-btn-hover-color) !default;
+$clr-calendar-btn-hover-focus-color: var(--clr-calendar-btn-hover-focus-color) !default;
 $clr-calendar-btn-active-color-bg: var(--clr-calendar-btn-active-color-bg) !default;
 $clr-calendar-btn-hover-focus-color-text: var(--clr-calendar-btn-hover-focus-color-text) !default;
 $clr-calendar-btn-active-color: var(--clr-calendar-btn-active-color) !default;
 $clr-calendar-btn-picker-trigger-color: var(--clr-calendar-btn-picker-trigger-color) !default;
 
 $clr-calendar-btn-padding: 0;
 
-$clr-calendar-year-cell-height: #{tokens.$cds-global-space-12};
-$clr-calendar-month-cell-height: #{tokens.$cds-global-space-11};
+$clr-calendar-month-cell-height: #{tokens.$cds-global-space-12};
 $clr-calendar-month-cell-padding: #{tokens.$cds-global-space-6};
 
 $clr-calendar-picker-btn-font-size: var(--clr-calendar-picker-btn-font-size);
@@ -53,9 +52,6 @@ $clr-calendar-weekday-font-size: var(--clr-calendar-weekday-font-size);
 $clr-switcher-width: calc($clr-calendar-click-target * 3);
 
 $clr-monthpicker-min-height: calc(6 * $clr-calendar-month-cell-height);
-$clr-yearpicker-min-height: calc(6 * $clr-calendar-year-cell-height);
 $clr-month-year-btn-width: calc(
   0.5 * #{$clr-calendar-width} - #{tokens.$cds-global-space-7} - #{tokens.$cds-alias-object-border-width-100}
 );
-
-$clr-calendar-today-date-cell-border-color: var(--clr-calendar-today-date-cell-border-color);

projects/angular/src/forms/datepicker/model/calendar.model.ts

@@ -57,20 +57,6 @@ export class CalendarModel {
     }
   }
 
-  /**
-   * Returns CalendarModel of the previous year.
-   */
-  previousYear(): CalendarModel {
-    return new CalendarModel(this.year - 1, this.month);
-  }
-
-  /**
-   * Returns CalendarModel of the next year.
-   */
-  nextYear(): CalendarModel {
-    return new CalendarModel(this.year + 1, this.month);
-  }
-
   /**
    * Populates the days array with the DayModels in the current Calendar.
    */