Adding ngIf to the off-screen element and remove the aria-hidden from the directive

Author: MPopov

projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -4,8 +4,8 @@
 </ng-template>
 
 <ng-template let-result #defaultMonth let-obj>
-        <span class="igx-calendar__aria-off-screen" aria-live="polite">
-                {{ monthsViewNumber > 1  ? (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString())  + ' ' + (getViewDate(obj.index) | date: 'LLLL yyyy')) : resourceStrings.igx_calendar_selected_month_is + (getViewDate(obj.index) | date: 'LLLL yyyy')}}
+        <span *ngIf="monthsViewNumber < 2 || obj.index < 1" class="igx-calendar__aria-off-screen" aria-live="polite">
+            {{ monthsViewNumber > 1 ? (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString())  + ' ' + (getViewDate(obj.index) | date: 'LLLL yyyy')) : resourceStrings.igx_calendar_selected_month_is + (getViewDate(obj.index) | date: 'LLLL yyyy')}}
         </span>
         <span
             tabindex="0"

projects/igniteui-angular/src/lib/calendar/calendar.directives.ts

@@ -53,11 +53,6 @@ export class IgxCalendarYearDirective {
         return this.isCurrentYear ? 'spinbutton' : null;
     }
 
-    @HostBinding('attr.arria-hidden')
-    public get aHidden(): boolean {
-        return !this.isCurrentYear;
-    }
-
     @HostBinding('attr.aria-valuenow')
     public get valuenow(): number {
         return this.isCurrentYear ? this.date.getFullYear() : null;

projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html

@@ -1,7 +1,6 @@
 <div class="igx-calendar__body">
     <div class="igx-calendar__body-column" (wheel)="scroll($event)" (pan)="pan($event)">
         <span
-            [attr.aria-label]="formattedYear(year)"
             [igxCalendarYear]="year"
             [date]="date"
             (onYearSelection)="selectYear($event)"